Project setup

components/Sidebar.tsx

@@ -0,0 +1,92 @@
+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>
+);