![](https://www.loopple.com/img/gradient.png)
![](https://www.loopple.com/img/gradient-blue.png)
Chakra Sidebars
Discover 1 Chakra Sidebars available in Loopple
Sidebar Simple
Component from
Chakra UI Dashboard
Builder
![](https://loopple.s3.eu-west-3.amazonaws.com/components/sidebar-simple-chakra-ui.png)
import { Box, Button, Drawer, DrawerOverlay, DrawerCloseButton, DrawerHeader, DrawerBody, DrawerContent, VStack, Image, Text } from '@chakra-ui/react';
interface Props {
onClose: Function,
isOpen: boolean,
variant: 'drawer' | 'sidebar',
}
const SidebarContent = ({ onClick }: { onClick: Function }) => (
<VStack>
<Box w='100%' display="flex" justifyContent="center">
<Image w='50%' src="https://raw.githubusercontent.com/Loopple/loopple-public-assets/main/logos/loopple-logo-text.png" alt='Loopple'/>
</Box>
<Button w="100%">
Home
</Button>
<Button w="100%">
Dashboard
</Button>
<Button w="100%">
Users
</Button>
<Button w="100%">
Analytics
</Button>
</VStack>
)
const Sidebar = ({ isOpen, variant, onClose }: Props) => {
return variant === 'sidebar' ? (
<Box
position="fixed"
left={0}
p={3}
w="240px"
top={0}
h="100%"
bg="#fff"
borderRight="1px solid #ddd"
>
<VStack>
<Box w='100%' display="flex" justifyContent="center">
<Image w='50%' src="https://raw.githubusercontent.com/Loopple/loopple-public-assets/main/logos/loopple-logo-text.png" alt='Loopple'/>
</Box>
<Button w="100%">
Home
</Button>
<Button w="100%">
Dashboard
</Button>
<Button w="100%">
Users
</Button>
<Button w="100%">
Analytics
</Button>
</VStack>
</Box>
) : (
<Drawer isOpen={isOpen} placement="left" onClose={onClose}>
<DrawerOverlay>
<DrawerContent>
<DrawerCloseButton />
<DrawerHeader>Loopple Chakra</DrawerHeader>
<DrawerBody>
<SidebarContent onClick={onClose} />
</DrawerBody>
</DrawerContent>
</DrawerOverlay>
</Drawer>
)
}
export default Sidebar;