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

5
i18n/default_de.json
View File

@@ -977,6 +977,11 @@
"All API tokens will be revoked immediately.": "Alle API-Tokens werden sofort widerrufen.",
"API token default lifetime is invalid": "Standardlaufzeit für API-Tokens ist ungültig",
"API token max lifetime is invalid": "Maximale Laufzeit für API-Tokens ist ungültig",
"nav.logs.mail": "E-Mail",
"nav.audit.api": "API",
"nav.audit.system": "System",
"nav.audit.imports": "Importe",
"nav.audit.user_lifecycle": "Benutzer-Lifecycle",
"API audit": "API-Protokolle",
"API audit logs": "API-Protokolle",
"Request ID": "Request-ID",

5
i18n/default_en.json
View File

@@ -977,6 +977,11 @@
"All API tokens will be revoked immediately.": "All API tokens will be revoked immediately.",
"API token default lifetime is invalid": "API token default lifetime is invalid",
"API token max lifetime is invalid": "API token max lifetime is invalid",
"nav.logs.mail": "E-mail",
"nav.audit.api": "API",
"nav.audit.system": "System",
"nav.audit.imports": "Imports",
"nav.audit.user_lifecycle": "User lifecycle",
"API audit": "API logs",
"API audit logs": "API logs",
"Request ID": "Request ID",

8
modules/audit/module.php
View File

@@ -50,7 +50,7 @@ return [
[
'key' => 'audit-api-audit',
'group' => 'admin-logs',
'label' => 'API audit',
'label' => 'nav.audit.api',
'path' => 'audit/api-audit',
'permission' => 'audit.api.view',
'order' => 200,
@@ -58,7 +58,7 @@ return [
[
'key' => 'audit-system-audit',
'group' => 'admin-logs',
'label' => 'System audit logs',
'label' => 'nav.audit.system',
'path' => 'audit/system-audit',
'permission' => 'audit.system.view',
'order' => 210,
@@ -66,7 +66,7 @@ return [
[
'key' => 'audit-import-audit',
'group' => 'admin-logs',
'label' => 'Import logs',
'label' => 'nav.audit.imports',
'path' => 'audit/import-audit',
'permission' => 'audit.imports.view',
'order' => 220,
@@ -74,7 +74,7 @@ return [
[
'key' => 'audit-user-lifecycle-audit',
'group' => 'admin-logs',
'label' => 'User lifecycle logs',
'label' => 'nav.audit.user_lifecycle',
'path' => 'audit/user-lifecycle-audit',
'permission' => 'audit.user_lifecycle.view',
'order' => 230,

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