@chakra-ui/react#MenuItem JavaScript Examples
The following examples show how to use
@chakra-ui/react#MenuItem.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: NavPreviousYears.js From codeursenseine.com with MIT License | 6 votes |
|
NavPreviousYears = (props) => {
return (
<Box textAlign="center" {...props}>
<Menu>
<MenuButton
as={Button}
size="xs"
variant="unstyled"
d="inline-flex"
alignItems="center"
leftIcon={<IconRewind />}
>
Sites des éditions précédentes
</MenuButton>
<MenuList color="gray.800" minWidth="7rem">
{years.map((year) => (
<MenuItem
key={year}
as="a"
href={`https://www.codeursenseine.com/${year}/`}
>
<IconRewind />
<Text as="span" fontWeight="bold" ml="2">
{year}
</Text>
</MenuItem>
))}
</MenuList>
</Menu>
</Box>
);
}
Example #2
| Source File: ProfileMenu.js From react-sample-projects with MIT License | 6 votes |
|
ProfileMenu = () => {
return (
<Menu>
<MenuButton
as={Button}
rounded={'full'}
variant={'link'}
cursor={'pointer'}
aria-label="Profile"
>
<Avatar
size={'sm'}
src={
'https://images.unsplash.com/photo-1493666438817-866a91353ca9?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&fit=crop&h=200&w=200&s=b616b2c5b373a80ffc9636ba24f7a4a9'
}
alt="user"
/>
</MenuButton>
<MenuList>
<MenuItem>Link 1</MenuItem>
<MenuItem>Link 2</MenuItem>
<MenuDivider />
<MenuItem>Link 3</MenuItem>
</MenuList>
</Menu>
);
}
Example #3
| Source File: components.js From idena-web with MIT License | 6 votes |
|
export function FlipCardMenuItem(props) {
return (
<Box
as={MenuItem}
fontWeight={500}
px={3}
py={1.5}
_hover={{bg: 'gray.50'}}
_focus={{bg: 'gray.50'}}
_selected={{bg: 'gray.50'}}
_active={{bg: 'gray.50'}}
{...props}
/>
)
}
Example #4
| Source File: CartMenu.js From react-sample-projects with MIT License | 5 votes |
|
CartMenu = () => {
const cartItems = useSelector(state => state.cart.cartItems) || [];
const totalItems = cartItems.reduce((sum, item) => sum + item.quantity, 0);
return (
<Menu>
<VStack position="relative">
{cartItems.length > 0 && (
<Box
position="absolute"
borderRadius="50%"
right={-1}
top={-1}
p={1}
zIndex={1}
bg="red"
color="white"
fontSize="10"
>
{totalItems}
</Box>
)}
<MenuButton
as={IconButton}
variant="ghost"
size="md"
fontSize="lg"
icon={<MdShoppingCart />}
></MenuButton>
</VStack>
<MenuList p={2}>
{cartItems.map(item => (
<Link key={item.id} to={`/product/${item.id}`}>
<MenuItem>
<HStack>
<Image
boxSize="2rem"
borderRadius="full"
src={item.image}
alt={item.title}
mr="12px"
/>
<span>{item.title}</span>
</HStack>
</MenuItem>
</Link>
))}
{cartItems.length > 0 && (
<MenuItem>
<Box my={2} width="100%">
<Link to="/cart">
<Button isFullWidth colorScheme="teal">
Go To Cart
</Button>
</Link>
</Box>
</MenuItem>
)}
{cartItems.length === 0 && (
<Box my={2} width="100%">
<Text fontSize="xl">Your cart is empty :(</Text>
</Box>
)}
</MenuList>
</Menu>
);
}
Example #5
| Source File: containers.js From idena-web with MIT License | 5 votes |
|
export function AdBanner() {
const {t} = useTranslation()
const router = useRouter()
const activeAd = useCurrentBannerAd()
return (
<Flex
align="center"
justify="space-between"
borderBottomWidth={1}
borderBottomColor="gray.100"
p="2"
pr="4"
h="14"
>
<AdBannerContent ad={activeAd} />
<HStack spacing="10">
<AdBannerAuthor ad={activeAd} display={['none', 'flex']} />
<Menu zIndex="popover">
{false && (
<MenuItem
icon={<AdsIcon boxSize={5} color="blue.500" />}
onClick={() => {
router.push(`/adn/list`)
}}
>
{t('My Ads')}
</MenuItem>
)}
<NextLink href="/adn/offers">
<MenuItem icon={<PicIcon boxSize={5} color="blue.500" />}>
{t('View all offers')}
</MenuItem>
</NextLink>
</Menu>
</HStack>
</Flex>
)
}
Example #6
| Source File: containers.js From idena-web with MIT License | 4 votes |
|
export function AdListItem({
ad,
onReview,
onPublish,
onBurn,
onRemove,
onPreview,
}) {
const {id, cid, title, language, age, os, stake, status, contract} = ad
const {t, i18n} = useTranslation()
const formatDna = useFormatDna()
const competingAds = useCompetingAds(
cid,
new AdTarget({language, age, os, stake})
)
const competitorCount = competingAds?.length
const maxCompetitor = competingAds?.sort((a, b) => b.amount - a.amount)[0]
const {data: burntCoins} = useBurntCoins()
const orderedBurntCoins =
burntCoins
?.sort((a, b) => b.amount - a.amount)
.map(burn => ({...burn, ...AdBurnKey.fromHex(burn?.key)})) ?? []
const burnIndex = orderedBurntCoins.findIndex(burn => burn.cid === cid)
const burnAmount = orderedBurntCoins[burnIndex]
const rotationStatus =
burnIndex > -1 ? AdRotationStatus.Showing : AdRotationStatus.NotShowing
const eitherStatus = (...statuses) => statuses.includes(status)
return (
<HStack key={id} spacing="5" align="flex-start">
<Stack spacing="2" w="60px" flexShrink={0}>
<Box position="relative">
<AdImage src={adImageThumbSrc(ad)} />
{status === AdStatus.Published && (
<AdOverlayStatus status={rotationStatus} />
)}
</Box>
{status === AdStatus.Published && (
<AdStatusText status={rotationStatus} />
)}
</Stack>
<Stack spacing="5" w="full">
<Flex justify="space-between">
<Stack spacing="1">
{eitherStatus(
AdStatus.Reviewing,
AdStatus.Approved,
AdStatus.Published
) ? (
<Text
color="gray.500"
fontSize="mdx"
fontWeight={500}
lineHeight="shorter"
>
{title}
</Text>
) : (
<TextLink
href={`/adn/edit?id=${id}`}
color="gray.500"
fontSize="mdx"
fontWeight={500}
lineHeight="shorter"
_hover={{color: 'muted'}}
>
{title}
</TextLink>
)}
<Text color="muted">{ad.desc}</Text>
</Stack>
<Stack isInline align="center">
<Box>
<Menu>
<MenuItem
icon={<ViewIcon boxSize={5} color="blue.500" />}
onClick={onPreview}
>
{t('Preview')}
</MenuItem>
{eitherStatus(AdStatus.Draft, AdStatus.Rejected) && (
<NextLink href={`/adn/edit?id=${id}`} passHref>
<MenuItem icon={<EditIcon boxSize={5} color="blue.500" />}>
{t('Edit')}
</MenuItem>
</NextLink>
)}
<MenuDivider />
<MenuItem
icon={<DeleteIcon boxSize={5} />}
color="red.500"
onClick={() => {
// eslint-disable-next-line no-unused-expressions
onRemove?.(ad)
}}
>
{t('Delete')}
</MenuItem>
</Menu>
</Box>
{status === AdStatus.Published && (
<SecondaryButton onClick={onBurn}>{t('Burn')}</SecondaryButton>
)}
{status === AdStatus.Approved && (
<SecondaryButton onClick={onPublish}>
{t('Create campaign')}
</SecondaryButton>
)}
{status === AdStatus.Draft && (
<SecondaryButton onClick={onReview}>
{t('Review')}
</SecondaryButton>
)}
{eitherStatus(AdStatus.Reviewing, AdStatus.Rejected) && (
<NextLink href={viewVotingHref(contract)}>
<SecondaryButton>{t('View voting')}</SecondaryButton>
</NextLink>
)}
</Stack>
</Flex>
<HStack
align="flex-start"
spacing={4}
bg="gray.50"
px="4"
py="3"
mt="5"
rounded="md"
>
<HStack flex={1} alignSelf="center">
<InlineAdStatGroup spacing="1.5" labelWidth="16" flex={1}>
<InlineAdStat label={t('Language')} value={language} />
<InlineAdStat label={t('Min stake')} value={stake} />
</InlineAdStatGroup>
<InlineAdStatGroup spacing="1.5" labelWidth="14" flex={1}>
<InlineAdStat label={t('Min age')} value={age} />
<InlineAdStat label={t('OS')} value={os} />
</InlineAdStatGroup>
</HStack>
<VDivider minH={68} h="full" />
<Stack flex={1} justify="center">
{status === AdStatus.Published && (
<InlineAdStatGroup spacing="2" labelWidth="28" flex={1}>
<SmallInlineAdStat
label={t('Burnt, {{time}}', {
time: new Intl.RelativeTimeFormat(i18n.language, {
style: 'short',
}).format(24, 'hour'),
})}
value={burnAmount ? formatDna(burnAmount.amount) : '--'}
flex={0}
/>
<SmallInlineAdStat
label="Competitors"
value={String(competitorCount)}
flex={0}
/>
<SmallInlineAdStat
label="Max bid"
value={maxCompetitor ? formatDna(maxCompetitor.amount) : '--'}
/>
</InlineAdStatGroup>
)}
</Stack>
</HStack>
</Stack>
</HStack>
)
}
Example #7
| Source File: sidebar.js From idena-web with MIT License | 4 votes |
|
function ActionPanel({onClose}) {
const {t} = useTranslation()
const router = useRouter()
const epoch = useEpoch()
const [identity] = useIdentity()
const onboardingPopoverPlacement = useBreakpointValue(['top', 'right'])
const [
currentOnboarding,
{showCurrentTask, dismissCurrentTask},
] = useOnboarding()
useEffect(() => {
if (
eitherState(
currentOnboarding,
onboardingShowingStep(OnboardingStep.StartTraining),
onboardingShowingStep(OnboardingStep.ActivateInvite)
)
)
onClose()
}, [currentOnboarding, onClose])
if (!epoch) {
return (
<Stack spacing={[2, '1px']} mt={6}>
<Block
title={t('My current task')}
roundedTop="md"
roundedBottom={['md', 'none']}
>
<Skeleton
h={[4, '13px']}
mt={[1, '3.5px']}
mb={[1, '3px']}
borderRadius="sm"
startColor="#72767A"
endColor="#6A6E72"
/>
</Block>
<Block
title={t('Next validation')}
roundedBottom="md"
roundedTop={['md', 'none']}
>
<Skeleton
h={[4, '13px']}
mt={[1, '3.5px']}
mb={[1, '3px']}
borderRadius="sm"
startColor="#72767A"
endColor="#6A6E72"
/>
</Block>
</Stack>
)
}
const eitherOnboardingState = (...states) =>
eitherState(currentOnboarding, ...states)
const {currentPeriod, nextValidation} = epoch
const isPromotingNextOnboardingStep =
currentPeriod === EpochPeriod.None &&
(eitherOnboardingState(
onboardingPromotingStep(OnboardingStep.StartTraining),
onboardingPromotingStep(OnboardingStep.ActivateInvite),
onboardingPromotingStep(OnboardingStep.ActivateMining)
) ||
(eitherOnboardingState(
onboardingPromotingStep(OnboardingStep.Validate)
) &&
[IdentityStatus.Candidate, IdentityStatus.Newbie].includes(
identity.state
)) ||
(eitherOnboardingState(
onboardingPromotingStep(OnboardingStep.CreateFlips)
) &&
[IdentityStatus.Newbie].includes(identity.state)))
return (
<Stack spacing={[2, '1px']} mt={6}>
{currentPeriod !== EpochPeriod.None && (
<Block
title={t('Current period')}
roundedTop="md"
roundedBottom={['md', 'none']}
>
{currentPeriod}
</Block>
)}
<ChakraBox
cursor={isPromotingNextOnboardingStep ? 'pointer' : 'default'}
onClick={() => {
if (
eitherOnboardingState(
OnboardingStep.StartTraining,
OnboardingStep.ActivateInvite,
OnboardingStep.ActivateMining
)
)
router.push('/home')
if (eitherOnboardingState(OnboardingStep.CreateFlips))
router.push('/flips/list')
showCurrentTask()
}}
>
<PulseFrame
isActive={isPromotingNextOnboardingStep}
roundedTop={[
'md',
currentPeriod === EpochPeriod.None ? 'md' : 'none',
]}
roundedBottom={[
'md',
currentPeriod !== EpochPeriod.None ? 'md' : 'none',
]}
>
<Block
title={t('My current task')}
roundedTop={[
'md',
currentPeriod === EpochPeriod.None ? 'md' : 'none',
]}
roundedBottom={[
'md',
currentPeriod !== EpochPeriod.None ? 'md' : 'none',
]}
>
<CurrentTask
epoch={epoch.epoch}
period={currentPeriod}
identity={identity}
/>
</Block>
</PulseFrame>
</ChakraBox>
{currentPeriod === EpochPeriod.None && (
<OnboardingPopover
isOpen={eitherOnboardingState(
onboardingShowingStep(OnboardingStep.Validate)
)}
placement={onboardingPopoverPlacement}
>
<PopoverTrigger>
<ChakraBox
bg={
eitherOnboardingState(
onboardingShowingStep(OnboardingStep.Validate)
)
? 'rgba(216, 216, 216, .1)'
: 'transparent'
}
position="relative"
zIndex="docked"
>
<Block
title={t('Next validation')}
roundedBottom="md"
roundedTop={['md', 'none']}
>
{formatValidationDate(nextValidation)}
<Menu autoSelect={false} mr={1}>
<MenuButton
rounded="md"
_hover={{bg: 'unset'}}
_expanded={{bg: 'brandGray.500'}}
_focus={{outline: 0}}
position="absolute"
top={1}
right={1}
py={1.5}
px={1 / 2}
>
<MoreIcon boxSize={5} />
</MenuButton>
<MenuList
placement="bottom-end"
border="none"
shadow="0 4px 6px 0 rgba(83, 86, 92, 0.24), 0 0 2px 0 rgba(83, 86, 92, 0.2)"
rounded="lg"
py={2}
minWidth="145px"
>
<MenuItem
color="brandGray.500"
fontWeight={500}
px={3}
py={2}
_hover={{bg: 'gray.50'}}
_focus={{bg: 'gray.50'}}
_selected={{bg: 'gray.50'}}
_active={{bg: 'gray.50'}}
onClick={() => {
openExternalUrl(
buildNextValidationCalendarLink(nextValidation)
)
}}
>
<PlusSquareIcon
boxSize={5}
mr={3}
color="brandBlue.500"
/>
Add to calendar
</MenuItem>
</MenuList>
</Menu>
</Block>
</ChakraBox>
</PopoverTrigger>
<Portal>
<OnboardingPopoverContent
display={
eitherOnboardingState(
onboardingShowingStep(OnboardingStep.Validate)
)
? 'flex'
: 'none'
}
title={t('Schedule your next validation')}
maxW="sm"
additionFooterActions={
<Button
variant="unstyled"
onClick={() => {
openExternalUrl(
'https://medium.com/idena/how-do-i-start-using-idena-c49418e01a06'
)
}}
>
{t('Read more')}
</Button>
}
onDismiss={dismissCurrentTask}
>
<Stack spacing={5}>
<OnboardingPopoverContentIconRow
icon={<TelegramIcon boxSize={6} />}
>
<Trans i18nKey="onboardingValidateSubscribe" t={t}>
<OnboardingLinkButton href="https://t.me/IdenaAnnouncements">
Subscribe
</OnboardingLinkButton>{' '}
to the Idena Announcements (important updates only)
</Trans>
</OnboardingPopoverContentIconRow>
<OnboardingPopoverContentIconRow
icon={<SyncIcon boxSize={5} />}
>
{t(
`Sign in into your account 15 mins before the validation starts.`
)}
</OnboardingPopoverContentIconRow>
<OnboardingPopoverContentIconRow
icon={<TimerIcon boxSize={5} />}
>
{t(
`Solve the flips quickly when validation starts. The first 6 flips must be submitted in less than 2 minutes.`
)}
</OnboardingPopoverContentIconRow>
<OnboardingPopoverContentIconRow
icon={<GalleryIcon boxSize={5} />}
>
<Trans i18nKey="onboardingValidateTest" t={t}>
<OnboardingLinkButton
onClick={() => {
dismissCurrentTask()
router.push('/try')
}}
>
Test yourself
</OnboardingLinkButton>{' '}
before the validation
</Trans>
</OnboardingPopoverContentIconRow>
</Stack>
</OnboardingPopoverContent>
</Portal>
</OnboardingPopover>
)}
</Stack>
)
}
Example #8
| Source File: Episode.js From grandcast.fm with Apache License 2.0 | 4 votes |
|
Episode = ({ episode, playlists }) => {
const [addEpisode] = useMutation(ADD_EPISODE_TO_PLAYLIST)
const isEpisodeInPlaylist = (playlistName) => {
const playlist = playlists.filter((i) => {
return playlistName === i.name
})
const episodes = playlist[0].episodes?.map((v) => {
return v.id
})
return episodes?.includes(episode.id)
}
return (
<Flex
border="1px"
rounded="lg"
style={{ maxWidth: '700px', width: '100%' }}
>
<Box w="150px">
<Image boxSize="150px" src={episode.podcast.image} m={2} />
<Menu m={2} w="150px">
<MenuButton m={2} w="150px" as={Button}>
<AddIcon />
</MenuButton>
<MenuList>
{playlists?.map((v) => {
return (
<MenuItem
icon={isEpisodeInPlaylist(v.name) ? <CheckIcon /> : null}
key={v.name}
onClick={() =>
addEpisode({
variables: {
episodeId: episode.id,
playlistName: v.name,
},
})
}
>
{v.name}
</MenuItem>
)
})}
</MenuList>
</Menu>
</Box>
<Flex direction="column" ml={4} w="100%">
<div>
<Accordion allowToggle>
<AccordionItem>
<h2>
<AccordionButton>
<Box flex="1" textAlign="left">
<Heading size="sm">{episode.title}</Heading>
</Box>
<AccordionIcon />
</AccordionButton>
</h2>
<AccordionPanel pb={4} m={4}>
<div dangerouslySetInnerHTML={{ __html: episode.summary }} />
</AccordionPanel>
</AccordionItem>
</Accordion>
</div>
<Flex direction="column">
<Text ml={4} fontSize="lg" isTruncated>
{episode.podcast.title}
</Text>
<Text ml={4} as="i">
{`${moment(episode.pubDate).format('MMMM Do YYYY')}`}
</Text>
</Flex>
<div style={{ marginTop: 'auto' }}>
<audio style={{ width: '100%' }} controls>
<source src={episode.audio} type="audio/mpeg"></source>
</audio>
</div>
</Flex>
{/* <div>{episode.audio}</div>
<div>{episode.id}</div>
<div>{episode.podcast.image}</div> */}
</Flex>
)
}
Example #9
| Source File: Details.js From web-client with Apache License 2.0 | 4 votes |
|
ProjectDetails = () => {
const navigate = useNavigate();
const { projectId } = useParams();
const { colorMode } = useColorMode()
const [project, updateProject] = useFetch(`/projects/${projectId}`)
const [users] = useFetch(`/projects/${projectId}/users`)
const destroy = useDelete(`/projects/`, updateProject);
const handleGenerateReport = () => {
navigate(`/projects/${project.id}/report`)
}
const handleManageTeam = () => {
navigate(`/projects/${project.id}/membership`)
}
const onArchiveButtonClick = (project) => {
secureApiFetch(`/projects/${project.id}`, {
method: 'PATCH',
body: JSON.stringify({ archived: !project.archived })
})
.then(() => {
updateProject();
actionCompletedToast('The project has been updated.');
})
.catch(err => console.error(err))
}
if (project && project.is_template) {
return <Navigate to={`/projects/templates/${project.id}`} />
}
return <>
<div className='heading'>
<Breadcrumb>
<Link to="/projects">Projects</Link>
</Breadcrumb>
{project && <>
<PageTitle value={`${project.name} project`} />
<ProjectTeam project={project} users={users} />
<ButtonGroup isAttached>
<RestrictedComponent roles={['administrator', 'superuser', 'user']}>
{!project.archived && <>
<LinkButton href={`/projects/${project.id}/edit`}>Edit</LinkButton>
<SecondaryButton onClick={handleGenerateReport} leftIcon={<IconClipboardCheck />}>Report</SecondaryButton>
<SecondaryButton onClick={handleManageTeam} leftIcon={<IconUserGroup />}>Membership</SecondaryButton>
</>}
<Menu>
<MenuButton as={IconButton} aria-label='Options' icon={<FontAwesomeIcon icon={faEllipsis} />} variant='outline' />
<MenuList>
<MenuItem onClick={() => onArchiveButtonClick(project)}>{project.archived ? 'Unarchive' : 'Archive'}</MenuItem>
<MenuItem icon={<FontAwesomeIcon icon={faTrash} />} color={colorMode === "light" ? "red.500" : "red.400"} onClick={() => destroy(project.id)}>Delete</MenuItem>
</MenuList>
</Menu>
</RestrictedComponent>
</ButtonGroup>
</>}
</div>
{!project ? <Loading /> :
<>
<Title title={project.name} type="Project" icon={<IconFolder />} />
<Tabs>
<TabList>
<Tab>Details</Tab>
<Tab>Targets</Tab>
<Tab>Tasks</Tab>
<Tab>Vulnerabilities</Tab>
<Tab>Notes</Tab>
<Tab>Attachments</Tab>
<Tab>Vault</Tab>
</TabList>
<TabPanels>
<TabPanel><ProjectDetailsTab project={project} /></TabPanel>
<TabPanel><ProjectTargets project={project} /></TabPanel>
<TabPanel><ProjectTasks project={project} /></TabPanel>
<TabPanel><ProjectVulnerabilities project={project} /></TabPanel>
<TabPanel><ProjectNotesTab project={project} /></TabPanel>
<TabPanel><ProjectAttachmentsTab project={project} /></TabPanel>
<TabPanel><ProjectVaultTab project={project} /></TabPanel>
</TabPanels>
</Tabs>
</>
}
</>
}
Example #10
| Source File: NavBar.js From MeowForm with MIT License | 4 votes |
|
function Navbar(props) {
const {colorMode , toggleColorMode }= useColorMode();
const isDark = colorMode === 'dark';
const { isOpen, onOpen, onClose } = useDisclosure()
const [size, setSize] = React.useState("md")
const [check] = useMediaQuery("(min-width: 1025px)")
const [meow ,setMeow] = React.useState(false);
const [signIn,setSignIn] = React.useState(false);
const formBackground = useColorModeValue("white.100","gray.900");
const { loginWithRedirect , logout , isAuthenticated , user} = useAuth0();
let flag = false;
var setFlag = () =>{
setMeow(!meow);
onClose();
}
return (
<>
<Box position="fixed" width="100%" backgroundColor="#fff" background={formBackground} zIndex="1000" >
<VStack p={5} >
<Flex w="100%">
<Link to="/">
<Text ml="8" bgGradient="linear(to-l, #ec9f05 ,#ff4e00)" bgClip="text"
fontSize={check ?"3xl":"xl"}
fontWeight="extrabold"
z-index={5}
>
MeowForm
</Text>
</Link>
<Spacer>
</Spacer>
<Tooltip label="Menu">
<IconButton onClick={onOpen} ml={2} mr={1} icon={<FaList />} isRound="true"></IconButton>
</Tooltip>
{check &&
<Tooltip label="Star! on github" >
<a href='https://github.com/tewarig/' target='_blank'><IconButton ml={2} mr={1} icon={<FaGithub />} isRound="true"></IconButton></a>
</Tooltip>
}
{ check &&
<Tooltip label={isDark ? "Light mode":"Dark Mode"} >
<IconButton ml={2} mr={1} icon={ isDark ? <FaSun /> : <FaMoon /> } isRound="true" onClick={toggleColorMode}>
</IconButton>
</Tooltip>
}
<Tooltip label="Manage Profile">
<Box ml={5} mr={1}>
</Box>
</Tooltip>
{ user &&
<Menu>
{({ isOpen }) => (
<>
<MenuButton isActive={isOpen} >
<Avatar name={user.name} src={user.picture} />
</MenuButton>
<MenuList>
<MenuItem>Hi , {user.name}</MenuItem>
<Link to="/dashboard">
<MenuItem> Dashboard </MenuItem>
</Link>
<MenuItem onClick={() => logout()}>Logout</MenuItem>
</MenuList>
</>
)}
</Menu>
}
{ !isAuthenticated &&
<Tooltip label="Sign in / SignUp ">
<Menu>
{({ isOpen }) => (
<>
<MenuButton isActive={isOpen} >
<Avatar />
</MenuButton>
<MenuList>
<MenuItem onClick={()=>(loginWithRedirect()) }>Sign In/Sign Up </MenuItem>
</MenuList>
</>
)}
</Menu>
{/* <IconButton icon={<FaUser />} isRound="true" onClick={()=>(loginWithRedirect())}>
</IconButton> */}
</Tooltip>
}
</Flex>
</VStack>
<Divider bgGradient="linear(to-l, #ec9f05 ,#ff4e00)" height={1} />
<Drawer onClose={meow ? setFlag : onClose } isOpen={isOpen} size={"xs"}>
<DrawerOverlay />
<DrawerContent>
<DrawerHeader align="center">
<Text bgGradient="linear(to-l, #ec9f05 ,#ff4e00)" bgClip="text"
fontSize={useDisclosure ? "5xl" : "3xl"}
fontWeight="extrabold"
>
MeowForm
</Text>
</DrawerHeader>
<DrawerBody>
<Box>
{!check &&
<Button ml="1%" mt="5%" width="100%" onClick={toggleColorMode} >
{isDark ? <FaSun color="yellow"/> : <FaMoon color="#59e5f7"/> }
<Text fontSize="xl" ml="4%">
{isDark ? "Light Mode" : "Dark Mode"}
</Text>
</Button>
}
<MenuItems onClose={onClose}></MenuItems>
<Text>
</Text>
</Box>
</DrawerBody>
</DrawerContent>
</Drawer>
</Box>
<Box height="15vh">
</Box>
</>
);
}
