🚧 Update menu looks and behaviour

frontend/src/App.tsx

@@ -1,3 +1,4 @@
+import { useState } from "react";
 import { NavLink, Navigate, Route, Routes, useLocation } from "react-router-dom";
 import { useQuery } from "@tanstack/react-query";
 import { useAuth } from "./auth";
@@ -83,15 +84,49 @@ function RestartIndicator() {
 
 function Layout({ children }: { children: React.ReactNode }) {
   const { session, logout } = useAuth();
+  const location = useLocation();
+  // Exactly ONE group is open at a time (null = all closed). The group
+  // containing the ACTIVE page auto-opens, so navigation (including the
+  // restart-needed indicator link) always reveals its section.
+  const [openSection, setOpenSection] = useState<string | null>(null);
+
+  const activeSection = NAV_SECTIONS.find((section) =>
+    section.items.some(
+      (item) =>
+        item.to &&
+        item.to.split("#")[0] === location.pathname,
+    ),
+  );
+
   return (
     <div className="layout">
       <aside className="sidebar">
         <h1>MQTT Management</h1>
         <RestartIndicator />
         <nav>
-          {NAV_SECTIONS.map((section) => (
-            <div key={section.title} className="nav-section">
-              <h2>{section.title}</h2>
+          {NAV_SECTIONS.map((section) => {
+            const isActive = activeSection?.title === section.title;
+            const isOpen =
+              openSection === section.title ||
+              (isActive && openSection === null);
+            return (
+              <div
+                key={section.title}
+                className={`nav-section${isOpen ? " open" : ""}`}
+              >
+                <button
+                  onClick={() =>
+                    setOpenSection(
+                      openSection === section.title ? null : section.title,
+                    )
+                  }
+                  aria-expanded={isOpen}
+                >
+                  {section.title}
+                  <span className="chevron">▸</span>
+                </button>
+                <div className="nav-items">
+                  <div>
                     {section.items.map((item) =>
                       item.to ? (
                         <NavLink key={item.label} to={item.to}>
@@ -109,7 +144,10 @@ function Layout({ children }: { children: React.ReactNode }) {
                       ),
                     )}
                   </div>
-          ))}
+                </div>
+              </div>
+            );
+          })}
         </nav>
         <p style={{ marginTop: "2rem", fontSize: "0.8rem", opacity: 0.7 }}>
           {session?.username} ({session?.role})

frontend/src/styles.css

@@ -13,16 +13,50 @@ body {
   color: #1f2933;
 }
 
-.layout {
-  display: grid;
-  grid-template-columns: 220px 1fr;
-  min-height: 100vh;
+/* --- Thin scrollbars everywhere ---------------------------------------- */
+* {
+  scrollbar-width: thin;          /* Firefox */
+  scrollbar-color: #9aa5b1 transparent;
 }
 
+*::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+*::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+*::-webkit-scrollbar-thumb {
+  background: #9aa5b1;
+  border-radius: 3px;
+}
+
+*::-webkit-scrollbar-thumb:hover {
+  background: #7b8794;
+}
+
+.layout {
+  display: grid;
+  grid-template-columns: 240px 1fr;
+  height: 100vh;
+  overflow: hidden; /* the two columns scroll independently */
+}
+
+/* The menu stays put while the page scrolls: the sidebar is its own
+   scroll area (long menus scroll internally, never with the viewport). */
 .sidebar {
   background: #1f2933;
   color: #f0f4f8;
   padding: 1.25rem;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+}
+
+.sidebar nav {
+  flex: 1; /* user info + sign out stay at the bottom */
 }
 
 .sidebar h1 {
@@ -39,19 +73,64 @@ body {
   text-decoration: none;
 }
 
-/* --- Grouped navigation (spec section 57) --- */
+/* --- Collapsible accordion navigation (spec section 57) ------------------- */
 .nav-section {
-  margin-bottom: 0.9rem;
+  margin-bottom: 0.4rem;
 }
 
-.nav-section h2 {
-  font-size: 0.68rem;
+/* Header button: always visible, opens/closes its group. */
+.nav-section > button {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: space-between;
+  background: transparent;
+  border: none;
+  color: #9aa5b1;
+  font-size: 0.72rem;
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.07em;
-  color: #7b8794;
-  margin: 0.5rem 0 0.25rem;
-  padding-left: 0.6rem;
+  text-align: left;
+  padding: 0.5rem 0.6rem;
+  margin: 0.15rem 0;
+  border-radius: 6px;
+  cursor: pointer;
+}
+
+.nav-section > button:hover {
+  color: #f0f4f8;
+  background: #323f4b;
+}
+
+/* Chevron rotates while the group is open — smooth open/close cue. */
+.nav-section > button .chevron {
+  display: inline-block;
+  transition: transform 0.25s ease;
+  font-size: 0.65rem;
+}
+
+.nav-section.open > button .chevron {
+  transform: rotate(90deg);
+}
+
+/* The item list animates its height. grid-template-rows is the modern
+   height-animation trick: 0fr -> 1fr transitions smoothly without
+   hardcoding pixel heights. */
+.nav-items {
+  display: grid;
+  grid-template-rows: 0fr;
+  transition: grid-template-rows 0.25s ease;
+}
+
+.nav-section.open .nav-items {
+  grid-template-rows: 1fr;
+}
+
+/* grid-row child that actually clips the content. */
+.nav-items > div {
+  overflow: hidden;
+  min-height: 0;
 }
 
 /* Unimplemented pages: greyed out, not clickable, tooltip explains why. */
@@ -68,6 +147,17 @@ body {
   opacity: 0.55;
 }
 
+/* The main viewport scrolls independently of the fixed menu. */
+.content {
+  padding: 1.5rem 2rem;
+  max-width: 1100px;
+  overflow-y: auto;
+}
+
+.content h2 {
+  margin-top: 0;
+}
+
 /* Anchor targets inside pages: keep headings clear of the viewport top. */
 h3[id] {
   scroll-margin-top: 1rem;