forked from crowetic/commerce
assets
components
cart
core
Avatar
Featurebar
Footer
HTMLContent
Head
Layout
Navbar
Navbar.module.css
Navbar.tsx
index.ts
Searchbar
Toggle
UserNav
index.ts
icon
product
ui
wishlist
config
lib
pages
public
utils
.gitignore
.prettierignore
README.md
codegen.json
global.d.ts
next-env.d.ts
next.config.js
package.json
postcss.config.js
tailwind.config.js
tsconfig.json
yarn.lock
59 lines
1.6 KiB
TypeScript
59 lines
1.6 KiB
TypeScript
import s from './Navbar.module.css'
|
|
import { FC } from 'react'
|
|
import Link from 'next/link'
|
|
import { useTheme } from 'next-themes'
|
|
import { Logo } from '@components/ui'
|
|
import { Searchbar, Toggle, UserNav } from '@components/core'
|
|
interface Props {
|
|
className?: string
|
|
}
|
|
|
|
const Navbar: FC<Props> = ({ className }) => {
|
|
const rootClassName = className
|
|
const { theme, setTheme } = useTheme()
|
|
return (
|
|
<div className={rootClassName}>
|
|
<div className="flex justify-between align-center flex-row py-4 md:py-6 relative">
|
|
<div className="flex flex-1 items-center">
|
|
<Link href="/">
|
|
<a className="cursor-pointer">
|
|
<Logo />
|
|
</a>
|
|
</Link>
|
|
<nav className="space-x-4 ml-6 sm:hidden lg:block">
|
|
<Link href="/">
|
|
<a className={s.link}>All</a>
|
|
</Link>
|
|
<Link href="/">
|
|
<a className={s.link}>Clothes</a>
|
|
</Link>
|
|
<Link href="/">
|
|
<a className={s.link}>Accessories</a>
|
|
</Link>
|
|
</nav>
|
|
</div>
|
|
|
|
<div className="lg:flex flex-1 justify-center sm:hidden">
|
|
<Searchbar />
|
|
</div>
|
|
|
|
<div className="flex flex-1 justify-end space-x-8">
|
|
<Toggle
|
|
checked={theme === 'dark'}
|
|
onChange={() =>
|
|
theme === 'dark' ? setTheme('light') : setTheme('dark')
|
|
}
|
|
/>
|
|
<UserNav />
|
|
</div>
|
|
</div>
|
|
|
|
<div className="sm:flex pb-4 lg:px-6 lg:hidden">
|
|
<Searchbar />
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default Navbar
|