diff options
Diffstat (limited to 'src/core/components/elements/Navbar')
3 files changed, 88 insertions, 15 deletions
diff --git a/src/core/components/elements/Navbar/NavbarDesktop.jsx b/src/core/components/elements/Navbar/NavbarDesktop.jsx index d2f73d2d..f157297e 100644 --- a/src/core/components/elements/Navbar/NavbarDesktop.jsx +++ b/src/core/components/elements/Navbar/NavbarDesktop.jsx @@ -19,6 +19,15 @@ import DesktopView from '../../views/DesktopView'; import Link from '../Link/Link'; import NavbarUserDropdown from './NavbarUserDropdown'; import NextImage from 'next/image'; +import style from "./style/NavbarDesktop.module.css"; +import { + Button, + Menu, + MenuButton, + MenuItem, + MenuList, + useDisclosure, +} from '@chakra-ui/react'; const Search = dynamic(() => import('./Search'), { ssr: false }); const TopBanner = dynamic(() => import('./TopBanner'), { ssr: false }); @@ -36,6 +45,7 @@ const NavbarDesktop = () => { const router = useRouter(); const { product } = useProductContext(); + const { isOpen, onOpen, onClose } = useDisclosure(); useEffect(() => { if (router.pathname === '/shop/product/[slug]') { @@ -78,7 +88,31 @@ const NavbarDesktop = () => { </div> </div> <div className='flex gap-x-6'> - <Link href='/tentang-kami' className='!text-gray_r-12'> + <Menu isOpen={isOpen}> + <MenuButton + rightIcon={<ChevronDownIcon />} + onMouseEnter={onOpen} + onMouseLeave={onClose} + > + <div className='flex gap-x-1'> + <div>Fitur Layanan </div> + <ChevronDownIcon className='w-5'/> + </div> + </MenuButton> + <MenuList + zIndex={100} + onMouseEnter={onOpen} + onMouseLeave={onClose} + > + <MenuItem as='a' href='/tentang-kami'> + Tentang Indoteknik + </MenuItem> + <MenuItem as='a' href='/my/pembayaran-tempo'> + Pembayaran Tempo + </MenuItem> + </MenuList> + </Menu> + {/* <Link href='/tentang-kami' className='!text-gray_r-12'> Tentang Indoteknik.com </Link> <Link href='/my/pembayaran-tempo' className='!text-gray_r-12'> @@ -86,7 +120,7 @@ const NavbarDesktop = () => { </Link> <Link href='/' className='!text-gray_r-12'> Fitur Layanan - </Link> + </Link> */} </div> </div> </div> @@ -142,7 +176,7 @@ const NavbarDesktop = () => { /> <div> <div className='font-semibold'>Whatsapp</div> - 0812 8080 622 (Chat) + 0817 1718 1922 (Chat) </div> </a> </div> @@ -170,45 +204,65 @@ const NavbarDesktop = () => { </div> </button> <div className='w-6/12 flex px-1 divide-x divide-gray_r-6'> + <Link + href="/shop/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 + target="_blank" + rel="noreferrer" + > + <p className="absolute inset-0 flex justify-center items-center group-hover:scale-105 group-hover:text-red-500 transition-transform duration-200 z-10">Semua Promo</p> + <div className='w-full h-full flex justify-end items-start'> + <Image + src='/images/ICON PROMO DISKON.svg' + alt='promo' + width={100} + height={100} + quality={100} + className={`inline-block z-20`} + /> + </div> + </Link> + + <Link href='/shop/brands' - className={`${ + 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`} + } 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' > - Semua Brand + <p className="group-hover:scale-105 group-hover:text-red-500 transition-transform duration-200">Semua Brand</p> </Link> <Link href='/shop/search?orderBy=stock' className={`${ router.asPath === '/shop/search?orderBy=stock' && '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`} + } 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' > - Ready Stock + <p className="group-hover:scale-105 group-hover:text-red-500 transition-transform duration-200">Ready Stock</p> </Link> <Link href='https://blog.indoteknik.com/' - className='p-4 flex-1 flex justify-center items-center !text-gray_r-12/80 hover:bg-gray_r-3 idt-transition' + 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' > - Blog Indoteknik + <p className="group-hover:scale-105 group-hover:text-red-500 transition-transform duration-200">Blog Indoteknik</p> </Link> - <Link + {/* <Link href='/video' - className={`${ - router.asPath === '/video' && '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`} + className='p-4 flex-1 flex justify-center items-center !text-gray_r-12/80 hover:bg-gray_r-3 idt-transition' target='_blank' rel='noreferrer' > Indoteknik TV - </Link> + </Link> */} </div> <div className='w-3/12 flex gap-x-1 relative'> diff --git a/src/core/components/elements/Navbar/NavbarUserDropdown.jsx b/src/core/components/elements/Navbar/NavbarUserDropdown.jsx index 1851ce84..42bdc12a 100644 --- a/src/core/components/elements/Navbar/NavbarUserDropdown.jsx +++ b/src/core/components/elements/Navbar/NavbarUserDropdown.jsx @@ -2,9 +2,11 @@ import { deleteAuth } from '@/core/utils/auth' import Link from '../Link/Link' import { useRouter } from 'next/router' import { signOut, useSession } from 'next-auth/react' +import useAuth from '@/core/hooks/useAuth' const NavbarUserDropdown = () => { const router = useRouter() + const atuh = useAuth() const logout = async () => { deleteAuth().then(() => { @@ -21,6 +23,9 @@ const NavbarUserDropdown = () => { <Link href='/my/invoices'>Invoice & Faktur Pajak</Link> <Link href='/my/wishlist'>Wishlist</Link> <Link href='/my/address'>Daftar Alamat</Link> + {!atuh?.external && + <Link href='/my/recomendation'>Dashboard Recomendation</Link> + } <button type='button' onClick={logout}> Keluar Akun </button> diff --git a/src/core/components/elements/Navbar/style/NavbarDesktop.module.css b/src/core/components/elements/Navbar/style/NavbarDesktop.module.css new file mode 100644 index 00000000..9cddb127 --- /dev/null +++ b/src/core/components/elements/Navbar/style/NavbarDesktop.module.css @@ -0,0 +1,14 @@ +/* navbarDesktop.module.css */ +@keyframes blink { + 0%, 100% { + opacity: 1; + } + 50% { + opacity: 0; + } +} + +.blink { + animation: blink 0.8s infinite; +} + |