93 lines
3.3 KiB
JavaScript
93 lines
3.3 KiB
JavaScript
// React
|
|
import { useState } from "react";
|
|
import { Link } from "react-router-dom";
|
|
import AppBar from "@mui/material/AppBar";
|
|
import Drawer from "@mui/material/Drawer";
|
|
import Box from "@mui/material/Box";
|
|
import Typography from "@mui/material/Typography";
|
|
import Toolbar from "@mui/material/Toolbar";
|
|
import IconButton from "@mui/material/IconButton";
|
|
import Button from "@mui/material/Button";
|
|
import ListItemText from "@mui/material/ListItemText";
|
|
import List from "@mui/material/List";
|
|
import ListItemButton from "@mui/material/ListItemButton";
|
|
import useMediaQuery from "@mui/material/useMediaQuery";
|
|
import { useTheme } from "@mui/material/styles";
|
|
|
|
import MenuIcon from "@mui/icons-material/Menu";
|
|
|
|
const links = [
|
|
// { url: "/", title: "Home" },
|
|
{ url: "/#about", title: "About" },
|
|
{ url: "/#portfolio", title: "Portfolio" },
|
|
// { url: "/#achievements", title: "Achievements" },
|
|
{ url: "/#contact", title: "Contact" },
|
|
{ url: "/resume", title: "Resume" },
|
|
];
|
|
|
|
export default function Navbar() {
|
|
const theme = useTheme();
|
|
const [miniNavOpen, setMiniNavOpen] = useState();
|
|
const miniNav = useMediaQuery(theme.breakpoints.down("md"));
|
|
const toggleMiniNavOpen = () => setMiniNavOpen(!miniNavOpen);
|
|
|
|
return (
|
|
<AppBar position="fixed" sx={{ bgcolor: "black" }}>
|
|
<Drawer open={miniNavOpen} anchor="top" onClose={toggleMiniNavOpen}>
|
|
<AppBar position="fixed" sx={{ bgcolor: "black" }} />
|
|
<Box sx={{ margin: "0 auto", width: "100%" }}>
|
|
<List>
|
|
<ListItemButton onClick={toggleMiniNavOpen}>
|
|
{" "}
|
|
<ListItemText sx={{ textAlign: "center" }}>Back</ListItemText>
|
|
</ListItemButton>
|
|
{links.map((l, i) => (
|
|
<ListItemButton key={i} component={Link} to={l.url} onClick={toggleMiniNavOpen}>
|
|
<ListItemText
|
|
sx={{ textAlign: "center" }}
|
|
primary={l.title.charAt(0).toUpperCase() + l.title.slice(1)}
|
|
/>
|
|
</ListItemButton>
|
|
))}
|
|
</List>
|
|
</Box>
|
|
</Drawer>
|
|
<Box
|
|
sx={{
|
|
flexGrow: 1,
|
|
margin: "0 auto",
|
|
width: "100%",
|
|
maxWidth: 1200,
|
|
display: "block",
|
|
}}
|
|
>
|
|
<Toolbar disableGutters sx={{ display: "flex", padding: "0 10px" }}>
|
|
<a href="/">
|
|
<IconButton size="large" edge="start" color="inherit" aria-label="menu" sx={{ mr: -0.5 }}>
|
|
<img src="/images/logo-micro.png" width="40" height="40" />
|
|
</IconButton>
|
|
</a>
|
|
<Typography variant="h6" noWrap component="div">
|
|
Dunemask
|
|
</Typography>
|
|
{miniNav && (
|
|
<Box sx={{ marginLeft: "auto" }}>
|
|
<IconButton size="large" edge="start" color="inherit" aria-label="menu" onClick={toggleMiniNavOpen}>
|
|
<MenuIcon />
|
|
</IconButton>
|
|
</Box>
|
|
)}
|
|
{!miniNav && (
|
|
<Box sx={{ marginLeft: "auto" }}>
|
|
{links.map((l, i) => (
|
|
<Link key={i} to={l.url} style={{ textDecoration: "none" }}>
|
|
<Button sx={{ color: "white" }}>{l.title}</Button>
|
|
</Link>
|
|
))}
|
|
</Box>
|
|
)}
|
|
</Toolbar>
|
|
</Box>
|
|
</AppBar>
|
|
);
|
|
}
|