92 lines
2.1 KiB
TypeScript
92 lines
2.1 KiB
TypeScript
import { FC } from "react";
|
|
import {
|
|
Box,
|
|
Grid,
|
|
Typography,
|
|
List,
|
|
ListItem,
|
|
ListItemIcon,
|
|
ListItemText,
|
|
Drawer,
|
|
} from "@mui/material";
|
|
import Link from "next/link";
|
|
|
|
const MenuItem = ({ name, href, iconSize }: any) => (
|
|
<Link href={href} passHref>
|
|
<ListItem button>
|
|
<ListItemIcon
|
|
sx={{
|
|
color: `black !important`,
|
|
}}
|
|
>
|
|
<Box
|
|
sx={{
|
|
width: iconSize,
|
|
height: iconSize,
|
|
ml: `${(20 - iconSize) / 2}px`,
|
|
mr: `${(20 - iconSize) / 2}px`,
|
|
}}
|
|
>
|
|
{/* <Image src={icon} alt="" /> */}
|
|
</Box>
|
|
|
|
<ListItemText
|
|
primary={
|
|
<Typography
|
|
variant="body1"
|
|
style={{
|
|
color: "#000 !important",
|
|
fontSize: 14,
|
|
fontFamily: "Roboto",
|
|
fontWeight: 400,
|
|
marginLeft: 10,
|
|
marginTop: -3,
|
|
}}
|
|
>
|
|
{name}
|
|
</Typography>
|
|
}
|
|
/>
|
|
</ListItemIcon>
|
|
</ListItem>
|
|
</Link>
|
|
);
|
|
|
|
interface SidebarProps {
|
|
open: boolean;
|
|
}
|
|
|
|
export const Sidebar: FC<SidebarProps> = ({ open }) => (
|
|
<Drawer
|
|
sx={{ width: 300, flexShrink: 0, backgroundColor: "black !important" }}
|
|
variant="permanent"
|
|
anchor="left"
|
|
open={open}
|
|
PaperProps={{
|
|
sx: {
|
|
width: 300,
|
|
border: 0,
|
|
|
|
backgroundColor: "black !important",
|
|
},
|
|
}}
|
|
>
|
|
<Grid
|
|
container
|
|
direction="column"
|
|
justifyContent="space-between"
|
|
wrap="nowrap"
|
|
sx={{ backgroundColor: "black", height: "100%" }}
|
|
>
|
|
<Grid item container direction="column" sx={{ mt: "6px" }} flexGrow={1}>
|
|
<List component="nav">
|
|
<MenuItem name="" href="/" iconSize={20} />
|
|
<MenuItem name="" href="/create" iconSize={20} />
|
|
<MenuItem name="" href="/trends" iconSize={13} />
|
|
<MenuItem name="" href="/faq" iconSize={20} />
|
|
<MenuItem name="" href="/about" iconSize={20} />
|
|
</List>
|
|
</Grid>
|
|
</Grid>
|
|
</Drawer>
|
|
);
|