cx/commerce
4
0
Fork 0
forked from crowetic/commerce
Code Pull Requests Activity

Layout Changes

Browse Source
This commit is contained in:
Belen Curcio
2020-10-13 10:03:53 -03:00
parent 7efda91b11
commit 283455fc79
5 changed files with 64 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
components/core/Navbar/Navbar.tsx
View File

@@ -2,7 +2,7 @@ import s from './Navbar.module.css'
import { FC } from 'react'
import Link from 'next/link'
import { useTheme } from 'next-themes'
import { Logo, Container } from '@components/ui'
import { Logo } from '@components/ui'
import { Searchbar, Toggle, UserNav } from '@components/core'
interface Props {
className?: string
@@ -13,45 +13,43 @@ const Navbar: FC<Props> = ({ className }) => {
const { theme, setTheme } = useTheme()
return (
<div className={rootClassName}>
<Container>
<div className="flex justify-between align-center flex-row py-4 md:py-6 relative">
<div className="flex flex-1 items-center">
<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 hidden md:block">
<Link href="/">
<a className="cursor-pointer">
<Logo />
</a>
<a className={s.link}>All</a>
</Link>
<nav className="space-x-4 ml-6 hidden md: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="md:flex flex-1 justify-center hidden">
<Searchbar />
</div>
<div className="flex flex-initial md:flex-1 justify-end space-x-8">
<Toggle
checked={theme === 'dark'}
onChange={() =>
theme === 'dark' ? setTheme('light') : setTheme('dark')
}
/>
<UserNav />
</div>
<Link href="/">
<a className={s.link}>Clothes</a>
</Link>
<Link href="/">
<a className={s.link}>Accessories</a>
</Link>
</nav>
</div>
<div className="block flex pb-4 md:hidden px-4 md:px-6">
<div className="md:flex flex-1 justify-center hidden">
<Searchbar />
</div>
</Container>
<div className="flex flex-initial md:flex-1 justify-end space-x-8">
<Toggle
checked={theme === 'dark'}
onChange={() =>
theme === 'dark' ? setTheme('light') : setTheme('dark')
}
/>
<UserNav />
</div>
</div>
<div className="block flex pb-4 md:hidden px-4 md:px-6">
<Searchbar />
</div>
</div>
)
}