Sidebar

1
"use client";
2
3
import { useState } from "react";
4
import Link from "next/link";
5
import { usePathname } from "next/navigation";
6
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
7
import {
8
  faGauge,
9
  faUsers,
10
  faMapLocationDot,
11
  faCode,
12
  faXmark,
13
  faAnglesLeft,
14
  faAnglesRight,
15
  faGear,
16
  faClockRotateLeft,
17
  faRightFromBracket,
18
} from "@fortawesome/free-solid-svg-icons";
19
20
// 1. Define your nav links — each item is { label, icon, href }.
21
const navItems = [
22
  { label: "Dashboard", icon: faGauge, href: "/dashboard" },
23
  { label: "Users", icon: faUsers, href: "/users" },
24
  { label: "Map", icon: faMapLocationDot, href: "/map" },
25
];
26
27
// 2. SidebarNav: a title bar (brand + collapse toggle) over the nav links.
28
//    Pass hideHeader on mobile, where the drawer supplies its own top bar.
29
function SidebarNav({
30
  collapsed,
31
  onToggleCollapse,
32
  hideHeader,
33
}: {
34
  collapsed: boolean;
35
  onToggleCollapse: () => void;
36
  hideHeader?: boolean;
37
}) {
38
  const pathname = usePathname();
39
40
  return (
41
    <div className="flex h-full flex-col">
42
      {!hideHeader && (
43
        <div className="bg-panel-header flex h-12 shrink-0 items-center justify-between border-b px-4 shadow-sm">
44
          {!collapsed && (
45
            <Link
46
              href="/"
47
              className="text-sidebar-foreground flex items-center gap-2 text-sm font-bold tracking-tight"
48
            >
49
              <FontAwesomeIcon icon={faCode} className="text-primary h-4 w-4" />
50
              Turmerrific
51
            </Link>
52
          )}
53
          <button
54
            onClick={onToggleCollapse}
55
            aria-label={collapsed ? "Expand sidebar" : "Collapse sidebar"}
56
            className="text-sidebar-foreground/70 hover:text-sidebar-foreground transition-colors"
57
          >
58
            <FontAwesomeIcon icon={collapsed ? faAnglesRight : faAnglesLeft} className="h-3 w-3" />
59
          </button>
60
        </div>
61
      )}
62
63
      <nav className="flex-1 space-y-1 p-2">
64
        {navItems.map((item) => {
65
          const active = pathname === item.href;
66
          return (
67
            <Link
68
              key={item.href}
69
              href={item.href}
70
              title={item.label}
71
              className={`flex items-center gap-3 rounded-lg px-3 py-2 text-sm ${
72
                collapsed ? "justify-center" : ""
73
              } ${
74
                active
75
                  ? "bg-sidebar-primary text-sidebar-primary-foreground"
76
                  : "text-sidebar-foreground/70 hover:bg-sidebar-accent"
77
              }`}
78
            >
79
              <FontAwesomeIcon icon={item.icon} className="h-4 w-4 shrink-0" />
80
              {!collapsed && item.label}
81
            </Link>
82
          );
83
        })}
84
      </nav>
85
86
      <SidebarFooter collapsed={collapsed} />
87
    </div>
88
  );
89
}
90
91
// User menu: a trigger (avatar + name + role) that toggles a popup with
92
// Settings, Change Log, and a destructive Log Out — same as the demo.
93
function SidebarFooter({ collapsed }: { collapsed: boolean }) {
94
  const [open, setOpen] = useState(false);
95
96
  return (
97
    <div className="border-sidebar-border relative shrink-0 border-t p-2">
98
      {open && (
99
        <div
100
          role="menu"
101
          className="bg-card absolute bottom-full left-2 z-10 mb-1 min-w-[180px] overflow-hidden rounded-md border shadow-lg"
102
        >
103
          <Link
104
            href="/settings"
105
            role="menuitem"
106
            className="text-foreground hover:bg-muted flex items-center gap-2.5 px-3 py-2 text-sm transition-colors"
107
          >
108
            <FontAwesomeIcon icon={faGear} className="text-muted-foreground h-3.5 w-3.5" />
109
            Settings
110
          </Link>
111
          <Link
112
            href="/changelog"
113
            role="menuitem"
114
            className="text-foreground hover:bg-muted flex items-center gap-2.5 px-3 py-2 text-sm transition-colors"
115
          >
116
            <FontAwesomeIcon icon={faClockRotateLeft} className="text-muted-foreground h-3.5 w-3.5" />
117
            Change Log
118
          </Link>
119
          <div className="bg-border h-px" />
120
          <Link
121
            href="/login"
122
            role="menuitem"
123
            className="text-destructive hover:bg-destructive/10 flex items-center gap-2.5 px-3 py-2 text-sm transition-colors"
124
          >
125
            <FontAwesomeIcon icon={faRightFromBracket} className="text-destructive h-3.5 w-3.5" />
126
            Log Out
127
          </Link>
128
        </div>
129
      )}
130
131
      <button
132
        type="button"
133
        onClick={() => setOpen((v) => !v)}
134
        aria-haspopup="menu"
135
        aria-expanded={open}
136
        className={`hover:bg-sidebar-accent flex w-full items-center rounded-lg transition-colors ${
137
          collapsed ? "justify-center p-1.5" : "gap-3 px-2 py-1.5"
138
        }`}
139
      >
140
        <span className="bg-primary/20 flex h-7 w-7 shrink-0 items-center justify-center rounded-full">
141
          <span className="text-primary text-xs font-medium">D</span>
142
        </span>
143
        {!collapsed && (
144
          <span className="min-w-0 flex-1 text-left">
145
            <span className="text-sidebar-foreground block truncate text-sm font-medium">
146
              Demo User
147
            </span>
148
            <span className="text-sidebar-foreground/60 block truncate text-xs">HR Admin</span>
149
          </span>
150
        )}
151
      </button>
152
    </div>
153
  );
154
}
155
156
// 3. Desktop sidebar collapses between w-64 and w-12; mobile renders a
157
//    full-screen drawer toggled by mobileOpen (its own top bar + close button).
158
function Sidebar({ mobileOpen, onClose }: { mobileOpen: boolean; onClose: () => void }) {
159
  const [collapsed, setCollapsed] = useState(false);
160
  const toggleCollapse = () => setCollapsed((v) => !v);
161
162
  return (
163
    <>
164
      {/* Desktop */}
165
      <aside
166
        className={`bg-sidebar hidden shrink-0 border-r transition-[width] md:block ${
167
          collapsed ? "w-12" : "w-64"
168
        }`}
169
      >
170
        <SidebarNav collapsed={collapsed} onToggleCollapse={toggleCollapse} />
171
      </aside>
172
173
      {/* Mobile — full-screen drawer */}
174
      {mobileOpen && (
175
        <aside className="bg-sidebar fixed inset-0 z-[60] flex flex-col md:hidden">
176
          <div className="bg-panel-header flex h-12 shrink-0 items-center justify-between border-b px-4 shadow-sm">
177
            <span className="text-sidebar-foreground flex items-center gap-2 text-xl font-bold tracking-tight">
178
              <FontAwesomeIcon icon={faCode} className="text-primary" />
179
              Turmerrific
180
            </span>
181
            <button onClick={onClose} aria-label="Close menu" className="text-sidebar-foreground/70">
182
              <FontAwesomeIcon icon={faXmark} className="h-5 w-5" />
183
            </button>
184
          </div>
185
          <div className="flex-1 overflow-y-auto">
186
            <SidebarNav collapsed={false} onToggleCollapse={toggleCollapse} hideHeader />
187
          </div>
188
        </aside>
189
      )}
190
    </>
191
  );
192
}