diff options
Diffstat (limited to 'src/core/components/elements/Navbar')
| -rw-r--r-- | src/core/components/elements/Navbar/NavbarDesktop.jsx | 82 | ||||
| -rw-r--r-- | src/core/components/elements/Navbar/style/NavbarDesktop.module.css | 14 |
2 files changed, 82 insertions, 14 deletions
diff --git a/src/core/components/elements/Navbar/NavbarDesktop.jsx b/src/core/components/elements/Navbar/NavbarDesktop.jsx index 308f2623..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> @@ -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/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; +} + |