@chakra-ui/react#MenuList JavaScript Examples
The following examples show how to use
@chakra-ui/react#MenuList.
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 FlipCardMenu(props) {
return (
<Menu autoSelect={false} placement="bottom-end">
<MenuButton
rounded="md"
py={1.5}
px="2px"
mt="-6px"
_expanded={{bg: 'gray.50'}}
_focus={{outline: 0}}
>
<MoreIcon boxSize={5} />
</MenuButton>
<MenuList
rounded="lg"
py={2}
border="none"
shadow="0 4px 6px 0 rgba(83, 86, 92, 0.24), 0 0 2px 0 rgba(83, 86, 92, 0.2) !important"
minWidth="auto"
{...props}
/>
</Menu>
)
}
Example #4
| Source File: components.js From idena-web with MIT License | 6 votes |
|
export function Menu({children, zIndex, ...props}) {
return (
<ChakraMenu autoSelect={false} placement="bottom-end" {...props}>
<MenuButton>
<MoreIcon boxSize={5} color="muted" />
</MenuButton>
<MenuList zIndex={zIndex}>{children}</MenuList>
</ChakraMenu>
)
}
Example #5
| 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 #6
| Source File: List.js From web-client with Apache License 2.0 | 5 votes |
|
ClientsList = () => {
const navigate = useNavigate();
const [clients, updateTasks] = useFetch('/clients')
const destroy = useDelete('/clients/', updateTasks);
const handleCreateClient = () => {
navigate(`/clients/create`)
}
return <>
<PageTitle value="Clients" />
<div className='heading'>
<Breadcrumb />
<ButtonGroup isAttached>
<CreateButton onClick={handleCreateClient}>Add client</CreateButton>
<Menu>
<MenuButton as={IconButton} aria-label='Options' icon={<FontAwesomeIcon icon={faEllipsis} />} variant='outline' />
<MenuList>
<ExportMenuItem entity="clients" />
</MenuList>
</Menu>
</ButtonGroup>
</div>
<Title title='Clients' icon={<IconBriefcase />} />
<Table>
<Thead>
<Tr>
<Th>Name</Th>
<Th>Address</Th>
<Th>URL</Th>
<Th>Number of contacts</Th>
<Th> </Th>
</Tr>
</Thead>
<Tbody>
{null === clients && <LoadingTableRow numColumns={5} />}
{null !== clients && 0 === clients.length && <NoResultsTableRow numColumns={5} />}
{null !== clients && 0 < clients.length && clients.map(client =>
<Tr key={client.id}>
<Td><ClientLink clientId={client.id}>{client.name}</ClientLink></Td>
<Td>{client.address || '-'}</Td>
<Td>{client.url ? <ExternalLink href={client.url}>{client.url}</ExternalLink> : '-'}</Td>
<Td>{client.num_contacts}</Td>
<Td textAlign="right">
<LinkButton href={`/clients/${client.id}/edit`}>Edit</LinkButton>
<DeleteIconButton onClick={() => destroy(client.id)} />
</Td>
</Tr>
)
}
</Tbody>
</Table>
</>
}
Example #7
| Source File: List.js From web-client with Apache License 2.0 | 5 votes |
|
CommandsListPage = () => {
const navigate = useNavigate();
const query = useQuery();
let pageNumber = query.get('page');
pageNumber = pageNumber !== null ? parseInt(pageNumber) : 1;
const apiPageNumber = pageNumber - 1;
const [numberPages, setNumberPages] = useState(1);
const [totalCount, setTotalCount] = useState('?');
const [commands, setCommands] = useState([]);
const onAddCommandClick = ev => {
ev.preventDefault();
navigate('/commands/add');
}
const handlePrev = () => {
const queryParams = new URLSearchParams();
queryParams.set('page', pageNumber - 1);
const url = `/commands?${queryParams.toString()}`;
navigate(url);
}
const handleNext = () => {
const queryParams = new URLSearchParams();
queryParams.set('page', pageNumber + 1);
const url = `/commands?${queryParams.toString()}`;
navigate(url);
}
const reloadCommands = useCallback(() => {
setCommands(null);
const queryParams = new URLSearchParams();
queryParams.set('page', apiPageNumber);
const url = `/commands?${queryParams.toString()}`;
secureApiFetch(url, { method: 'GET' })
.then(resp => {
if (resp.headers.has('X-Page-Count')) {
setNumberPages(resp.headers.get('X-Page-Count'))
}
if (resp.headers.has('X-Total-Count')) {
setTotalCount(resp.headers.get('X-Total-Count'))
}
return resp.json()
})
.then(commands => {
setCommands(commands);
});
}, [setCommands, apiPageNumber]);
const destroy = useDelete('/commands/', reloadCommands);
useEffect(() => {
reloadCommands()
}, [reloadCommands])
return <div>
<PageTitle value="Commands" />
<div className='heading'>
<Breadcrumb />
<Pagination page={apiPageNumber} total={numberPages} handlePrev={handlePrev} handleNext={handleNext} />
<ButtonGroup isAttached>
<CreateButton onClick={onAddCommandClick}>Add command</CreateButton>
<Menu>
<MenuButton as={IconButton} aria-label='Options' icon={<FontAwesomeIcon icon={faEllipsis} />} variant='outline' />
<MenuList>
<ExportMenuItem entity="commands" />
</MenuList>
</Menu>
</ButtonGroup>
</div>
<Title title={`Commands (${totalCount})`} icon={<IconFolder />} />
<CommandsTable commands={commands} onDeleteCallback={destroy} />
</div>
}
Example #8
| 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 #9
| 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 #10
| 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 #11
| Source File: List.js From web-client with Apache License 2.0 | 4 votes |
|
UsersList = () => {
const navigate = useNavigate();
const loggedInUser = Auth.getLoggedInUser();
const [users, updateUsers] = useFetch("/users");
const deleteUser = useDelete("/users/", updateUsers);
const handleCreate = () => {
navigate("/users/create");
};
const [selectedUsers, setSelectedUsers] = useState([]);
const onTaskCheckboxChange = (ev) => {
const target = ev.target;
const targetUserId = parseInt(target.value);
if (target.checked) {
setSelectedUsers([...selectedUsers, targetUserId]);
} else {
setSelectedUsers(
selectedUsers.filter(value => value !== targetUserId)
);
}
};
const handleBulkDelete = () => {
secureApiFetch(`/users`, {
method: "PATCH",
headers: {
"Bulk-Operation": "DELETE",
},
body: JSON.stringify(selectedUsers),
})
.then(updateUsers)
.then(() => {
setSelectedUsers([]);
actionCompletedToast("All selected users were deleted.");
})
.catch(err => console.error(err));
};
const handleDelete = (id) => {
deleteUser(id);
updateUsers();
};
return <>
<PageTitle value="Users" />
<div className="heading">
<Breadcrumb />
<ButtonGroup isAttached>
<CreateButton onClick={handleCreate}>
Create user
</CreateButton>
<RestrictedComponent roles={['administrator']}>
<DeleteButton onClick={handleBulkDelete} disabled={selectedUsers.length === 0}>
Delete selected
</DeleteButton>
</RestrictedComponent>
<Menu>
<EllipsisMenuButton />
<MenuList>
<ExportMenuItem entity="users" />
</MenuList>
</Menu>
</ButtonGroup>
</div>
<Title title="Users and roles" icon={<IconUserGroup />} />
<Table>
<Thead>
<Tr>
<Th style={{ width: "32px" }}> </Th>
<Th style={{ width: "64px" }}> </Th>
<Th>Full name</Th>
<Th>Username</Th>
<Th>Role</Th>
<Th>Active?</Th>
<Th>2FA enabled?</Th>
<Th> </Th>
</Tr>
</Thead>
<Tbody>
{null === users && <LoadingTableRow numColumns={8} />}
{null !== users && 0 === users.length && <NoResultsTableRow numColumns={8} />}
{null !== users && 0 !== users.length && users.map((user, index) => (
<Tr key={index}>
<Td>
<input
type="checkbox"
value={user.id}
onChange={onTaskCheckboxChange}
checked={selectedUsers.includes(user.id)}
/>
</Td>
<Td>
<UserAvatar email={user.email} />
</Td>
<Td>
<Link to={`/users/${user.id}`}>
{user.full_name}
</Link>
</Td>
<Td>
<UserLink userId={user.id}>
{user.username}
</UserLink>
</Td>
<Td>
<UserRoleBadge role={user.role} />
</Td>
<Td><BooleanText value={user.active} /></Td>
<Td><BooleanText value={user.mfa_enabled} /></Td>
<Td textAlign="right">
<LinkButton href={`/users/${user.id}/edit`}>
Edit
</LinkButton>
<DeleteIconButton
onClick={() => handleDelete(user.id)}
disabled={
parseInt(user.id) ===
loggedInUser.id
? "disabled"
: ""
}
/>
</Td>
</Tr>
))}
</Tbody>
</Table>
</>
}
Example #12
| 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>
</>
);
}
