1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
|
import useSidebar from '@/core/hooks/useSidebar';
import { getCountCart } from '@/core/utils/cart';
import IndoteknikLogo from '@/images/logo.png';
import {
Bars3Icon,
HeartIcon,
ShoppingCartIcon,
} from '@heroicons/react/24/outline';
import dynamic from 'next/dynamic';
import Image from 'next/image';
import { useEffect, useState } from 'react';
import MobileView from '../../views/MobileView';
import Link from '../Link/Link';
import TopBannerMobile from './TopBannerMobile';
import { useCartStore } from '~/modules/cart/stores/useCartStore';
import useAuth from '@/core/hooks/useAuth';
const Search = dynamic(() => import('./Search'));
const NavbarMobile = () => {
const { Sidebar, open } = useSidebar();
const auth = useAuth();
const [cartCount, setCartCount] = useState(0);
const { loadCart, cart, summary, updateCartItem } = useCartStore();
// useEffect(() => {
// const handleCartChange = () => {
// const cart = async () => {
// const listCart = await getCountCart();
// setCartCount(listCart);
// };
// cart();
// };
// handleCartChange();
// window.addEventListener('localStorageChange', handleCartChange);
// return () => {
// window.removeEventListener('localStorageChange', handleCartChange);
// };
// }, []);
useEffect(() => {
if(auth){
loadCart(auth?.id);
}
}, [auth]);
useEffect(() => {
setCartCount(cart?.products?.length);
}, [cart]);
return (
<MobileView>
<TopBannerMobile />
<nav className='px-4 py-2 pb-3 sticky top-0 z-50 bg-white shadow'>
<div className='flex justify-between items-center mb-2'>
<Link href='/'>
<Image
src={IndoteknikLogo}
alt='Indoteknik Logo'
width={120}
height={40}
loading='eager'
/>
</Link>
<div className='flex gap-x-3'>
<Link href='/my/wishlist' aria-label='Wishlist'>
<HeartIcon className='w-6 text-gray_r-12' />
</Link>
<Link href='/shop/cart' className='relative' aria-label='Cart'>
<ShoppingCartIcon className='w-6 text-gray_r-12' />
{cartCount > 0 && (
<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' aria-label='sidebarMenuButton' onClick={open}>
<Bars3Icon className='w-6 text-gray_r-12' />
</button>
</div>
</div>
<Search />
</nav>
{Sidebar}
</MobileView>
);
};
export default NavbarMobile;
|
