summaryrefslogtreecommitdiff
path: root/src/core/components/elements/Navbar/NavbarDesktop.jsx
diff options
context:
space:
mode:
Diffstat (limited to 'src/core/components/elements/Navbar/NavbarDesktop.jsx')
-rw-r--r--src/core/components/elements/Navbar/NavbarDesktop.jsx99
1 files changed, 61 insertions, 38 deletions
diff --git a/src/core/components/elements/Navbar/NavbarDesktop.jsx b/src/core/components/elements/Navbar/NavbarDesktop.jsx
index fa3df5bf..2776c1f3 100644
--- a/src/core/components/elements/Navbar/NavbarDesktop.jsx
+++ b/src/core/components/elements/Navbar/NavbarDesktop.jsx
@@ -12,12 +12,9 @@ import {
MenuButton,
MenuItem,
MenuList,
- useDisclosure
+ useDisclosure,
} from '@chakra-ui/react';
-import {
- ChevronDownIcon,
- HeartIcon
-} from '@heroicons/react/24/outline';
+import { ChevronDownIcon, HeartIcon } from '@heroicons/react/24/outline';
import dynamic from 'next/dynamic';
import { default as Image, default as NextImage } from 'next/image';
import { useRouter } from 'next/router';
@@ -81,21 +78,17 @@ const NavbarDesktop = () => {
};
window.addEventListener('scroll', handleScroll);
+
return () => {
window.removeEventListener('scroll', handleScroll);
};
}, []);
useEffect(() => {
- const handleScroll = () => {
- setIsTop(window.scrollY < 100);
- };
-
- window.addEventListener('scroll', handleScroll);
- return () => {
- window.removeEventListener('scroll', handleScroll);
- };
- }, []);
+ if (auth) {
+ loadCart(auth.id);
+ }
+ }, [auth]);
useEffect(() => {
setPendingTransactions(data);
@@ -115,20 +108,22 @@ const NavbarDesktop = () => {
}, [product, router]);
useEffect(() => {
- const handleCartChange = () => {
- const cart = async () => {
- const listCart = await getCountCart();
- setCartCount(listCart);
- };
- cart();
- };
- handleCartChange();
-
- window.addEventListener('localStorageChange', handleCartChange);
-
- return () => {
- window.removeEventListener('localStorageChange', handleCartChange);
- };
+ // const handleCartChange = () => {
+ // const cart = async () => {
+ // const listCart = await getCountCart();
+ // setCartCount(listCart);
+ // };
+ // cart();
+ // };
+ // handleCartChange();
+
+ setCartCount(cart?.products?.length);
+
+ // window.addEventListener('localStorageChange', handleCartChange);
+
+ // return () => {
+ // window.removeEventListener('localStorageChange', handleCartChange);
+ // };
}, [transactions.data, cart]);
useEffect(() => {
@@ -177,7 +172,7 @@ const NavbarDesktop = () => {
<MenuItem as='a' href='/tentang-kami'>
Tentang Indoteknik
</MenuItem>
- <MenuItem as='a' href='/my/pembayaran-tempo'>
+ <MenuItem as='a' href='/pembayaran-tempo'>
Pembayaran Tempo
</MenuItem>
</MenuList>
@@ -197,12 +192,14 @@ const NavbarDesktop = () => {
<nav className='pt-6 sticky top-0 z-50 bg-white border-b-2 border-danger-500'>
<div className='container mx-auto flex gap-x-6'>
- <Link href='/'>
+ <Link href='/' aria-label='Indoteknik Logo'>
<Image
src={IndoteknikLogo}
alt='Indoteknik Logo'
width={210}
- height={210 / 3}
+ height={70}
+ loading='eager'
+ priority={true}
/>
</Link>
<div className='flex-1 flex items-center'>
@@ -220,6 +217,7 @@ const NavbarDesktop = () => {
target='_blank'
rel='noreferrer'
href='/my/wishlist'
+ aria-label='Wishlist'
className='flex items-center gap-x-2 !text-gray_r-12/80'
>
<HeartIcon className='w-7' />
@@ -227,6 +225,7 @@ const NavbarDesktop = () => {
</Link>
<a
href={whatsappUrl(templateWA, payloadWA, urlPath)}
+ aria-label='Whatsapp'
target='_blank'
rel='noreferrer'
className='flex items-center gap-x-1 !text-gray_r-12/80'
@@ -236,6 +235,7 @@ const NavbarDesktop = () => {
alt='Whatsapp'
width={48}
height={48}
+ loading='eager'
/>
<div>
<div className='font-semibold'>Whatsapp</div>
@@ -268,6 +268,7 @@ const NavbarDesktop = () => {
<div className='w-6/12 flex px-1 divide-x divide-gray_r-6'>
<Link
href='/shop/promo'
+ aria-label='Promo'
className={`${
router.asPath === '/shop/promo' && 'bg-gray_r-3'
} flex-1 flex justify-center items-center !text-gray_r-12/80 hover:bg-gray_r-3 idt-transition group relative`} // Added relative position
@@ -284,6 +285,7 @@ const NavbarDesktop = () => {
quality={100}
// className={`fixed ${isTop ? 'md:top-[145px] lg:top-[160px] ' : 'lg:top-[85px] top-[80px]'} rounded-3xl md:left-1/4 lg:left-1/4 xl:left-1/4 left-2/3 w-40 h-12 p-2 z-50 transition-all duration-300 animate-pulse`}
className={`inline-block relative -top-8 transition-all duration-300 z-20 animate-pulse`}
+ loading='eager'
/>
</div>
)}
@@ -301,6 +303,7 @@ const NavbarDesktop = () => {
<Link
href='/shop/brands'
+ aria-label='Brand'
className={`${
router.asPath === '/shop/brands' && 'bg-gray_r-3'
} p-4 flex-1 flex justify-center items-center !text-gray_r-12/80 hover:bg-gray_r-3 idt-transition group`}
@@ -313,6 +316,7 @@ const NavbarDesktop = () => {
</Link>
<Link
href='/shop/search?orderBy=stock'
+ aria-label='Ready Stock'
className={`${
router.asPath.includes('/shop/search?orderBy=stock') &&
'bg-gray_r-3'
@@ -326,6 +330,7 @@ const NavbarDesktop = () => {
</Link>
<Link
href='https://blog.indoteknik.com/'
+ aria-label='Blog Indoteknik'
className='p-4 flex-1 flex justify-center items-center !text-gray_r-12/80 hover:bg-gray_r-3 idt-transition group'
target='_blank'
rel='noreferrer noopener'
@@ -349,12 +354,14 @@ const NavbarDesktop = () => {
<>
<Link
href='/login'
+ aria-label='Login'
className='flex-1 flex justify-center items-center bg-danger-500 !text-gray_r-1 rounded-none rounded-t-xl'
>
Masuk
</Link>
<Link
href='/register'
+ aria-label='Register'
className='flex-1 flex justify-center items-center bg-danger-500 !text-gray_r-1 rounded-none rounded-t-xl'
>
Daftar
@@ -363,7 +370,11 @@ const NavbarDesktop = () => {
)}
{auth && (
<>
- <div href='/' className='navbar-user-dropdown-button'>
+ <div
+ href='/'
+ className='navbar-user-dropdown-button'
+ aria-label='User'
+ >
<span>Halo, {auth?.name}</span>
<div className='ml-auto'>
<ChevronDownIcon className='w-6' />
@@ -388,24 +399,28 @@ const SocialMedias = () => (
target='_blank'
rel='noreferrer'
href='https://www.youtube.com/@indoteknikcom'
+ aria-label='Youtube - Indoteknik.com'
>
<NextImage
src='/images/socials/youtube.webp'
- // alt='Youtube - Indoteknik.com'
+ alt='Ytube'
width={24}
height={24}
+ loading='eager'
/>
</a>
<a
target='_blank'
rel='noreferrer'
href='https://www.tiktok.com/@indoteknikcom'
+ aria-label='TikTok - Indoteknik.com'
>
<NextImage
src='/images/socials/tiktok.png'
- // alt='TikTok - Indoteknik.com'
+ alt='TikTok'
width={24}
height={24}
+ loading='eager'
/>
</a>
{/* <a target='_blank' rel='noreferrer' href={whatsappUrl(null)}>
@@ -420,48 +435,56 @@ const SocialMedias = () => (
target='_blank'
rel='noreferrer'
href='https://www.facebook.com/indoteknikcom'
+ aria-label='Facebook - Indoteknik.com'
>
<NextImage
src='/images/socials/Facebook.png'
- // alt='Facebook - Indoteknik.com'
+ alt='FB'
width={24}
height={24}
+ loading='eager'
/>
</a>
<a
target='_blank'
rel='noreferrer'
href='https://www.instagram.com/indoteknikcom/'
+ aria-label='Instagram - Indoteknik.com'
>
<NextImage
src='/images/socials/Instagram.png'
- // alt='Instagram - Indoteknik.com'
+ alt='IG'
width={24}
height={24}
+ loading='eager'
/>
</a>
<a
target='_blank'
rel='noreferrer'
href='https://www.linkedin.com/company/pt-indoteknik-dotcom-gemilang/'
+ aria-label='Linkedin - Indoteknik.com'
>
<NextImage
src='/images/socials/Linkedin.png'
- // alt='Linkedin - Indoteknik.com'
+ alt='Linkedin'
width={24}
height={24}
+ loading='eager'
/>
</a>
<a
target='_blank'
rel='noreferrer'
href='https://goo.gl/maps/GF8EmDjpQTHZPsJ1A'
+ aria-label='Maps - Indoteknik.com'
>
<NextImage
src='/images/socials/g_maps.png'
- // alt='Maps - Indoteknik.com'
+ alt='Maps'
width={24}
height={24}
+ loading='eager'
/>
</a>
</div>
generated by cgit v1.2.3 (git 2.25.1) at 2026-04-18 01:43:41 +0000