Phase 1 Complete by Claude Code

frontend/src/layout/Sidebar.jsx

@@ -1 +1,42 @@
-// TODO: Navigation menu
+import { NavLink } from "react-router-dom";
+import { useAuth } from "../auth/AuthContext";
+
+const navItems = [
+  { to: "/", label: "Dashboard", roles: null },
+  { to: "/melodies", label: "Melodies", roles: ["superadmin", "melody_editor", "viewer"] },
+  { to: "/devices", label: "Devices", roles: ["superadmin", "device_manager", "viewer"] },
+  { to: "/users", label: "Users", roles: ["superadmin", "user_manager", "viewer"] },
+  { to: "/mqtt", label: "MQTT", roles: ["superadmin", "device_manager", "viewer"] },
+];
+
+export default function Sidebar() {
+  const { hasRole } = useAuth();
+
+  const visibleItems = navItems.filter(
+    (item) => item.roles === null || hasRole(...item.roles)
+  );
+
+  return (
+    <aside className="w-56 bg-gray-900 text-white min-h-screen p-4">
+      <div className="text-xl font-bold mb-8 px-2">BellSystems</div>
+      <nav className="space-y-1">
+        {visibleItems.map((item) => (
+          <NavLink
+            key={item.to}
+            to={item.to}
+            end={item.to === "/"}
+            className={({ isActive }) =>
+              `block px-3 py-2 rounded-md text-sm transition-colors ${
+                isActive
+                  ? "bg-gray-700 text-white"
+                  : "text-gray-300 hover:bg-gray-800 hover:text-white"
+              }`
+            }
+          >
+            {item.label}
+          </NavLink>
+        ))}
+      </nav>
+    </aside>
+  );
+}