Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 | 1x | import { useState, ReactNode, Fragment } from 'react';
import Divider from '@mui/material/Divider';
import List from '@mui/material/List';
import ListSubheader from '@mui/material/ListSubheader';
import Box from '@mui/material/Box';
import ExpandLess from '@mui/icons-material/ExpandLess';
import ExpandMore from '@mui/icons-material/ExpandMore';
import IconButton from '@mui/material/IconButton';
import { SidebarFlatItem, SidebarNestedItem } from '../components/Sidebar';
export interface SidebarMenuItem {
label: string;
selected?: boolean;
onClick?: () => void;
to?: string;
exact?: boolean;
active?: boolean;
icon?: ReactNode;
secondaryMenu?: ReactNode;
secondaryButton?: ReactNode;
childItems?: SidebarMenuItem[];
spacer?: boolean;
divider?: boolean;
}
export interface SidebarMenu {
title?: string;
key?: string;
expandable?: boolean;
items?: SidebarMenuItem[];
}
interface SidebarProps {
hideItems?: boolean;
menus: SidebarMenu[];
menusCollapsed?: string[];
onMenuExpandToggle?: (menuKey: string) => void;
statusPanel?: ReactNode;
collapsed?: boolean;
}
const Sidebar = ({
hideItems,
menus,
menusCollapsed = [],
onMenuExpandToggle,
statusPanel,
collapsed = false,
}: SidebarProps) => {
const [openIndex, setOpenIndex] = useState<number | null>(null);
const toggleMenuExpand = (menuKey: string) => {
onMenuExpandToggle?.(menuKey);
};
const menusNodes = menus.map((menu, i) => {
return (
<Fragment key={i + (menu.key || '') + (menu.title || '')}>
{menu.items ? (
<List
subheader={
!collapsed ? (
<ListSubheader component="div" id="nested-list-subheader" disableSticky={true}>
{menu.title}
{menu.expandable && (
<IconButton
edge="end"
sx={{ position: 'absolute', top: '6px', right: '12px' }}
onClick={() => {
if (menu.title) toggleMenuExpand(menu.title);
}}
size="large"
>
{menusCollapsed.includes(menu.title || '') ? <ExpandMore /> : <ExpandLess />}
</IconButton>
)}
</ListSubheader>
) : undefined
}
>
{menusCollapsed.includes(menu.title || '')
? null
: menu.items.map((item, index) => {
if (item.spacer) {
return <Box key={'menu' + index} py={3} />;
}
if (item.divider) {
return <Divider key={'menu' + index} />;
}
if (item.childItems) {
return (
<SidebarNestedItem
key={'itemNest' + index}
item={item}
index={index}
openIndex={openIndex}
onToggle={setOpenIndex}
collapsed={collapsed}
/>
);
}
return (
<SidebarFlatItem key={'itemFlat' + index} item={item} collapsed={collapsed} />
);
})}
</List>
) : null}
</Fragment>
);
});
return (
<>
<Box
sx={{
width: '100%',
transition: 'all .2s',
...(hideItems && { opacity: 0, pointerEvents: 'none' }),
}}
>
{menusNodes}
</Box>
{statusPanel}
</>
);
};
export default Sidebar;
|