fa/breadcrumb-the-shire
1
0
Fork 1
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

refactor(ui): polish admin sidebar nav groups and audit labels

Browse Source 
Use short i18n keys for audit nav labels (nav.audit.*) with translations
in both language files. Restyle admin sidebar group icons with colored
pill backgrounds per group. Adjust details summary line-height and
active-state border color to use group icon color.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Felix Schneider
2026-03-26 15:09:55 +01:00
parent 5b2ea6bf27
commit a4eb1c6967
5 changed files with 62 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
web/css/layout/app-shell.css
View File

@@ -2141,10 +2141,11 @@
}
details summary {
line-height: var(--leading-none);
line-height: var(--leading-tight);
list-style-type: none;
cursor: pointer;
transition: color var(--app-transition);
vertical-align: middle;
}
details summary:not([role]) {

56
web/css/layout/app-sidebar.css
View File

@@ -37,10 +37,42 @@
}
.app-sidebar-group.app-sidebar-admin-group details summary i {
font-size: 10px; /* icon-font metric — intentional px */
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 10px;
width: 1.45rem;
height: 1.45rem;
border-radius: 6px;
background: color-mix(
in srgb,
var(--app-nav-icon-color, var(--app-primary)) 15%,
transparent
);
color: var(--app-nav-icon-color, var(--app-primary));
margin-right: 0.1rem;
position: relative;
top: -2px;
margin-right: 3px;
top: -1px;
}
/* Per-group icon colors */
.app-sidebar-admin-group [data-details-key="admin-organization"] {
--app-nav-icon-color: #2563eb;
}
.app-sidebar-admin-group [data-details-key="admin-roles-permissions"] {
--app-nav-icon-color: #7c3aed;
}
.app-sidebar-admin-group [data-details-key="admin-automation"] {
--app-nav-icon-color: #0891b2;
}
.app-sidebar-admin-group [data-details-key="admin-monitoring"] {
--app-nav-icon-color: #059669;
}
.app-sidebar-admin-group [data-details-key="admin-logs"] {
--app-nav-icon-color: #d97706;
}
.app-sidebar-admin-group [data-details-key="admin-system"] {
--app-nav-icon-color: #6b7280;
}
aside.app-sidebar li:has(> .app-empty-state) {
@@ -191,9 +223,9 @@
.app-sidebar a:hover,
.app-sidebar a.active,
.app-sidebar .active > a {
color: var(--app-primary);
color: var(--app-nav-icon-color, var(--app-primary));
background: var(--app-sidebar-hover-bg);
border-left: var(--app-sidebar-border-width) solid var(--app-primary);
border-left: var(--app-sidebar-border-width) solid var(--app-nav-icon-color, var(--app-primary));
}
aside.app-sidebar ul,
@@ -230,10 +262,7 @@
margin: 0;
}
.app-sidebar
.app-sidebar-group
details[open]
> summary:not([role]) {
.app-sidebar .app-sidebar-group details[open] > summary:not([role]) {
margin-bottom: 7px;
}
@@ -256,6 +285,10 @@
max-width: var(--app-sidebar-summary-max-width);
overflow: hidden;
white-space: nowrap;
font-size: var(--text-base);
font-weight: var(--font-normal);
position: relative;
top: 2px;
}
.app-sidebar #aside-panel-admin > ul {
@@ -265,10 +298,13 @@
}
.app-sidebar #aside-panel-admin .app-sidebar-admin-group {
margin-bottom: 10px;
width: 100%;
}
.app-sidebar #aside-panel-admin .app-sidebar-admin-group:last-child {
margin-bottom: 0;
}
.app-sidebar
#aside-panel-admin
.app-sidebar-admin-group