Function CollapseSideBar

src/Components/common.jsx:31–95

({children, sx})

}

export function CollapseSideBar({children, sx}) {
    const smallPage = useSmallPage();
    const [open, setOpen] = useState(false)
    return (
        <>
            <SwipeableDrawer
                variant={smallPage ? "temporary" : "persistent"}
                open={!smallPage || (smallPage && open)}
                onOpen={() => setOpen(true)}
                onClose={() => setOpen(false)}
                elevation={0}
                sx={{
                    display: "flex",
                    width: 'auto',
                    height: 'auto',
                    zIndex: (smallPage ? 1201 : 1),
                    ...sx,
                    '& .MuiDrawer-paper': {
                        borderRadius: (smallPage ? '0 18px 18px 0' : '12px'),
                        border: 'none',
                        backgroundImage: 'none',
                        position: (smallPage ? 'absolute' : 'initial'),
                        top: '60px',
                        overflowY: 'auto',
                        // flat on desktop (no 3D card shadow); on the mobile overlay
                        // drawer use a soft modern shadow to lift it off the page
                        boxShadow: (smallPage ? "0 12px 40px rgba(16,24,40,0.22)" : 'none'),
                        ...(sx['& .MuiDrawer-paper'] ?? {})
                    },
                }}
            >
                {children}
            </SwipeableDrawer>
            <Button
                className="ShowUpButton"
                onClick={() => setOpen(!open)}
                disableRipple
                sx={{
                    position: 'absolute',
                    top: '50%',
                    transform: 'translateY(-50%)',
                    visibility: smallPage ? 'visible' : 'hidden',
                    minWidth: 0,
                    p: 0,
                    width: 26,
                    height: 64,
                    borderRadius: '0 16px 16px 0',
                    bgcolor: (theme) => theme.palette.surface,
                    color: 'primary.main',
                    border: (theme) => `1px solid ${theme.palette.divider}`,
                    borderLeft: 'none',
                    boxShadow: '0 4px 16px rgba(16,24,40,0.18)',
                    transition: 'background-color 0.15s ease, padding-left 0.15s ease',
                    '&:hover': {
                        bgcolor: (theme) => theme.palette.surfaceVariant,
                        pl: '2px',
                    },
                    zIndex: (smallPage ? 1200 : 1)