diff options
Diffstat (limited to 'src/core/components/elements/Navbar/NavbarMobile.jsx')
| -rw-r--r-- | src/core/components/elements/Navbar/NavbarMobile.jsx | 22 |
1 files changed, 21 insertions, 1 deletions
diff --git a/src/core/components/elements/Navbar/NavbarMobile.jsx b/src/core/components/elements/Navbar/NavbarMobile.jsx index 24ff3a51..0502dba5 100644 --- a/src/core/components/elements/Navbar/NavbarMobile.jsx +++ b/src/core/components/elements/Navbar/NavbarMobile.jsx @@ -5,12 +5,29 @@ import { Bars3Icon, HeartIcon, ShoppingCartIcon } from '@heroicons/react/24/outl import useSidebar from '@/core/hooks/useSidebar' import dynamic from 'next/dynamic' import IndoteknikLogo from '@/images/logo.png' +import { useEffect, useState } from 'react' +import { getCart } from '@/core/utils/cart' const Search = dynamic(() => import('./Search')) const NavbarMobile = () => { const { Sidebar, open } = useSidebar() + const [cartCount, setCartCount] = useState(0) + + useEffect(() => { + const handleCartChange = () => { + setCartCount(Object.keys(getCart()).length) + } + handleCartChange() + + window.addEventListener('localStorageChange', handleCartChange) + + return () => { + window.removeEventListener('localStorageChange', handleCartChange) + } + }, []) + return ( <MobileView> <nav className='px-4 py-2 pb-3 sticky top-0 z-50 bg-white shadow'> @@ -22,8 +39,11 @@ const NavbarMobile = () => { <Link href='/my/wishlist'> <HeartIcon className='w-6 text-gray_r-12' /> </Link> - <Link href='/shop/cart'> + <Link href='/shop/cart' className='relative'> <ShoppingCartIcon className='w-6 text-gray_r-12' /> + <span className='absolute -top-2 -right-2 badge-solid-red rounded-full w-5 h-5 flex items-center justify-center'> + {cartCount} + </span> </Link> <button type='button' onClick={open}> <Bars3Icon className='w-6 text-gray_r-12' /> |