JAVASCRIPT

chakra ui menu

<Menu>
							<MenuButton>
								<Icon as={AiOutlineMore} h='7' w='7' />
							</MenuButton>
							<MenuList padding='0'>
								<MenuItem>Edit</MenuItem>
								<MenuItem
									onClick={() => {
										deleteHeaderFieldMutation.mutate(row.value.id);
									}}
								>
									Delete
								</MenuItem>
							</MenuList>
						</Menu>

chakra ui with humburger menu

import React, { useState } from 'react'
import { useColorMode, Switch, Flex, Button, IconButton } from '@chakra-ui/react'
import { HamburgerIcon, CloseIcon } from '@chakra-ui/icons'
import Link from 'next/link'

chakra ui with humburger menu

<Flex>
<Flex position="fixed" top="1rem" right="1rem" align="center">
  {/* Desktop */}
  <Flex>
    <Link href="/" passHref>
      <Button as="a" variant="ghost" aria-label="Home" my={5} w="100%">
        Home
      </Button>
    </Link>

    <Link href="/about" passHref>
      <Button as="a" variant="ghost" aria-label="About" my={5} w="100%">
        About
      </Button>
    </Link>

    <Link href="/contact" passHref>
      <Button as="a" variant="ghost" aria-label="Contact" my={5} w="100%">
        Contact
      </Button>
    </Link>
  </Flex>

  {/* Mobile */}
  <IconButton
    aria-label="Open Menu"
    size="lg"
    mr={2}
    icon={<HamburgerIcon />}
    onClick={}
  />
  <Switch color="green" isChecked={isDark} onChange={toggleColorMode} />
</Flex>
{/* Mobile Content */}
<Flex
  bgColor="gray.50"
  overflowY="auto"
  flexDir="column"
>
  <Flex justify="flex-end">
    <IconButton
      mt={2}
      mr={2}
      aria-label="Open Menu"
      size="lg"
      icon={<CloseIcon />}
      onClick={}
    />
  </Flex>

  <Flex flexDir="column" align="center">
    <Link href="/" passHref>
      <Button as="a" variant="ghost" aria-label="Home" my={5} w="100%">
        Home
      </Button>
    </Link>

    <Link href="/about" passHref>
      <Button as="a" variant="ghost" aria-label="About" my={5} w="100%">
        About
      </Button>
    </Link>

    <Link href="/contact" passHref>
      <Button as="a" variant="ghost" aria-label="Contact" my={5} w="100%">
        Contact
      </Button>
    </Link>
  </Flex>
</Flex>

chakra ui with humburger menu

const [display, changeDisplay] = useState('none')

chakra ui with humburger menu

<IconButton
    aria-label="Open Menu"
    size="lg"
    mr={2}
    icon={
    <HamburgerIcon />
    }
    onClick={() => changeDisplay('flex')} // added line
/>

<Flex
  display={display} // added line
  bgColor="gray.50"
  overflowY="auto"
  flexDir="column"
>

<IconButton
    mt={2}
    mr={2}
    aria-label="Open Menu"
    size="lg"
    icon={
        <CloseIcon />
    }
    onClick={() => changeDisplay('none')} // added line
/>