Project setup

components/Button.tsx

@@ -0,0 +1,29 @@
+import { FC } from "react";
+import Link from "next/link";
+import { Button as MUIButton } from "@mui/material";
+
+interface ButtonProps {
+  text: string;
+  color: string;
+  href: string;
+}
+
+export const Button: FC<ButtonProps> = ({ text, color, href }) => (
+  <Link href={href} passHref>
+    <MUIButton
+      variant="contained"
+      disableElevation
+      sx={{
+        fontFamily: "Poppins, sans-serif",
+        fontWeight: 700,
+        borderRadius: 999,
+        backgroundColor: color,
+        padding: "6px 30px",
+        margin: "20px 0px",
+        whiteSpace: "nowrap",
+      }}
+    >
+      {text}
+    </MUIButton>
+  </Link>
+);

components/Layout.tsx

@@ -0,0 +1,11 @@
+import { Grid } from "@mui/material";
+import { Sidebar } from "./Sidebar";
+
+export const Layout = ({ children }) => (
+  <Grid container direction="row">
+    <Sidebar open />
+    <Grid item sx={{ ml: "300px", width: "100%", height: "100vh" }}>
+      {children}
+    </Grid>
+  </Grid>
+);

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>
+);