2022-04-01 16:45:30 +00:00
|
|
|
import React, { useState } from "react";
|
2022-01-05 06:31:08 +00:00
|
|
|
import NavStyle from "./nav.style";
|
2022-03-31 07:50:45 +00:00
|
|
|
import Link from "next/link";
|
2022-03-31 18:15:12 +00:00
|
|
|
import { useLanyard } from "react-use-lanyard";
|
2022-04-01 16:45:30 +00:00
|
|
|
import IconButton from "@mui/material/IconButton";
|
|
|
|
import Menu from "@mui/material/Menu";
|
|
|
|
import MenuItem from "@mui/material/MenuItem";
|
|
|
|
import MenuIcon from "@mui/icons-material/Menu";
|
2022-04-02 11:08:11 +00:00
|
|
|
import { discord_id } from "config";
|
2022-04-01 13:25:24 +00:00
|
|
|
|
2022-01-05 06:31:08 +00:00
|
|
|
const LINKS = [
|
2023-06-12 08:03:13 +00:00
|
|
|
{
|
|
|
|
title: "About",
|
|
|
|
href: "/about",
|
|
|
|
},
|
|
|
|
{
|
|
|
|
title: "Stats",
|
|
|
|
href: "/stats",
|
|
|
|
},
|
|
|
|
{
|
2023-07-03 17:30:03 +00:00
|
|
|
title: "Experience",
|
|
|
|
href: "/exps",
|
2023-06-12 08:03:13 +00:00
|
|
|
},
|
2023-11-27 14:36:33 +00:00
|
|
|
{
|
|
|
|
title: "Projects",
|
|
|
|
href: "/projects",
|
|
|
|
},
|
2023-06-12 08:03:13 +00:00
|
|
|
{
|
|
|
|
title: "Contact",
|
|
|
|
href: "/contact",
|
|
|
|
},
|
2022-01-05 06:31:08 +00:00
|
|
|
];
|
|
|
|
|
|
|
|
function Nav() {
|
2023-06-13 05:07:09 +00:00
|
|
|
const { loading, status } = useLanyard({
|
2023-06-12 08:03:13 +00:00
|
|
|
userId: discord_id,
|
|
|
|
socket: true,
|
|
|
|
});
|
2022-04-01 16:45:30 +00:00
|
|
|
|
2023-06-12 08:03:13 +00:00
|
|
|
const [anchorEl, setAnchorEl] = useState(null);
|
|
|
|
const open = Boolean(anchorEl);
|
|
|
|
const handleClick = (event) => {
|
|
|
|
setAnchorEl(event.currentTarget);
|
|
|
|
};
|
|
|
|
const handleClose = () => {
|
|
|
|
setAnchorEl(null);
|
|
|
|
};
|
2022-04-01 16:45:30 +00:00
|
|
|
|
2023-06-12 08:03:13 +00:00
|
|
|
return (
|
|
|
|
<NavStyle>
|
|
|
|
<Link href="/" passHref>
|
|
|
|
<div className="title">
|
|
|
|
<h1>echo "Bravo"</h1>
|
|
|
|
<div className="indicator">
|
|
|
|
<div
|
|
|
|
className={`circle ${
|
|
|
|
!loading &&
|
|
|
|
(status?.discord_status === "online" ||
|
|
|
|
status?.discord_status === "idle" ||
|
|
|
|
status?.discord_status === "dnd")
|
|
|
|
? "green"
|
|
|
|
: "red"
|
|
|
|
}`}
|
|
|
|
></div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</Link>
|
2022-03-31 18:15:12 +00:00
|
|
|
|
2023-06-12 08:03:13 +00:00
|
|
|
<div className="links">
|
|
|
|
{LINKS.map(({ title, href }, index) => (
|
2023-06-13 05:07:09 +00:00
|
|
|
<div key={title} className="link">
|
2023-06-12 08:03:13 +00:00
|
|
|
<Link href={href}>{title}</Link>
|
|
|
|
</div>
|
|
|
|
))}
|
|
|
|
</div>
|
|
|
|
{/* Mobile Menu */}
|
|
|
|
<div className={"menu"}>
|
|
|
|
<IconButton
|
|
|
|
id="nav-menu-button"
|
|
|
|
aria-controls={open ? "nav-menu" : undefined}
|
|
|
|
aria-haspopup="true"
|
|
|
|
aria-expanded={open ? "true" : undefined}
|
|
|
|
onClick={handleClick}
|
|
|
|
>
|
|
|
|
<MenuIcon />
|
|
|
|
</IconButton>
|
|
|
|
<Menu
|
|
|
|
id="nav-menu"
|
|
|
|
anchorEl={anchorEl}
|
|
|
|
open={open}
|
|
|
|
onClose={handleClose}
|
|
|
|
MenuListProps={{
|
|
|
|
"aria-labelledby": "nav-menu-button",
|
|
|
|
}}
|
|
|
|
>
|
|
|
|
{LINKS.map(({ title, href }, index) => (
|
2023-06-13 05:14:58 +00:00
|
|
|
<MenuItem key={title} onClick={handleClose}>
|
2023-06-12 08:03:13 +00:00
|
|
|
<Link href={href}>{title}</Link>
|
|
|
|
</MenuItem>
|
|
|
|
))}
|
|
|
|
</Menu>
|
|
|
|
</div>
|
|
|
|
</NavStyle>
|
|
|
|
);
|
2022-01-05 06:31:08 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
export default Nav;
|