4
0
forked from crowetic/commerce

Dropdown NavBar

This commit is contained in:
Belen Curcio 2020-10-21 16:41:53 -03:00
parent 5bbe5d21b0
commit df6c9070e5
4 changed files with 81 additions and 56 deletions

View File

@ -3,14 +3,14 @@ import { FC } from 'react'
import Link from 'next/link' import Link from 'next/link'
import { useTheme } from 'next-themes' import { useTheme } from 'next-themes'
import { Logo } from '@components/ui' import { Logo } from '@components/ui'
import { Searchbar, Toggle, UserNav } from '@components/core' import { Searchbar, UserNav } from '@components/core'
interface Props { interface Props {
className?: string className?: string
} }
const Navbar: FC<Props> = ({ className }) => { const Navbar: FC<Props> = ({ className }) => {
const rootClassName = className const rootClassName = className
const { theme, setTheme } = useTheme()
return ( return (
<div className={rootClassName}> <div className={rootClassName}>
<div className="flex justify-between align-center flex-row py-4 md:py-6 relative"> <div className="flex justify-between align-center flex-row py-4 md:py-6 relative">
@ -38,12 +38,6 @@ const Navbar: FC<Props> = ({ className }) => {
</div> </div>
<div className="flex flex-1 justify-end space-x-8"> <div className="flex flex-1 justify-end space-x-8">
<Toggle
checked={theme === 'dark'}
onChange={() =>
theme === 'dark' ? setTheme('light') : setTheme('dark')
}
/>
<UserNav /> <UserNav />
</div> </div>
</div> </div>

View File

@ -2,12 +2,16 @@
@apply relative; @apply relative;
} }
.mainContainer {
}
.list { .list {
@apply flex flex-row items-center h-full; @apply flex flex-row items-center justify-items-end h-full;
} }
.item { .item {
@apply mr-6 cursor-pointer relative transition ease-in-out duration-100 text-base flex items-center; @apply mr-6 cursor-pointer relative transition ease-in-out duration-100 text-base flex items-center;
&:hover { &:hover {
@apply text-accents-8; @apply text-accents-8;
} }
@ -18,14 +22,26 @@
} }
.dropdownMenu { .dropdownMenu {
@apply absolute right-0 mt-2 w-screen max-w-xs sm:px-0 z-50 border border-accents-1 bg-primary; @apply bg-primary fixed right-0 z-50 w-full h-full;
max-width: 160px;
&.dropdownMenuContainer { @screen lg {
@apply shadow-lg overflow-hidden relative grid py-2; @apply absolute mt-3 right-0 w-screen;
max-width: 160px;
}
& .dropdownMenuContainer {
@apply flex-col py-6 bg-primary h-full justify-around h-auto;
@screen lg {
@apply border border-accents-1 shadow-lg py-2;
}
} }
& .link { & .link {
@apply px-6 py-3 block space-y-1 hover:bg-accents-1 transition ease-in-out duration-150 text-base leading-6 font-medium text-gray-900; @apply cursor-pointer px-6 py-3 block space-y-1 hover:bg-accents-1 transition ease-in-out duration-150 text-base leading-6 font-medium text-gray-900;
}
&.off {
@apply hidden;
} }
} }

View File

@ -6,6 +6,10 @@ import { Heart, Bag } from '@components/icon'
import { useUI } from '@components/ui/context' import { useUI } from '@components/ui/context'
import s from './UserNav.module.css' import s from './UserNav.module.css'
import Link from 'next/link' import Link from 'next/link'
import { Logo } from '@components/ui'
import { Toggle } from '@components/core'
import { useTheme } from 'next-themes'
interface Props { interface Props {
className?: string className?: string
} }
@ -17,54 +21,65 @@ const countItems = (count: number, items: any[]) =>
const UserNav: FC<Props> = ({ className }) => { const UserNav: FC<Props> = ({ className }) => {
const { data } = useCart() const { data } = useCart()
const [displayDropdown, setDisplayDropdown] = useState(false) const [displayDropdown, setDisplayDropdown] = useState(true)
const { openSidebar, closeSidebar, displaySidebar } = useUI() const { openSidebar, closeSidebar, displaySidebar } = useUI()
const itemsCount = Object.values(data?.line_items ?? {}).reduce(countItems, 0) const itemsCount = Object.values(data?.line_items ?? {}).reduce(countItems, 0)
const { theme, setTheme } = useTheme()
return ( return (
<nav className={cn(s.root, className)}> <nav className={cn(s.root, className)}>
<ul className={s.list}> <div className={s.mainContainer}>
<li <ul className={s.list}>
className={s.item} <li
onClick={() => (displaySidebar ? closeSidebar() : openSidebar())} className={s.item}
> onClick={() => (displaySidebar ? closeSidebar() : openSidebar())}
<Bag /> >
{itemsCount > 0 && ( <Bag />
<span className="border border-accent-1 bg-secondary text-secondary h-4 w-4 absolute rounded-full right-3 top-3 flex items-center justify-center font-bold text-xs"> {itemsCount > 0 && (
{itemsCount} <span className="border border-accent-1 bg-secondary text-secondary h-4 w-4 absolute rounded-full right-3 top-3 flex items-center justify-center font-bold text-xs">
</span> {itemsCount}
)} </span>
</li> )}
<Link href="/wishlist">
<li className={s.item}>
<Heart />
</li> </li>
</Link> <Link href="/wishlist">
<li <li className={s.item}>
className={s.item} <Heart />
onClick={() => { </li>
setDisplayDropdown((i) => !i) </Link>
}} <li
> className={s.item}
<Avatar /> onClick={() => {
</li> setDisplayDropdown((i) => !i)
</ul> }}
>
<Avatar />
</li>
</ul>
</div>
{displayDropdown && ( <div className={cn(s.dropdownMenu, { [s.off]: displayDropdown })}>
<div className={s.dropdownMenu}> <nav className={s.dropdownMenuContainer}>
<nav className={s.dropdownMenuContainer}> <Link href="#">
<Link href="#"> <a className={s.link}>My Purchases</a>
<a className={s.link}>My Purchases</a> </Link>
</Link> <Link href="#">
<Link href="#"> <a className={s.link}>My Account</a>
<a className={s.link}>My Account</a> </Link>
</Link> <a
<Link href="#"> className={s.link}
<a className={cn(s.link, 'mt-4')}>Logout</a> onClick={() =>
</Link> theme === 'dark' ? setTheme('light') : setTheme('dark')
</nav> }
</div> >
)} Theme: <strong>{theme}</strong>
</a>
<Link href="#">
<a className={cn(s.link, 'border-t border-accents-2 mt-4')}>
Logout
</a>
</Link>
</nav>
</div>
</nav> </nav>
) )
} }

View File

@ -8,7 +8,7 @@ interface Props {
} }
const Container: FC<Props> = ({ children, className, el = 'div' }) => { const Container: FC<Props> = ({ children, className, el = 'div' }) => {
const rootClassName = cn('mx-auto max-w-7xl px-3 md:px-6', className) const rootClassName = cn('mx-auto max-w-7xl px-6', className)
let Component: React.ComponentType<React.HTMLAttributes< let Component: React.ComponentType<React.HTMLAttributes<
HTMLDivElement HTMLDivElement