96 lines
2.7 KiB
TypeScript
96 lines
2.7 KiB
TypeScript
import AppBar from "@mui/material/AppBar";
|
|
import Box from "@mui/material/Box";
|
|
import Toolbar from "@mui/material/Toolbar";
|
|
import Typography from "@mui/material/Typography";
|
|
import IconButton from "@mui/material/IconButton";
|
|
import { useEffect, useState } from "react";
|
|
import NavMenu from "./NavMenu";
|
|
import { Icon } from "@iconify/react";
|
|
import { useRouter } from "next/router";
|
|
import NavLink from "@/components/NavLink";
|
|
import Image from "next/image";
|
|
|
|
interface Props {
|
|
darkMode: boolean;
|
|
switchDarkMode: () => void;
|
|
}
|
|
|
|
export default function NavBar({ darkMode, switchDarkMode }: Props) {
|
|
const [drawerOpen, setDrawerOpen] = useState(false);
|
|
const router = useRouter();
|
|
|
|
useEffect(() => {
|
|
setDrawerOpen(false);
|
|
}, [router.pathname]);
|
|
|
|
return (
|
|
<Box sx={{ flexGrow: 1, display: "flex" }}>
|
|
<AppBar
|
|
position="static"
|
|
sx={{ zIndex: (theme) => theme.zIndex.drawer + 1 }}
|
|
enableColorOnDark
|
|
>
|
|
<Toolbar>
|
|
<IconButton
|
|
size="large"
|
|
edge="start"
|
|
color="inherit"
|
|
aria-label="menu"
|
|
sx={{ mr: "min(0.5vw, 0.6rem)" }}
|
|
onClick={() => setDrawerOpen((val) => !val)}
|
|
>
|
|
<Icon icon="mdi:menu" />
|
|
</IconButton>
|
|
<Image
|
|
src="/favicon-32x32.png"
|
|
alt="FreeChess logo"
|
|
width={32}
|
|
height={32}
|
|
/>
|
|
<NavLink href="/">
|
|
<Typography
|
|
variant="h6"
|
|
component="div"
|
|
sx={{
|
|
flexGrow: 1,
|
|
ml: 1,
|
|
fontSize: { xs: "1rem", sm: "1.25rem" },
|
|
}}
|
|
>
|
|
Free Chess
|
|
</Typography>
|
|
</NavLink>
|
|
<IconButton
|
|
color="inherit"
|
|
onClick={() => window.open("https://discord.gg/Yr99abAcUr")}
|
|
>
|
|
<Icon icon="ri:discord-fill" />
|
|
</IconButton>
|
|
<IconButton
|
|
color="inherit"
|
|
sx={{ ml: "min(0.6rem, 0.8vw)" }}
|
|
onClick={() =>
|
|
window.open("https://github.com/GuillaumeSD/freechess")
|
|
}
|
|
>
|
|
<Icon icon="mdi:github" />
|
|
</IconButton>
|
|
<IconButton
|
|
sx={{ ml: "min(0.6rem, 0.8vw)" }}
|
|
onClick={switchDarkMode}
|
|
color="inherit"
|
|
edge="end"
|
|
>
|
|
{darkMode ? (
|
|
<Icon icon="mdi:brightness-7" />
|
|
) : (
|
|
<Icon icon="mdi:brightness-4" />
|
|
)}
|
|
</IconButton>
|
|
</Toolbar>
|
|
</AppBar>
|
|
<NavMenu open={drawerOpen} onClose={() => setDrawerOpen(false)} />
|
|
</Box>
|
|
);
|
|
}
|