/TypeScript/Chakra ui menu open on hover

Chakra ui menu open on hover

import { useDisclosure, Menu, MenuButton, MenuList, MenuItem } from '@chakra-ui/react'
export default function Navbar(){
  return (
             <Menu isOpen={isOpen}>
                <MenuButton onMouseEnter={onOpen} onMouseLeave={onClose}>
                  <span className="mr-1">
                    CAREER
                  </span>
                </MenuButton>

                <MenuList className="drop" onMouseEnter={onOpen} onMouseLeave={onClose}>
                  <MenuItem className="menu_item hover:opacity-60 hover:text-black ">
                    <Link href="/join-our-team">
                      <a className={` ${pathname == '/join-our-team' ? 'opacity-60 text-white scale-110 ml-1' : ''}`}>JOIN OUR TEAM</a>
                    </Link>
                  </MenuItem>
                  <MenuItem className="menu_item hover:opacity-60 hover:text-black ">
                    <Link href="/life-at-sirocco">
                      <a className={`z-[1000]  ${pathname == '/life-at-sirocco' ? 'opacity-60 text-white scale-110 ml-1' : ''}`}>LIFE AT SIROCCO</a>
                    </Link>
                  </MenuItem>
                </MenuList>
              </Menu>
  )
  
}

Source: coffeeclass.io

Similar codes

0 vote290 views1 answer
Graphql mutation is not displaying array of objects in express-graphql
TypeScript
6 votes300 views4 answers
Js find element in array by property
TypeScript
0 vote309 views1 answer
How to append different lists in installed apps django
TypeScript
1 vote312 views1 answer
Js type-check undefined or string
TypeScript
0 vote316 views1 answer
Python check if property exists in dictionary
TypeScript
1 vote299 views1 answer
Typescript dynamic key value object
TypeScript
5 votes288 views5 answers
Combine two lists c#
TypeScript
6 votes303 views2 answers
Experimental support for decorators is a feature that is subject to change in a future release. Set the 'experimentalDecorators' option in your 'tsconfig' or 'jsconfig' to remove this warning
TypeScript
0 vote330 views1 answer
Typescript string concatenation best practice
TypeScript
0 vote256 views1 answer
Which document is created by system analyst after the requirements are collected from various stakeholders?
TypeScript