94 lines
2.8 KiB
JavaScript
94 lines
2.8 KiB
JavaScript
import { Button, Drawer, List, ListItem } from "@mui/material"
|
|
import { useEffect, useState } from "react"
|
|
import { useNavigate } from "react-router-dom";
|
|
|
|
import MenuIcon from '@material-ui/icons/Menu';
|
|
|
|
export default function Navbar() {
|
|
const [open, setOpen] = useState(false);
|
|
const [selected, setSelected] = useState(null);
|
|
|
|
const navigate = useNavigate();
|
|
|
|
useEffect(() => {
|
|
switch (selected) {
|
|
case 0:
|
|
navigate('/');
|
|
break;
|
|
case 1:
|
|
navigate('/about-me');
|
|
break;
|
|
case 2:
|
|
navigate('/projects');
|
|
break;
|
|
case 3:
|
|
navigate('/technologies');
|
|
break;
|
|
case 4:
|
|
navigate('/links');
|
|
break;
|
|
case 5:
|
|
navigate('/creative-works');
|
|
break;
|
|
default:
|
|
navigate('/');
|
|
break;
|
|
}
|
|
}, [selected, navigate]);
|
|
|
|
return (
|
|
<header className="app-navbar">
|
|
<div className="navbar-left">
|
|
<a href="/" className="my-name">Mikayla Dobson</a>
|
|
<h2>Web Design Contractor</h2>
|
|
</div>
|
|
|
|
<div className="navbar-right">
|
|
<Button onClick={() => setOpen(!open)}>
|
|
<MenuIcon />
|
|
</Button>
|
|
</div>
|
|
|
|
<Drawer anchor="right" open={open} onClose={() => setOpen(false)}>
|
|
<List component="nav">
|
|
|
|
<ListItem button
|
|
selected={selected===0}
|
|
onClick={() => setSelected(0)}>
|
|
Home
|
|
</ListItem>
|
|
|
|
<ListItem button
|
|
selected={selected===1}
|
|
onClick={() => setSelected(1)}>
|
|
About me
|
|
</ListItem>
|
|
|
|
<ListItem button
|
|
selected={selected===2}
|
|
onClick={() => setSelected(2)}>
|
|
My Projects
|
|
</ListItem>
|
|
|
|
<ListItem button
|
|
selected={selected===3}
|
|
onClick={() => setSelected(3)}>
|
|
My Technologies
|
|
</ListItem>
|
|
|
|
<ListItem button
|
|
selected={selected===4}
|
|
onClick={() => setSelected(4)}>
|
|
Links
|
|
</ListItem>
|
|
|
|
<ListItem button
|
|
selected={selected===5}
|
|
onClick={() => setSelected(5)}>
|
|
My Creative Work
|
|
</ListItem>
|
|
</List>
|
|
</Drawer>
|
|
</header>
|
|
)
|
|
} |