blob: 64f0cf5a26e962610724902f09744ed4140fbb5d (
plain)
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
|
import { NavLink } from "react-router-dom";
const NAV_ITEMS = [
{ to: "/", label: "Overview", end: true },
{ to: "/preferences", label: "Role Preferences" },
{ to: "/oncall", label: "On-Call Schedule" },
{ to: "/ledger", label: "Ledger" },
];
export default function Sidebar({ record, open, onClose, onLogout }) {
const name = record?.RSI_Handle || record?.name || "Pilot";
return (
<>
{open && (
<div
className="sidebar-backdrop"
onClick={onClose}
aria-hidden="true"
/>
)}
<aside className={`sidebar${open ? " sidebar-open" : ""}`}>
<div className="sidebar-header">
<span className="sidebar-title">174BG Manager</span>
<button
type="button"
className="sidebar-close"
onClick={onClose}
aria-label="Close navigation"
>
✕
</button>
</div>
<p className="sidebar-user">{name}</p>
<nav className="sidebar-nav">
{NAV_ITEMS.map((item) => (
<NavLink
key={item.to}
to={item.to}
end={item.end}
className={({ isActive }) =>
"sidebar-link" + (isActive ? " sidebar-link-active" : "")
}
onClick={onClose}
>
{item.label}
</NavLink>
))}
</nav>
<button type="button" className="sidebar-logout" onClick={onLogout}>
Logout
</button>
</aside>
</>
);
}
|
