68 lines
1.9 KiB
TypeScript
68 lines
1.9 KiB
TypeScript
import {
|
|
Drawer,
|
|
DrawerBody,
|
|
DrawerOverlay,
|
|
DrawerContent,
|
|
DrawerCloseButton,
|
|
Flex,
|
|
Spacer,
|
|
} from '@chakra-ui/react';
|
|
import { BottomCard, SidebarContent } from './SidebarContent';
|
|
import { AnimatePresence, motion } from 'framer-motion';
|
|
import { usePageStore } from '@/stores';
|
|
import { sidebarBreakpoint } from '@/theme/breakpoints';
|
|
import { ReactNode } from 'react';
|
|
|
|
export function Sidebar({ sidebar }: { sidebar?: ReactNode }) {
|
|
return (
|
|
<Flex
|
|
direction="column"
|
|
display={{ base: 'none', [sidebarBreakpoint]: 'flex' }}
|
|
flexShrink={0}
|
|
bg="CardBackground"
|
|
w="300px"
|
|
h="100%"
|
|
overflowX="hidden"
|
|
overflowY="auto"
|
|
>
|
|
<AnimatePresence exitBeforeEnter initial={false}>
|
|
<motion.div
|
|
key={sidebar == null ? 'default' : 'new'}
|
|
initial={{ x: '100px', opacity: 0 }}
|
|
animate={{ x: 0, opacity: 1 }}
|
|
exit={{ x: '-100px', opacity: 0 }}
|
|
transition={{ duration: 0.2, ease: 'easeInOut' }}
|
|
>
|
|
{sidebar ?? <SidebarContent />}
|
|
</motion.div>
|
|
</AnimatePresence>
|
|
<Spacer />
|
|
<BottomCard />
|
|
</Flex>
|
|
);
|
|
}
|
|
|
|
export function SidebarResponsive({ sidebar }: { sidebar?: ReactNode }) {
|
|
const [isOpen, setOpen] = usePageStore((s) => [s.sidebarIsOpen, s.setSidebarIsOpen]);
|
|
|
|
return (
|
|
<Drawer isOpen={isOpen} onClose={() => setOpen(false)}>
|
|
<DrawerOverlay />
|
|
<DrawerContent w="285px" maxW="285px" bg="CardBackground">
|
|
<DrawerCloseButton
|
|
zIndex="3"
|
|
onClick={() => setOpen(false)}
|
|
_focus={{ boxShadow: 'none' }}
|
|
_hover={{ boxShadow: 'none' }}
|
|
/>
|
|
<DrawerBody maxW="285px" px="0rem" pb="0">
|
|
<Flex direction="column" height="100%" overflow="auto">
|
|
{sidebar ?? <SidebarContent />}
|
|
<Spacer />
|
|
<BottomCard />
|
|
</Flex>
|
|
</DrawerBody>
|
|
</DrawerContent>
|
|
</Drawer>
|
|
);
|
|
}
|