Function SideNav

frontend/src/components/SideNav.tsx:18–96

(props: { items: SideNavItem[], children?: ReactNode | ReactNode[] })

const drawerWidth = 250;

export function SideNav(props: { items: SideNavItem[], children?: ReactNode | ReactNode[] }) {
    let sideNavController = UseSideNavController();

    useEffect(() => {
        sideNavController.addInstance();
        return function () {
            sideNavController.removeInstance();
        }

        // this is fine even though it warns us
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [])

    const drawerContents = (
        <>
            <List>
                {props.items.map((v, i) => (
                    <NavItem item={v} key={i} />
                ))}
            </List>
        </>
    );

    // we move the top bar pages to the side bar to best utilize the space
    const topBarReplacements = (
        <>
            {TopBarNavPages.map((v, i) => (
                <NavItem item={{
                    isNavLink: !v.useHref,
                    label: v.label,
                    path: v.path,
                }} key={i} />
            ))}
        </>
    )

    const container = window !== undefined ? () => window.document.body : undefined;

    return <Box
        component="nav"
        sx={{ width: { md: drawerWidth }, flexShrink: { md: 0 } }}
        aria-label="mailbox folders"
    >
        {/* The implementation can be swapped with js to avoid SEO duplication of links. */}
        <Drawer
            container={container}
            variant="temporary"
            open={sideNavController.isOpen}
            onClose={sideNavController.close}
            ModalProps={{
                keepMounted: true, // Better open performance on mobile.
            }}
            sx={{
                display: { xs: 'block', md: 'none' },
                '& .MuiDrawer-paper': { boxSizing: 'border-box', width: drawerWidth },
            }}
        >
            <Toolbar >{":)"}</Toolbar>