@chakra-ui/react#Drawer TypeScript Examples
The following examples show how to use
@chakra-ui/react#Drawer.
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: SideBar.tsx From ke with MIT License | 6 votes |
|
SideBar: FC<SidebarProps> = ({ header, children, breadcrumbsRules }) => {
const { isOpen, onOpen, onClose } = useDisclosure()
goToResourceEvent.watch(onClose)
return (
<>
<Row>
<Col xs={12}>
<SidebarButtonContainer>
<Button colorScheme="brand" m={2} width={20} onClick={onOpen}>
<Menu size="1em" />
</Button>
<BreadCrumbContainer>{breadcrumbsRules && <Breadcrumbs rules={breadcrumbsRules} />}</BreadCrumbContainer>
</SidebarButtonContainer>
</Col>
</Row>
<Drawer isOpen={isOpen} placement="left" onClose={onClose}>
<DrawerOverlay />
<DrawerContent>
<DrawerCloseButton />
<DrawerHeader>{header}</DrawerHeader>
<DrawerBody>
<Flex flexDirection="column">{children}</Flex>
</DrawerBody>
</DrawerContent>
</Drawer>
</>
)
}
Example #2
| Source File: SideBar.test.tsx From ke with MIT License | 6 votes |
|
test('Side bar component properly rendered', () => {
const component = shallow(
<SideBar header="Test">
<h1>Test</h1>
<h1>Test2</h1>
</SideBar>
)
expect(component.find(Menu).length).toEqual(1)
expect(component.find(Drawer).length).toEqual(1)
expect(component.find(DrawerContent).length).toEqual(1)
expect(component.find('h1').length).toEqual(2)
})
Example #3
| Source File: index.tsx From calories-in with MIT License | 6 votes |
|
function FoodsDrawer({
onClose,
isOpen,
mealName,
mealForm,
canSelect = true,
onSelectedFoods,
}: Props) {
const searchInputRef = useRef<HTMLInputElement>(null)
return (
<Drawer
initialFocusRef={isMobile ? undefined : searchInputRef}
isOpen={isOpen}
size="md"
placement="right"
onClose={onClose}
>
<DrawerOverlay />
<Content
onClose={onClose}
mealName={mealName}
mealForm={mealForm}
onSelectedFoods={onSelectedFoods}
searchInputRef={searchInputRef}
canSelect={canSelect}
/>
</Drawer>
)
}
Example #4
| Source File: Navigation.tsx From bluebubbles-server with Apache License 2.0 | 5 votes |
|
Navigation = (): JSX.Element => {
const { isOpen, onOpen, onClose } = useDisclosure();
const {
isOpen: isNotificationsOpen,
onOpen: onNotificationOpen,
onClose: onNotificationClose
} = useDisclosure();
const notifications: Array<NotificationItem> = useAppSelector(state => state.notificationStore.notifications);
const unreadCount = notifications.filter(e => !e.read).length;
const dispatch = useAppDispatch();
return (
<Box minH="100vh">
<Router>
<SidebarContent onClose={() => onClose} display={{ base: 'none', md: 'block' }} />
<Drawer
autoFocus={false}
isOpen={isOpen}
placement="left"
onClose={onClose}
returnFocusOnClose={false}
onOverlayClick={onClose}
size="full"
>
<DrawerContent>
<SidebarContent onClose={onClose} />
</DrawerContent>
</Drawer>
{/* mobilenav */}
<MobileNav onOpen={onOpen} onNotificationOpen={onNotificationOpen} unreadCount={unreadCount} />
<Box ml={{ base: 0, md: 60 }} p="2">
<Routes>
<Route path="/settings" element={<SettingsLayout />} />
<Route path="/logs" element={<LogsLayout />} />
<Route path="/contacts" element={<ContactsLayout />} />
<Route path="/fcm" element={<FcmLayout />} />
<Route path="/devices" element={<DevicesLayout />} />
<Route path="/webhooks" element={<ApiLayout />} />
<Route path="/guides" element={<GuidesLayout />} />
<Route path="/" element={<HomeLayout />} />
</Routes>
</Box>
</Router>
<Drawer onClose={() => closeNotification(onNotificationClose, dispatch)} isOpen={isNotificationsOpen} size="lg">
<DrawerOverlay />
<DrawerContent>
<DrawerHeader>Notifications / Alerts ({unreadCount})</DrawerHeader>
<DrawerBody>
<Menu>
<MenuButton
as={Button}
rightIcon={<BsChevronDown />}
width="12em"mr={5}
mb={4}
>
Manage
</MenuButton>
<MenuList>
<MenuItem icon={<FiTrash />} onClick={() => {
dispatch(clearAlerts());
}}>
Clear Alerts
</MenuItem>
<MenuItem icon={<BsCheckAll />} onClick={() => {
dispatch(readAll());
}}>
Mark All as Read
</MenuItem>
</MenuList>
</Menu>
<NotificationsTable notifications={notifications} />
</DrawerBody>
</DrawerContent>
</Drawer>
</Box>
);
}
Example #5
| Source File: AllCoupons.tsx From fresh-coupons with GNU General Public License v3.0 | 5 votes |
|
function AllCoupons() {
const {isOpen, onOpen, onClose} = useDisclosure()
const btnRef = React.useRef<HTMLButtonElement>(null)
const courses = useCourses()
return (
<>
<Button ref={btnRef} colorScheme="teal" onClick={onOpen}>
Open
</Button>
<Drawer
isOpen={isOpen}
placement="right"
onClose={onClose}
size={"4xl"}
finalFocusRef={btnRef}
>
<DrawerOverlay/>
<DrawerContent>
<DrawerCloseButton/>
<DrawerBody>
<Box my={9}>
<Center>
<Heading my={3} className={"course-list-title"} textAlign="center">Premium courses with
discount</Heading>
</Center>
<Stack spacing="10" py="5">
{Object.entries(courses.coursesWithCoupon)
.sort(([_, course]) => course.courseDetails.language === 'English' ? -1 : 1)
.map(([url, course]) => (
<CourseCard key={url} course={course}/>
))}
</Stack>
</Box>
<Box>
<Center>
<Heading my={3} className={"course-list-title"} textAlign="center">More free courses</Heading>
</Center>
<Stack spacing="10" py="5">
{Object.entries(courses.freeCourses).map(([url, course]) => (
<CourseCard key={url} course={course}/>
))}
</Stack>
</Box>
</DrawerBody>
</DrawerContent>
</Drawer>
</>
)
}
Example #6
| Source File: IconCustomizerDrawer.tsx From lucide with ISC License | 5 votes |
|
export function IconCustomizerDrawer() {
const [showCustomize, setShowCustomize] = useState(false);
const { color, setColor, size, setSize, strokeWidth, setStroke, resetStyle } = useContext(IconStyleContext);
return (
<>
<Button as="a" leftIcon={<Edit />} size="lg" onClick={() => setShowCustomize(true)}>
Customize
</Button>
<Drawer isOpen={showCustomize} placement="right" onClose={() => setShowCustomize(false)}>
<DrawerOverlay />
<DrawerContent>
<DrawerCloseButton />
<DrawerHeader>Customize Icons</DrawerHeader>
<DrawerBody>
<Grid gridGap={'1em'}>
<FormControl>
<ColorPicker
color={color}
value={color}
onChangeComplete={(col) => setColor(col.hex)}
/>
</FormControl>
<FormControl>
<FormLabel htmlFor="stroke">
<Flex>
<Text flexGrow={1} fontWeight={'bold'}>
Stroke
</Text>
<Text>{strokeWidth}px</Text>
</Flex>
</FormLabel>
<Slider
value={strokeWidth}
onChange={setStroke}
min={0.5}
max={3}
step={0.5}
name={'stroke'}
>
<SliderTrack>
<SliderFilledTrack bg={color} />
</SliderTrack>
<SliderThumb />
</Slider>
</FormControl>
<FormControl>
<FormLabel htmlFor="size">
<Flex>
<Text flexGrow={1} fontWeight={'bold'}>
Size
</Text>
<Text>{size}px</Text>
</Flex>
</FormLabel>
<Slider value={size} onChange={setSize} min={12} max={64} step={1} name={'size'}>
<SliderTrack>
<SliderFilledTrack bg={color} />
</SliderTrack>
<SliderThumb />
</Slider>
</FormControl>
<FormControl>
<Button onClick={resetStyle}>Reset</Button>
</FormControl>
</Grid>
</DrawerBody>
</DrawerContent>
</Drawer>
</>
);
}
Example #7
| Source File: MobileMenu.tsx From lucide with ISC License | 5 votes |
|
MobileMenu = ({ children }: { children?: ReactNode }): JSX.Element => {
const { isOpen, onClose } = useMobileNavigationContext();
const router = useRouter();
useEffect(() => {
if (router.route && isOpen) {
onClose();
}
}, [router.route]);
return (
<Drawer placement="left" onClose={onClose} isOpen={isOpen} size="sm">
<DrawerOverlay />
<DrawerContent>
<DrawerCloseButton marginTop={3.5} marginRight={3} />
<DrawerHeader>
<Logo />
</DrawerHeader>
<DrawerBody>
<Box mb={4}>
<NextLink href="/docs" passHref>
<Link fontSize="lg" fontWeight="bold" display="block" mb={2}>
Documentation
</Link>
</NextLink>
<NextLink href="/packages" passHref>
<Link marginRight={12} fontSize="lg" fontWeight="bold" display="block" mb={2}>
Packages
</Link>
</NextLink>
<NextLink href="/license" passHref>
<Link marginRight={12} fontSize="xl">
License
</Link>
</NextLink>
<Link
href="https://github.com/lucide-icons/lucide"
isExternal
fontSize="lg"
fontWeight="bold"
display="block"
mb={2}
>
Github
</Link>
</Box>
<Divider mt={2} />
{children}
</DrawerBody>
</DrawerContent>
</Drawer>
);
}
Example #8
| Source File: TopNavigation.tsx From website with MIT License | 4 votes |
|
TopNavigation: React.FC<TopNavigationProps> = ({ title }) => {
const { isOpen, onOpen, onClose } = useDisclosure()
return (
<Grid
as="nav"
templateColumns={`1fr 1fr minmax(auto, ${theme.sizes['6xl']}) 1fr 1fr`}
backgroundColor="gray.900"
color="white"
height={['88px', '80px']}
zIndex={50}
>
<List display="flex" flexWrap="wrap" alignItems="center" gridColumn="3/4" m={0} p={0}>
<ListItem display="flex" alignItems="center" pos="relative" h="100%" mr="auto">
<NextChakraLink
href="/"
display="flex"
alignItems="center"
py=".5rem"
px="1rem"
h="100%"
_hover={{ bg: 'rgba(255, 255, 255, 0.1)', textDecoration: 'none' }}
>
<Logo height={40} fill={theme.colors.white} title={title} />
</NextChakraLink>
</ListItem>
<ListItem display={['none', 'flex']} alignItems="center" h="100%">
<NextChakraLink
href="/community"
display="flex"
alignItems="center"
py="1.5rem"
px="1rem"
color="inherit"
h="100%"
lineHeight={1}
_hover={{ bg: 'rgba(255, 255, 255, 0.1)', textDecoration: 'none' }}
>
Komunitas
</NextChakraLink>
</ListItem>
<ListItem display={['none', 'flex']} alignItems="center" h="100%">
<NextChakraLink
href="/submit-a-talk"
display="flex"
alignItems="center"
py="1.5rem"
px="1rem"
color="inherit"
h="100%"
lineHeight={1}
_hover={{ bg: 'rgba(255, 255, 255, 0.1)', textDecoration: 'none' }}
>
Ajukan Topik
</NextChakraLink>
</ListItem>
<ListItem display={['none', 'flex']} alignItems="center" h="100%">
<NextChakraLink
href="/faq"
display="flex"
alignItems="center"
py="1.5rem"
px="1rem"
color="inherit"
h="100%"
lineHeight={1}
_hover={{ bg: 'rgba(255, 255, 255, 0.1)', textDecoration: 'none' }}
>
FAQ
</NextChakraLink>
</ListItem>
<ListItem py="1.5rem" px="1rem" display={['flex', 'none']} alignItems="center" h="100%">
<IconButton variant="outline" aria-label="Open menu" icon={<HamburgerIcon />} onClick={onOpen} />
<Drawer isOpen={isOpen} placement="right" onClose={onClose}>
<DrawerOverlay />
<DrawerContent>
<DrawerCloseButton />
<DrawerHeader>Menu Utama</DrawerHeader>
<DrawerBody>
<NextChakraLink
href="/community"
display="flex"
alignItems="center"
py="1.5rem"
px="1rem"
color="inherit"
lineHeight={1}
_hover={{ bg: 'rgba(255, 255, 255, 0.1)', textDecoration: 'none' }}
>
Komunitas
</NextChakraLink>
<NextChakraLink
href="/submit-a-talk"
display="flex"
alignItems="center"
py="1.5rem"
px="1rem"
color="inherit"
lineHeight={1}
_hover={{ bg: 'rgba(255, 255, 255, 0.1)', textDecoration: 'none' }}
>
Ajukan Topik
</NextChakraLink>
<NextChakraLink
href="/faq"
display="flex"
alignItems="center"
py="1.5rem"
px="1rem"
color="inherit"
lineHeight={1}
_hover={{ bg: 'rgba(255, 255, 255, 0.1)', textDecoration: 'none' }}
>
FAQ
</NextChakraLink>
</DrawerBody>
</DrawerContent>
</Drawer>
</ListItem>
</List>
</Grid>
)
}
