diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/core/components/elements/Navbar/NavbarDesktop.jsx | 37 |
1 files changed, 30 insertions, 7 deletions
diff --git a/src/core/components/elements/Navbar/NavbarDesktop.jsx b/src/core/components/elements/Navbar/NavbarDesktop.jsx index a931b6de..f157297e 100644 --- a/src/core/components/elements/Navbar/NavbarDesktop.jsx +++ b/src/core/components/elements/Navbar/NavbarDesktop.jsx @@ -20,7 +20,14 @@ 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 } from '@chakra-ui/react'; +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 }); @@ -38,6 +45,7 @@ const NavbarDesktop = () => { const router = useRouter(); const { product } = useProductContext(); + const { isOpen, onOpen, onClose } = useDisclosure(); useEffect(() => { if (router.pathname === '/shop/product/[slug]') { @@ -80,13 +88,28 @@ const NavbarDesktop = () => { </div> </div> <div className='flex gap-x-6'> - <Menu> - <MenuButton rightIcon={<ChevronDownIcon />}> - Fitur Layanan + <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}> - <MenuItem as='a' href='/tentang-kami'>Tentang Indoteknik</MenuItem> - <MenuItem as='a' href='/my/pembayaran-tempo'>Pembayaran Tempo</MenuItem> + <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'> |
