From 8f4f5c2fa6c163799dd1dc0803d58395e733f1e8 Mon Sep 17 00:00:00 2001 From: Guusvanmeerveld Date: Mon, 21 Mar 2022 17:05:02 +0100 Subject: [PATCH] Updated navbar --- package.json | 4 +- src/components/Navbar/Drawer.tsx | 65 +++++++++++++++ .../{Navbar.tsx => Navbar/index.tsx} | 82 +++++++++---------- 3 files changed, 104 insertions(+), 47 deletions(-) create mode 100644 src/components/Navbar/Drawer.tsx rename src/components/{Navbar.tsx => Navbar/index.tsx} (59%) diff --git a/package.json b/package.json index 488beb6..f05e88e 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { - "name": "invidious-client", - "displayName": "Invidious Client", + "name": "fouctube", + "displayName": "FoucTube", "license": "MIT", "scripts": { "dev": "next dev", diff --git a/src/components/Navbar/Drawer.tsx b/src/components/Navbar/Drawer.tsx new file mode 100644 index 0000000..e0d3386 --- /dev/null +++ b/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 ( + + + + {packageInfo.displayName} + + + + {pages.map((page, index) => ( + + + {page.icon} + + + + ))} + + + + + + + + + + + + + ); +}; + +export default MuiDrawer; diff --git a/src/components/Navbar.tsx b/src/components/Navbar/index.tsx similarity index 59% rename from src/components/Navbar.tsx rename to src/components/Navbar/index.tsx index 430d3d6..744bb76 100644 --- a/src/components/Navbar.tsx +++ b/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 ( <> toggleDrawer(false)} - > - - Yeet - - - - {pages.map((page, index) => ( - - {page.icon} - - - ))} - - - + drawerIsOpen={drawerIsOpen} + toggleDrawer={toggleDrawer} + pages={pages} + /> @@ -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)} > @@ -97,24 +80,33 @@ const Navbar: FC = () => { {packageInfo.displayName} - {pages.map((page, i) => ( - - - - - - ))} + + {pages.map((page, i) => ( + + + + + + ))} + + + + + +