Beginpagina naar Rooster; Instellingen als cog-menu (hover/klik)

SYNC_PROBE.txt

@@ -1 +0,0 @@
-sync probe

frontend/src/App.jsx

@@ -110,9 +110,10 @@ function LoginPage({ onLogin }) {
 /* ---------------------------------- Shell --------------------------------- */
 function Shell({ user, onLogout }) {
   const [modules, setModules] = useState([]);
-  const [active, setActive] = useState("/personen");
+  const [active, setActive] = useState("/rooster");
   const [error, setError] = useState(null);
   const [loading, setLoading] = useState(true);
+  const [cogOpen, setCogOpen] = useState(false);
 
   async function load() {
     setLoading(true);
@@ -198,8 +199,35 @@ function Shell({ user, onLogout }) {
         <nav className="top-tabs" aria-label="Hoofdnavigatie">
           {tabs.map((it) => <TabKnop key={it.path} it={it} />)}
           {instellingenTabs.length > 0 && (
-            <div className="top-tabs-settings" aria-label="Instellingen">
+            <div
-              {instellingenTabs.map((it) => <TabKnop key={it.path} it={it} compact />)}
+              className={cogOpen ? "cog-menu open" : "cog-menu"}
+              onMouseLeave={() => setCogOpen(false)}
+            >
+              <button
+                className="cog-btn"
+                onClick={() => setCogOpen((v) => !v)}
+                title="Instellingen"
+                aria-haspopup="true"
+                aria-expanded={cogOpen}
+              >
+                <span className="ico">⚙️</span>
+              </button>
+              <div className="cog-dropdown" role="menu">
+                {instellingenTabs.map((it) => {
+                  const pad = normaliseerPad(it.path);
+                  return (
+                    <button
+                      key={it.path}
+                      className={activePad === pad ? "cog-item active" : "cog-item"}
+                      role="menuitem"
+                      onClick={() => { setActive(pad); setCogOpen(false); }}
+                    >
+                      <span className="ico">{ICONS[it.icon] || "•"}</span>
+                      <span>{it.label}</span>
+                    </button>
+                  );
+                })}
+              </div>
             </div>
           )}
         </nav>

frontend/src/styles.css

@@ -24,6 +24,16 @@ body { margin: 0; font-family: system-ui, "Segoe UI", Roboto, sans-serif; color:
 .topbar-user { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
 .top-tabs { display: flex; align-items: center; gap: 6px; overflow-x: auto; scrollbar-width: thin; }
 .top-tabs-settings { display: flex; align-items: center; gap: 6px; margin-left: auto; padding-left: 10px; border-left: 1px solid var(--line); }
+
+/* Instellingen als cog-menu (popover via hover of klik) */
+.cog-menu { position: relative; margin-left: auto; }
+.cog-btn { display: inline-flex; align-items: center; min-height: 38px; background: transparent; border: 0; border-radius: 8px; padding: 0 10px; font-size: 18px; cursor: pointer; color: var(--muted); }
+.cog-btn:hover { background: var(--bg); color: var(--ink); }
+.cog-dropdown { display: none; position: absolute; right: 0; top: 100%; margin-top: 4px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.15); min-width: 200px; padding: 6px; z-index: 50; }
+.cog-menu:hover .cog-dropdown, .cog-menu.open .cog-dropdown { display: block; }
+.cog-item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: transparent; border: 0; border-radius: 8px; padding: 9px 10px; cursor: pointer; font: inherit; color: var(--ink); }
+.cog-item:hover { background: var(--bg); }
+.cog-item.active { background: var(--brand-soft); color: var(--brand); font-weight: 600; }
 .top-tab {
   display: inline-flex; align-items: center; gap: 8px;
   min-height: 38px; flex: 0 0 auto;