bobbanandClaude Sonnet 5
ada2e648e9
The flat 22-item menu becomes 7 entries: Dashboard and Secrets as plain links, and five groups. - Infrastructure: Servers, Proxmox, Synology, Docker, Tailscale - Network: DNS, Domains, IP Addresses, Consistency - Automation: Semaphore, Gitea - Operations: Maintenance, Generator - Administration: Integrations, Users, Sessions, Audit Log, Diagnostic Log, Settings Privacy moves to the sidebar footer beside the theme toggle and sign-out, since it's about the person rather than the homelab. Behaviour: - Groups open on demand. The group holding the current page is always open (deep routes count: /servers/7 keeps Servers active), and its header stays emphasised even if you close it. Which groups you leave open is remembered in the browser, and the menu still works if storage is blocked. - Role handling: pages a role can't use are dropped, an emptied group disappears, and a group reduced to a single page is drawn as that page's own link. A viewer therefore sees a plain Integrations link where an admin sees Administration, and an operator sees Administration with Integrations and Audit Log. - Toggling a group on mobile keeps the menu open; choosing a page closes it, as before. - Group headers are real buttons with aria-expanded. Front end only: one component, plus a small CSS rule tightening submenu rows so several open groups still fit on one screen. Routes, permissions and backend are unchanged. Verified in a browser with the real shell as admin, operator and viewer: structure per role, open/close and aria state, active highlighting on direct and deep routes, auto-open of the current page's group, state surviving a reload, and the mobile toggler behaviour. Not done: the attention dots on closed groups (deliberately held for a later step). Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
42 lines
923 B
CSS
42 lines
923 B
CSS
.loading-screen {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-height: 100vh;
|
|
color: var(--tblr-secondary);
|
|
}
|
|
|
|
.login-screen {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-height: 100vh;
|
|
background: var(--tblr-bg-surface-secondary, #f4f6fb);
|
|
}
|
|
|
|
.login-card {
|
|
width: 100%;
|
|
max-width: 22rem;
|
|
padding: 2rem;
|
|
text-align: center;
|
|
background: var(--tblr-bg-surface, #fff);
|
|
border-radius: var(--tblr-border-radius, 4px);
|
|
box-shadow: var(--tblr-box-shadow-card, 0 1px 3px rgba(0, 0, 0, 0.1));
|
|
}
|
|
|
|
.login-card h1 {
|
|
font-size: 1.25rem;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.login-card p {
|
|
color: var(--tblr-secondary);
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
/* Sidebar submenus: a little tighter than Tabler's dropdown rows, so several open groups still fit on one screen. */
|
|
.navbar-vertical .dropdown-menu .dropdown-item {
|
|
padding-top: 0.3rem;
|
|
padding-bottom: 0.3rem;
|
|
}
|