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'
Source: nuflakbrr.hashnode.dev
chakra ui with humburger menu
const [display, changeDisplay] = useState('none')
Source: nuflakbrr.hashnode.dev
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>
Source: nuflakbrr.hashnode.dev
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 />
Source: nuflakbrr.hashnode.dev
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>