forked from crowetic/commerce
Dropdown NavBar
This commit is contained in:
parent
5bbe5d21b0
commit
df6c9070e5
@ -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>
|
||||||
|
@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -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>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
@ -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
|
||||||
|
Loading…
x
Reference in New Issue
Block a user