bes-r/roosterwijs
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source
This commit is contained in:
bes-r 2026-06-15 23:03:23 +02:00
parent c49531f692
commit 9bb78681fc
3 changed files with 41 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
SYNC_PROBE.txt
View file

@ -1 +0,0 @@
sync probe

34
frontend/src/App.jsx
View file

@ -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">
{instellingenTabs.map((it) => <TabKnop key={it.path} it={it} compact />)}
<div
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>

10
frontend/src/styles.css
View file

@ -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;