1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
|
import { useState } from "react";
import { Link } from "react-router-dom";
import {
AppBar,
Box,
Button,
Drawer,
IconButton,
List,
ListItem,
ListItemButton,
ListItemText,
Toolbar,
} from "@mui/material";
import { Menu } from "@mui/icons-material";
export default function NavBar({ isLoggedIn, pages, logout }) {
const drawerWidth = 200;
const [mobileOpen, setMobileOpen] = useState(false);
const handleDrawerToggle = () => {
setMobileOpen(!mobileOpen);
};
return (
isLoggedIn && (
<Box sx={{ display: "flex" }}>
<AppBar component="nav" sx={{ position: "initial" }}>
<Toolbar>
<IconButton
color="inherit"
aria-label="open drawer"
edge="start"
onClick={handleDrawerToggle}
sx={{ mr: 2, display: { sm: "none" } }}
>
<Menu />
</IconButton>
<Box sx={{ display: { xs: "none", sm: "block" } }}>
{pages.map(
(p) =>
p.hidden || (
<Link
key={p.link}
to={p.link}
style={{ textDecorationLine: "none" }}
>
<Button
key={p.label}
sx={{ textDecorationLine: "none", color: "#ffffff" }}
>
{p.label}
</Button>
</Link>
),
)}
<Button onClick={logout} sx={{ color: "#ffffff" }}>
Logout
</Button>
</Box>
</Toolbar>
</AppBar>
<Box component="nav">
<Drawer
sx={{
width: drawerWidth,
flexShrink: 0,
"& .MuiDrawer-paper": {
width: drawerWidth,
boxSizing: "border-box",
},
display: { xs: "block", sm: "none" },
}}
variant="temporary"
anchor="left"
open={mobileOpen}
onClose={handleDrawerToggle}
ModalProps={{
keepMounted: true,
}}
>
<Box onClick={handleDrawerToggle} sx={{ textAlign: "center" }}>
<List>
{pages.map(({ label, link, hidden }) =>
hidden ? (
<div key={link}></div>
) : (
<ListItem key={link} disablePadding>
<Link
to={link}
style={{ textDecorationLine: "none", width: "100%" }}
>
<ListItemButton
key={label}
sx={{
width: "100%",
color: "primary.main",
textAlign: "left",
}}
>
<ListItemText
primary={label}
sx={{ width: "100%" }}
/>
</ListItemButton>
</Link>
</ListItem>
),
)}
<ListItem disablePadding>
<ListItemButton
onClick={logout}
sx={{ width: "100%", color: "primary.main" }}
>
<ListItemText primary={"Logout"} />
</ListItemButton>
</ListItem>
</List>
</Box>
</Drawer>
</Box>
</Box>
)
);
}
|
