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'const [display, changeDisplay] = useState('none')<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><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
/><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>