188 lines
4.6 KiB
TypeScript
188 lines
4.6 KiB
TypeScript
import { FC } from "react";
|
|
import {
|
|
Box,
|
|
Grid,
|
|
Typography,
|
|
List,
|
|
ListItem,
|
|
ListItemIcon,
|
|
ListItemText,
|
|
Drawer,
|
|
Accordion,
|
|
AccordionSummary,
|
|
AccordionDetails,
|
|
} from "@mui/material";
|
|
import {
|
|
FeaturedPlayList as FeaturedPlayListIcon,
|
|
Person as PersonIcon,
|
|
Analytics as AnalyticsIcon,
|
|
Logout as LogoutIcon,
|
|
Cottage as CottageIcon,
|
|
Settings as SettingsIcon,
|
|
} from "@mui/icons-material";
|
|
import Link from "next/link";
|
|
|
|
const MenuItem = ({ name, href, Icon, iconSize, indent = 0 }: any) => (
|
|
<Link href={href} passHref>
|
|
<ListItem button sx={{ p: 0, pb: 2, pr: indent * 5 }}>
|
|
<ListItemIcon
|
|
sx={{
|
|
color: `white`,
|
|
}}
|
|
>
|
|
<Box
|
|
sx={{
|
|
width: iconSize,
|
|
height: iconSize,
|
|
mr: 0.5,
|
|
}}
|
|
>
|
|
{iconSize > 0 && <Icon />}
|
|
</Box>
|
|
|
|
<ListItemText
|
|
primary={
|
|
<Typography
|
|
variant="body1"
|
|
sx={{
|
|
color: "#fff !important",
|
|
fontSize: 14,
|
|
fontFamily: "Roboto",
|
|
fontWeight: 400,
|
|
marginLeft: "12px",
|
|
marginTop: "-1px",
|
|
textDecoration: "none !important",
|
|
">a": {
|
|
textDecoration: "none !important",
|
|
},
|
|
"a:visited": {
|
|
textDecoration: "none !important",
|
|
},
|
|
border: 0,
|
|
}}
|
|
>
|
|
{name}
|
|
</Typography>
|
|
}
|
|
/>
|
|
</ListItemIcon>
|
|
</ListItem>
|
|
</Link>
|
|
);
|
|
|
|
interface SidebarProps {
|
|
open: boolean;
|
|
}
|
|
|
|
export const Sidebar: FC<SidebarProps> = ({ open }) => (
|
|
<Drawer
|
|
sx={{ width: 300, flexShrink: 0 }}
|
|
variant="permanent"
|
|
anchor="left"
|
|
open={open}
|
|
PaperProps={{
|
|
sx: {
|
|
width: 300,
|
|
border: 0,
|
|
},
|
|
}}
|
|
>
|
|
<Grid
|
|
container
|
|
direction="column"
|
|
justifyContent="space-between"
|
|
wrap="nowrap"
|
|
sx={{ backgroundColor: "#25272A", height: "100%", p: 2 }}
|
|
>
|
|
<Grid item>
|
|
<Typography variant="h6" sx={{ fontSize: 12, color: "white" }}>
|
|
Hello
|
|
</Typography>
|
|
</Grid>
|
|
<Grid item>
|
|
<Typography variant="h2" sx={{ fontSize: 22, color: "white", mb: 1.5 }}>
|
|
Agent/User
|
|
</Typography>
|
|
</Grid>
|
|
<Grid item>
|
|
<Box sx={{ height: 1.5, width: "100%", backgroundColor: "white" }} />
|
|
</Grid>
|
|
<Grid item container direction="column" sx={{ mt: "6px" }} flexGrow={1}>
|
|
<List component="nav">
|
|
<MenuItem name="Home" href="/" Icon={CottageIcon} iconSize={20} />
|
|
<Accordion
|
|
sx={{
|
|
backgroundColor: "#25272A",
|
|
border: 0,
|
|
m: 0,
|
|
p: 0,
|
|
boxShadow: "none",
|
|
mt: -1,
|
|
mb: -1,
|
|
}}
|
|
>
|
|
<AccordionSummary sx={{ p: 0, m: 0 }}>
|
|
<MenuItem
|
|
name="My tickets"
|
|
href="/assigned"
|
|
Icon={FeaturedPlayListIcon}
|
|
iconSize={20}
|
|
/>
|
|
</AccordionSummary>
|
|
<AccordionDetails sx={{ p: 0, mt: -2, ml: "20px" }}>
|
|
<MenuItem
|
|
name="Assigned"
|
|
href="/assigned"
|
|
Icon={FeaturedPlayListIcon}
|
|
iconSize={0}
|
|
/>
|
|
<MenuItem
|
|
name="Urgent"
|
|
href="/urgent"
|
|
Icon={FeaturedPlayListIcon}
|
|
iconSize={0}
|
|
/>
|
|
<MenuItem
|
|
name="Pending"
|
|
href="/pending"
|
|
Icon={FeaturedPlayListIcon}
|
|
iconSize={0}
|
|
/>
|
|
<MenuItem
|
|
name="Unassigned"
|
|
href="/unassigned"
|
|
Icon={FeaturedPlayListIcon}
|
|
iconSize={0}
|
|
/>
|
|
</AccordionDetails>
|
|
</Accordion>
|
|
|
|
<MenuItem
|
|
name="Leafcutter"
|
|
href="/leafcutter"
|
|
Icon={AnalyticsIcon}
|
|
iconSize={20}
|
|
/>
|
|
<MenuItem
|
|
name="Profile"
|
|
href="/profile"
|
|
Icon={PersonIcon}
|
|
iconSize={20}
|
|
/>
|
|
<MenuItem
|
|
name="Settings"
|
|
href="/settings"
|
|
Icon={SettingsIcon}
|
|
iconSize={20}
|
|
/>
|
|
<MenuItem
|
|
name="Logout"
|
|
href="/logout"
|
|
Icon={LogoutIcon}
|
|
iconSize={20}
|
|
/>
|
|
</List>
|
|
</Grid>
|
|
</Grid>
|
|
</Drawer>
|
|
);
|