Updated navbar

package.json

@@ -1,6 +1,6 @@
 {
-	"name": "invidious-client",
+	"name": "fouctube",
-	"displayName": "Invidious Client",
+	"displayName": "FoucTube",
 	"license": "MIT",
 	"scripts": {
 		"dev": "next dev",

src/components/Navbar/Drawer.tsx

@@ -0,0 +1,65 @@
+import packageInfo from "../../../package.json";
+
+import Link from "next/link";
+
+import { FC } from "react";
+
+import Box from "@mui/material/Box";
+import Divider from "@mui/material/Divider";
+import Drawer from "@mui/material/Drawer";
+import List from "@mui/material/List";
+import ListItem from "@mui/material/ListItem";
+import ListItemIcon from "@mui/material/ListItemIcon";
+import ListItemText from "@mui/material/ListItemText";
+import Typography from "@mui/material/Typography";
+
+import { Settings } from "@mui/icons-material";
+
+const MuiDrawer: FC<{
+	drawerIsOpen: boolean;
+	toggleDrawer: (
+		isOpen: boolean
+	) => (event: React.KeyboardEvent | React.MouseEvent) => void;
+	pages: {
+		name: string;
+		icon: JSX.Element;
+		link: string;
+	}[];
+}> = ({ drawerIsOpen, toggleDrawer, pages }) => {
+	return (
+		<Drawer anchor="left" open={drawerIsOpen} onClose={toggleDrawer(false)}>
+			<Box
+				sx={{ width: 250 }}
+				role="presentation"
+				onClick={toggleDrawer(false)}
+				onKeyDown={toggleDrawer(false)}
+			>
+				<Box padding={2}>
+					<Typography variant="h4">{packageInfo.displayName}</Typography>
+				</Box>
+				<Divider />
+				<List>
+					{pages.map((page, index) => (
+						<Link key={index} href={page.link} passHref>
+							<ListItem button>
+								<ListItemIcon>{page.icon}</ListItemIcon>
+								<ListItemText primary={page.name} />
+							</ListItem>
+						</Link>
+					))}
+					<Divider />
+					<Link href="/settings" passHref>
+						<ListItem button>
+							<ListItemIcon>
+								<Settings />
+							</ListItemIcon>
+							<ListItemText primary="Settings" />
+						</ListItem>
+					</Link>
+				</List>
+			</Box>
+		</Drawer>
+	);
+};
+
+export default MuiDrawer;

src/components/Navbar/index.tsx

@@ -1,4 +1,4 @@
-import packageInfo from "../../package.json";
+import packageInfo from "../../../package.json";
 
 import Link from "next/link";
 
@@ -7,13 +7,7 @@ import { FC, useState } from "react";
 import AppBar from "@mui/material/AppBar";
 import Box from "@mui/material/Box";
 import Button from "@mui/material/Button";
-import Divider from "@mui/material/Divider";
-import Drawer from "@mui/material/Drawer";
 import IconButton from "@mui/material/IconButton";
-import List from "@mui/material/List";
-import ListItem from "@mui/material/ListItem";
-import ListItemIcon from "@mui/material/ListItemIcon";
-import ListItemText from "@mui/material/ListItemText";
 import Toolbar from "@mui/material/Toolbar";
 import Typography from "@mui/material/Typography";
 
@@ -22,9 +16,12 @@ import {
 	Subscriptions,
 	Menu,
 	Whatshot,
-	PlaylistAddCheck
+	PlaylistAddCheck,
+	Settings
 } from "@mui/icons-material";
 
+import Drawer from "@components/Navbar/Drawer";
+
 const Navbar: FC = () => {
 	const [drawerIsOpen, setDrawerState] = useState(false);
 
@@ -63,24 +60,10 @@ const Navbar: FC = () => {
 	return (
 		<>
 			<Drawer
-				anchor="left"
+				drawerIsOpen={drawerIsOpen}
-				open={drawerIsOpen}
+				toggleDrawer={toggleDrawer}
-				onClose={() => toggleDrawer(false)}
+				pages={pages}
-			>
+			/>
-				<Box padding={2}>
-					<Typography variant="h4">Yeet</Typography>
-				</Box>
-				<Divider />
-				<List>
-					{pages.map((page, index) => (
-						<ListItem button key={index}>
-							<ListItemIcon>{page.icon}</ListItemIcon>
-							<ListItemText primary={page.name} />
-						</ListItem>
-					))}
-				</List>
-				<Divider />
-			</Drawer>
 			<Box sx={{ flexGrow: 1 }}>
 				<AppBar position="static">
 					<Toolbar>
@@ -89,7 +72,7 @@ const Navbar: FC = () => {
 							edge="start"
 							color="inherit"
 							aria-label="menu"
-							sx={{ mr: 2 }}
+							sx={{ mr: 2, display: { md: "none", xs: "flex" } }}
 							onClick={toggleDrawer(true)}
 						>
 							<Menu />
@@ -97,24 +80,33 @@ const Navbar: FC = () => {
 						<Typography variant="h6" component="div" sx={{ mr: 2 }}>
 							{packageInfo.displayName}
 						</Typography>
-						{pages.map((page, i) => (
+						<Box sx={{ flexGrow: 1, display: { md: "flex", xs: "none" } }}>
-							<Link key={i} href={"/" + page.link}>
+							{pages.map((page, i) => (
-								<a>
+								<Link key={i} href={"/" + page.link}>
-									<Button
+									<a>
-										sx={{
+										<Button
-											my: 2,
+											sx={{
-											color: "white",
+												my: 2,
-
+												color: "white",
-											display: "flex",
+												display: "flex",
-											alignItems: "center"
+												alignItems: "center"
-										}}
+											}}
-									>
+										>
-										{page.icon}
+											{page.icon}
-										{page.name}
+											{page.name}
-									</Button>
+										</Button>
-								</a>
+									</a>
-							</Link>
+								</Link>
-						))}
+							))}
+						</Box>
+						<Link href="/settings" passHref>
+							<IconButton
+								sx={{ display: { md: "flex", xs: "none" } }}
+								size="large"
+							>
+								<Settings />
+							</IconButton>
+						</Link>
 					</Toolbar>
 				</AppBar>
 			</Box>