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

refactor(sidebar): drop per-group rainbow, add subtle active background

Browse Source 
Removes the nine hardcoded HSL overrides that gave each admin and
helpdesk nav group its own icon color and standardises on the tenant
accent (--app-primary) for every group, since the variable already had
that as its fallback. The active link state now also gets a subtle
background tint via a new --app-sidebar-active-bg token (12% accent
mixed with transparent) so the selected entry reads as more than just a
border-left and color shift; hover keeps a lighter 6% tint so it stays
distinct from active.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Felix Schneider
2026-04-25 19:05:55 +02:00
parent 05fa149273
commit b205ba1312
1 changed files with 10 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -11,7 +11,8 @@
--app-sidebar-summary-max-width: 142px; --app-sidebar-summary-max-width: 142px;
--app-sidebar-section-gap: 2rem; --app-sidebar-section-gap: 2rem;
--app-sidebar-section-space: 5px; --app-sidebar-section-space: 5px;
--app-sidebar-hover-bg: transparent; --app-sidebar-hover-bg: color-mix(in srgb, var(--app-primary) 6%, transparent);
--app-sidebar-active-bg: color-mix(in srgb, var(--app-primary) 12%, transparent);
} }
.app-sidebar .brand { .app-sidebar .brand {
@@ -55,37 +56,6 @@
top: -1px; 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;
}
/* Helpdesk module groups */
.app-sidebar-admin-group [data-details-key="helpdesk-lookup"] {
--app-nav-icon-color: #2563eb;
}
.app-sidebar-admin-group [data-details-key="helpdesk-monitoring"] {
--app-nav-icon-color: #059669;
}
.app-sidebar-admin-group [data-details-key="helpdesk-administration"] {
--app-nav-icon-color: #6b7280;
}
aside.app-sidebar li:has(> .app-empty-state) { aside.app-sidebar li:has(> .app-empty-state) {
padding-inline: 19px; padding-inline: 19px;
} }
@@ -210,11 +180,17 @@
overflow: hidden; overflow: hidden;
} }
.app-sidebar a:hover, .app-sidebar a:hover {
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-nav-icon-color, var(--app-primary));
}
.app-sidebar a.active, .app-sidebar a.active,
.app-sidebar .active > a { .app-sidebar .active > a {
color: var(--app-nav-icon-color, var(--app-primary)); color: var(--app-nav-icon-color, var(--app-primary));
background: var(--app-sidebar-hover-bg); background: var(--app-sidebar-active-bg);
border-left: var(--app-sidebar-border-width) solid border-left: var(--app-sidebar-border-width) solid
var(--app-nav-icon-color, var(--app-primary)); var(--app-nav-icon-color, var(--app-primary));
} }