From 5c66bf0e42f5b414d701abe93fb634321f94aff8 Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Wed, 12 Apr 2023 09:30:45 +0700
Subject: cart icon count

---
 .../components/elements/Navbar/NavbarMobile.jsx    | 22 +++++++++++++++++++++-
 1 file changed, 21 insertions(+), 1 deletion(-)

(limited to 'src/core/components/elements/Navbar/NavbarMobile.jsx')

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' />
-- 
cgit v1.2.3