You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
124 lines
2.7 KiB
124 lines
2.7 KiB
import packageInfo from "../../../package.json";
|
|
|
|
import Link from "next/link";
|
|
|
|
import { FC, useState } from "react";
|
|
|
|
import AppBar from "@mui/material/AppBar";
|
|
import Box from "@mui/material/Box";
|
|
import Button from "@mui/material/Button";
|
|
import IconButton from "@mui/material/IconButton";
|
|
import Toolbar from "@mui/material/Toolbar";
|
|
import Typography from "@mui/material/Typography";
|
|
|
|
import {
|
|
History,
|
|
Subscriptions,
|
|
Menu,
|
|
Whatshot,
|
|
PlaylistAddCheck,
|
|
Settings,
|
|
PlayCircleOutline
|
|
} from "@mui/icons-material";
|
|
|
|
import Drawer from "@components/Navbar/Drawer";
|
|
|
|
const Navbar: FC = () => {
|
|
const [drawerIsOpen, setDrawerState] = useState(false);
|
|
|
|
const toggleDrawer =
|
|
(open: boolean) => (event: React.KeyboardEvent | React.MouseEvent) => {
|
|
if (
|
|
event.type === "keydown" &&
|
|
((event as React.KeyboardEvent).key === "Tab" ||
|
|
(event as React.KeyboardEvent).key === "Shift")
|
|
) {
|
|
return;
|
|
}
|
|
|
|
setDrawerState(open);
|
|
};
|
|
|
|
const pages = [
|
|
{ name: "Trending", icon: <Whatshot />, link: "trending" },
|
|
{
|
|
name: "Subscriptions",
|
|
icon: <Subscriptions />,
|
|
link: "subscriptions"
|
|
},
|
|
{
|
|
name: "Watch History",
|
|
icon: <History />,
|
|
link: "history"
|
|
},
|
|
{
|
|
name: "Playlists",
|
|
icon: <PlaylistAddCheck />,
|
|
link: "playlists"
|
|
}
|
|
];
|
|
|
|
return (
|
|
<>
|
|
<Drawer
|
|
drawerIsOpen={drawerIsOpen}
|
|
toggleDrawer={toggleDrawer}
|
|
pages={pages}
|
|
/>
|
|
<Box sx={{ flexGrow: 1 }}>
|
|
<AppBar position="static" enableColorOnDark>
|
|
<Toolbar>
|
|
<IconButton
|
|
size="large"
|
|
edge="start"
|
|
color="inherit"
|
|
aria-label="menu"
|
|
sx={{ mr: 2, display: { md: "none", xs: "flex" } }}
|
|
onClick={toggleDrawer(true)}
|
|
>
|
|
<Menu />
|
|
</IconButton>
|
|
<Typography
|
|
variant="h6"
|
|
component="div"
|
|
sx={{ mr: 2, display: "flex", alignItems: "center" }}
|
|
>
|
|
<PlayCircleOutline sx={{ mr: 1 }} />
|
|
{packageInfo.displayName}
|
|
</Typography>
|
|
<Box sx={{ flexGrow: 1, display: { md: "flex", xs: "none" } }}>
|
|
{pages.map((page, i) => (
|
|
<Link key={i} href={"/" + page.link} passHref>
|
|
<Button
|
|
sx={{
|
|
my: 2,
|
|
color: "white",
|
|
display: "flex",
|
|
alignItems: "center"
|
|
}}
|
|
>
|
|
<Box sx={{ mr: 1, display: "flex", alignItems: "center" }}>
|
|
{page.icon}
|
|
</Box>
|
|
{page.name}
|
|
</Button>
|
|
</Link>
|
|
))}
|
|
</Box>
|
|
<Link href="/settings" passHref>
|
|
<IconButton
|
|
sx={{ display: { md: "flex", xs: "none" } }}
|
|
size="large"
|
|
>
|
|
<Settings />
|
|
</IconButton>
|
|
</Link>
|
|
</Toolbar>
|
|
</AppBar>
|
|
</Box>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default Navbar;
|