tbh/breadcrumb-the-shire
1
0
Fork 0
forked from fa/breadcrumb-the-shire
Code Pull Requests Activity

feat(layout): migrate to full-width topbar with mobile drawer navigation

Browse Source 
Move topbar outside the grid container as a standalone sticky header
(Shopify/Stripe pattern). Sidebar and icon bar use position:sticky
relative to topbar height. Mobile uses drawer pattern with backdrop,
focus trap, ESC close, and scroll lock. Tenant branding moved from
sidebar header into the topbar.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Felix Schneider
2026-04-06 22:21:39 +02:00
parent fe88e748a3
commit a3f270408b
13 changed files with 543 additions and 340 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
i18n/default_de.json
View File

@@ -1435,5 +1435,7 @@
"Remove selected file": "Ausgewaehlte Datei entfernen",
"Replace": "Ersetzen",
"Delete this image?": "Dieses Bild löschen?",
"Current image": "Aktuelles Bild"
"Current image": "Aktuelles Bild",
"Open navigation": "Navigation öffnen",
"Close navigation": "Navigation schließen"
}

4
i18n/default_en.json
View File

@@ -1435,5 +1435,7 @@
"Remove selected file": "Remove selected file",
"Replace": "Replace",
"Delete this image?": "Delete this image?",
"Current image": "Current image"
"Current image": "Current image",
"Open navigation": "Open navigation",
"Close navigation": "Close navigation"
}

3
templates/default.phtml
View File

@@ -320,12 +320,12 @@ $componentPageConfig['moduleRuntimeComponents'] = $moduleRuntimeComponents;
<body>
<a class="app-skip-link" href="#app-main-content"><?php e(t('Skip to main content')); ?></a>
<?php require __DIR__ . '/partials/app-topbar.phtml'; ?>
<div class="app-container">
<?php require __DIR__ . '/partials/app-main-aside-icon-bar.phtml'; ?>
<?php require __DIR__ . '/partials/app-main-aside.phtml'; ?>
<div class="app-main">
<main>
<?php require __DIR__ . '/partials/app-topbar.phtml'; ?>
<div id="app-main-content" class="app-main-content" tabindex="-1">
<?php Buffer::get('html'); ?>
</div>
@@ -333,6 +333,7 @@ $componentPageConfig['moduleRuntimeComponents'] = $moduleRuntimeComponents;
<?php require __DIR__ . '/partials/app-footer.phtml'; ?>
</div>
</div>
<div class="app-drawer-backdrop" aria-hidden="true"></div>
<script src="<?php e(assetVersion('vendor/fslightbox/fslightbox.js')); ?>"></script>
<?php require __DIR__ . '/partials/app-confirm-dialog.phtml'; ?>

43
templates/partials/app-main-aside.phtml
View File

@@ -25,9 +25,8 @@ $docsDefaultPath = 'admin/docs/' . $docsDefaultSlug;
$hasOrganization = $canViewTenants || $canViewDepartments || $canViewUsers;
$hasUsersSection = $canViewRoles || $canViewPermissions;
$hasAutomationSection = $canViewImports || $canViewJobs;
$hasMonitoringSection = $canViewStats;
$hasLogsSection = $canViewMailLog;
$hasSystemSection = $canViewSettings;
$hasSystemSection = $canViewSettings || $canViewStats;
$hasAdminPanel = layoutHasAdminPanel($layoutAuth);
// Declarative nav config for admin panel groups
@@ -105,21 +104,6 @@ $adminNavGroups = [
],
],
],
[
'key' => 'admin-monitoring',
'label' => t('Monitoring'),
'icon' => 'bi-graph-up',
'visible' => $hasMonitoringSection,
'items' => [
[
'label' => t('Statistics'),
'path' => 'admin/stats',
'active' => navActive('admin/stats', true),
'visible' => $canViewStats,
'withTenant' => false,
],
],
],
[
'key' => 'admin-logs',
'label' => t('Logs'),
@@ -148,6 +132,13 @@ $adminNavGroups = [
'visible' => $canViewSettings,
'withTenant' => false,
],
[
'label' => t('Statistics'),
'path' => 'admin/stats',
'active' => navActive('admin/stats', true),
'visible' => $canViewStats,
'withTenant' => false,
],
],
],
];
@@ -281,24 +272,6 @@ $moduleSlots = is_array($layoutNav['moduleSlots'] ?? null) ? $layoutNav['moduleS
$modulePanelSlots = is_array($moduleSlots['aside.tab_panel'] ?? null) ? $moduleSlots['aside.tab_panel'] : [];
?>
<aside class="app-sidebar" id="app-sidebar" data-app-component="sidebar-toggle">
<?php if ($currentTenant): ?>
<div class="app-sidebar-tenant-logo">
<a href="<?php e(lurl('')); ?>">
<?php if ($hasTenantAvatar): ?>
<img src="auth/tenant-avatar-file?uuid=<?php e($tenantUuid); ?>&size=256" alt="<?php e($tenantName); ?>"
title="<?php e($tenantName); ?>">
<?php else: ?>
<div class="app-sidebar-tenant-name">
<?php e($tenantName); ?>
</div>
<?php endif; ?>
</a>
<button type="button" class="app-sidebar-tenant-toggle" data-sidebar-toggle
aria-label="<?php e(t('Toggle Sidebar')); ?>">
<i class="bi bi-list"></i>
</button>
</div>
<?php endif; ?>
<div id="app-sidebar-panels" class="app-sidebar-panels">
<nav id="aside-panel-explorer" class="app-sidebar-panel" data-aside-panel="explorer"
data-aside-title="<?php e(t('Explorer')); ?>" role="tabpanel" aria-labelledby="aside-tab-explorer"

67
templates/partials/app-topbar.phtml
View File

@@ -11,6 +11,13 @@ $theme = currentTheme();
$csrfKey = Session::$csrfSessionKey;
$csrfToken = $_SESSION[$csrfKey] ?? '';
// Tenant branding data (from $layoutNav, same source as app-main-aside.phtml)
$layoutNav = is_array($layoutNav ?? null) ? $layoutNav : [];
$tenantAvatar = is_array($layoutNav['tenantAvatar'] ?? null) ? $layoutNav['tenantAvatar'] : [];
$brandTenantUuid = trim((string) ($tenantAvatar['uuid'] ?? ''));
$brandTenantName = trim((string) ($tenantAvatar['name'] ?? ''));
$brandHasTenantAvatar = !empty($tenantAvatar['hasAvatar']);
// Tenant switcher data
$currentTenant = $_SESSION['current_tenant'] ?? null;
$currentTenantId = (int) ($currentTenant['id'] ?? 0);
@@ -30,6 +37,22 @@ $moduleTopbarSlots = is_array($moduleSlots['topbar.right_item'] ?? null) ? $modu
<header class="app-header">
<nav class="app-topbar">
<div class="app-topbar-left">
<button type="button" class="app-topbar-hamburger" data-sidebar-toggle
aria-expanded="false"
aria-label="<?php e(t('Open navigation')); ?>"
data-open-label="<?php e(t('Open navigation')); ?>"
data-close-label="<?php e(t('Close navigation')); ?>">
<i class="bi bi-list" aria-hidden="true"></i>
</button>
<a href="<?php e(lurl('')); ?>" class="app-topbar-brand">
<?php if ($brandHasTenantAvatar): ?>
<img src="auth/tenant-avatar-file?uuid=<?php e($brandTenantUuid); ?>&amp;size=256" alt="<?php e($brandTenantName); ?>">
<?php elseif ($brandTenantName !== ''): ?>
<span class="app-topbar-brand-name"><?php e($brandTenantName); ?></span>
<?php else: ?>
<span class="app-topbar-brand-name"><?php e(appTitle()); ?></span>
<?php endif; ?>
</a>
<?php
if (is_array($breadcrumbs ?? null) && $breadcrumbs !== []) {
require __DIR__ . '/app-breadcrumb.phtml';
@@ -45,11 +68,27 @@ $moduleTopbarSlots = is_array($moduleSlots['topbar.right_item'] ?? null) ? $modu
</button>
</div>
<ul class="app-topbar-right">
<?php foreach ($moduleTopbarSlots as $slot): ?>
<?php
if (!is_array($slot)) {
continue;
}
$slotPermission = trim((string) ($slot['permission'] ?? ''));
if ($slotPermission !== '' && empty($layoutAuth[$slotPermission])) {
continue;
}
$slotTemplate = trim((string) ($slot['template'] ?? ''));
if ($slotTemplate === '' || !is_file($slotTemplate)) {
continue;
}
include $slotTemplate;
?>
<?php endforeach; ?>
<?php if ($canSwitchTenant): ?>
<li class="app-topbar-tenant-slot" data-app-component="tenant-switcher" data-tenant-switcher data-tooltip="<?php e(t('Tenant')); ?>" data-tooltip-pos="bottom">
<details class="dropdown app-topbar-tenant-menu">
<summary class="app-topbar-tenant-chip" aria-label="<?php e(t('Switch tenant')); ?>" title="<?php e($tenantLabel); ?>">
<span class="app-topbar-tenant-name"><?php e($tenantLabel); ?></span>
<li data-app-component="tenant-switcher" data-tenant-switcher data-tooltip="<?php e(t('Tenant')); ?>" data-tooltip-pos="bottom">
<details class="dropdown app-topbar-tenant-menu" data-summary-chevron="none">
<summary aria-label="<?php e(t('Switch tenant')); ?>" title="<?php e($tenantLabel); ?>">
<i class="bi bi-building" aria-hidden="true"></i>
</summary>
<ul class="app-topbar-menu-list app-topbar-menu-list--right">
<?php foreach ($availableTenants as $tenant): ?>
@@ -84,24 +123,8 @@ $moduleTopbarSlots = is_array($moduleSlots['topbar.right_item'] ?? null) ? $modu
</details>
</li>
<?php endif; ?>
<?php foreach ($moduleTopbarSlots as $slot): ?>
<?php
if (!is_array($slot)) {
continue;
}
$slotPermission = trim((string) ($slot['permission'] ?? ''));
if ($slotPermission !== '' && empty($layoutAuth[$slotPermission])) {
continue;
}
$slotTemplate = trim((string) ($slot['template'] ?? ''));
if ($slotTemplate === '' || !is_file($slotTemplate)) {
continue;
}
include $slotTemplate;
?>
<?php endforeach; ?>
<li>
<details class="dropdown app-topbar-user-menu" data-app-component="theme-controls"
<details class="dropdown app-topbar-user-menu" data-summary-chevron="none" data-app-component="theme-controls"
<?php if ($allowUserTheme): ?>
data-theme-menu
data-theme-url="admin/users/theme"
@@ -109,7 +132,7 @@ $moduleTopbarSlots = is_array($moduleSlots['topbar.right_item'] ?? null) ? $modu
data-csrf-token="<?php e($csrfToken); ?>"
<?php endif; ?>>
<summary aria-label="<?php e(t('Account')); ?>">
<i class="bi bi-person-fill"></i>
<i class="bi bi-person"></i>
</summary>
<ul class="app-topbar-menu-list app-topbar-menu-list--right">
<li class="app-topbar-menu-heading" role="presentation"><small><?php e(t('Navigation')); ?></small></li>

6
web/css/base/variables.base.css
View File

@@ -75,6 +75,12 @@
--app-empty-text: var(--app-color);
--app-empty-hint: var(--app-muted-color);
/* Layout: topbar height and z-index layers */
--app-topbar-height: calc(3rem + 1px); /* 3rem content + 1px border-bottom */
--z-topbar: 100;
--z-drawer: 95;
--z-drawer-backdrop: 90;
/* Typography tokens defined in typography.tokens.css */
}

2
web/css/components/app-details.css
View File

@@ -121,7 +121,7 @@
.app-details-container .app-details-titlebar {
position: sticky;
top: 37px;
top: var(--app-topbar-height);
z-index: 10;
padding-block-start: calc(var(--app-spacing) * 2);
background: var(--app-background-color);

238
web/css/layout/app-aside-icon-bar.css
View File

@@ -1,140 +1,158 @@
@layer layout {
aside.aside-icon-bar {
--app-icon-bar-item-padding: 0.6875rem;
--app-icon-bar-item-size: 22px;
--app-icon-bar-border-width: 3px;
--app-icon-bar-hover-bg: var(--app-accordion-border-color);
--app-icon-bar-border: 1px solid var(--app-border);
--app-icon-bar-mobile-safe-space: calc(3.5rem + env(safe-area-inset-bottom));
display: none;
}
aside.aside-icon-bar nav {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100vh;
}
aside.aside-icon-bar .aside-icon-footer {
display: grid;
}
aside.aside-icon-bar ul,
aside.aside-icon-bar li {
margin: 0;
padding: 0;
list-style: none;
}
aside.aside-icon-bar ul {
display: grid;
gap: 0;
}
aside.aside-icon-bar li a,
aside.aside-icon-bar li button {
margin: 0;
padding: var(--app-icon-bar-item-padding);
font-size: var(--app-icon-bar-item-size);
text-align: center;
color: var(--app-muted-color);
border-radius: 0;
background: transparent;
border: 0;
border-left: var(--app-icon-bar-border-width) solid transparent;
display: block;
width: 100%;
cursor: pointer;
}
aside.aside-icon-bar li a:hover,
aside.aside-icon-bar li a.active,
aside.aside-icon-bar li button:hover,
aside.aside-icon-bar li button.active {
border-left: var(--app-icon-bar-border-width) solid var(--app-primary);
color: var(--app-contrast);
background: var(--app-icon-bar-hover-bg);
}
aside.aside-icon-bar li a:focus-visible,
aside.aside-icon-bar li button:focus-visible {
outline: 2px solid var(--app-primary-focus);
outline-offset: -2px;
border-left-color: transparent;
color: var(--app-contrast);
}
@media (min-width: 768px) {
aside.aside-icon-bar {
border-right: var(--app-icon-bar-border);
display: block;
position: sticky;
top: 0;
z-index: 11;
}
.is-sidebar-collapsed aside.aside-icon-bar {
border-right: 0;
}
}
@media (max-width: 767px) {
aside.aside-icon-bar {
display: block;
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 20;
border-top: var(--app-icon-bar-border);
background: var(--app-background-color);
--app-icon-bar-item-padding: 0.6875rem 0.5rem;
--app-icon-bar-item-size: 18px;
--app-icon-bar-border-width: 3px;
--app-icon-bar-hover-bg: var(--app-accordion-border-color);
--app-icon-bar-border: 1px solid var(--app-border);
--app-icon-bar-mobile-safe-space: calc(
3.5rem + env(safe-area-inset-bottom)
);
display: none;
}
aside.aside-icon-bar nav {
flex-direction: row;
height: auto;
justify-content: center;
gap: var(--app-spacing);
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100vh;
}
aside.aside-icon-bar .aside-icon-footer {
display: flex;
gap: var(--app-spacing);
display: grid;
}
aside.aside-icon-bar ul,
aside.aside-icon-bar li {
margin: 0;
padding: 0;
list-style: none;
}
aside.aside-icon-bar ul {
display: flex;
justify-content: space-around;
gap: var(--app-spacing);
display: grid;
gap: 0;
}
aside.aside-icon-bar li a,
aside.aside-icon-bar li button {
border-left: 0;
border-top: var(--app-icon-bar-border-width) solid transparent;
margin: 0;
padding: var(--app-icon-bar-item-padding);
font-size: var(--app-icon-bar-item-size);
text-align: center;
color: var(--app-muted-color);
border-radius: 0;
background: transparent;
border: 0;
border-left: var(--app-icon-bar-border-width) solid transparent;
display: block;
width: 100%;
cursor: pointer;
}
aside.aside-icon-bar li a:hover,
aside.aside-icon-bar li a.active,
aside.aside-icon-bar li button:hover,
aside.aside-icon-bar li button.active {
border-left: 0;
border-top: var(--app-icon-bar-border-width) solid var(--app-primary);
border-left: var(--app-icon-bar-border-width) solid var(--app-primary);
color: var(--app-primary);
background: var(--app-icon-bar-hover-bg);
}
aside.aside-icon-bar li a:focus-visible,
aside.aside-icon-bar li button:focus-visible {
outline: 2px solid var(--app-primary-focus);
outline-offset: -2px;
border-left-color: transparent;
border-top-color: transparent;
color: var(--app-contrast);
}
.app-main-content,
footer.site-footer {
padding-bottom: max(
var(--app-spacing),
var(--app-icon-bar-mobile-safe-space)
);
/* ── Outline/fill icon swap ── */
[data-icon-swap] [data-icon="fill"] {
display: none;
}
[data-icon-swap]:hover [data-icon="outline"],
[data-icon-swap].active [data-icon="outline"] {
display: none;
}
[data-icon-swap]:hover [data-icon="fill"],
[data-icon-swap].active [data-icon="fill"] {
display: inline;
}
@media (min-width: 768px) {
aside.aside-icon-bar {
border-right: var(--app-icon-bar-border);
display: block;
position: sticky;
top: var(--app-topbar-height);
align-self: start;
height: calc(100dvh - var(--app-topbar-height));
z-index: 11;
}
aside.aside-icon-bar nav {
height: 100%;
}
.is-sidebar-collapsed aside.aside-icon-bar {
border-right: 0;
}
}
@media (max-width: 767px) {
aside.aside-icon-bar {
display: none;
position: fixed;
top: var(--app-topbar-height);
left: 0;
width: min(280px, 85vw);
z-index: var(--z-drawer);
border-bottom: 1px solid var(--app-border);
background: var(--app-sidebar-background-color);
}
.drawer-open aside.aside-icon-bar {
display: block;
}
aside.aside-icon-bar nav {
flex-direction: row;
height: auto;
justify-content: flex-start;
gap: 0;
}
aside.aside-icon-bar .aside-icon-footer {
display: flex;
gap: 0;
}
aside.aside-icon-bar ul {
display: flex;
gap: 0;
}
aside.aside-icon-bar li a,
aside.aside-icon-bar li button {
border-left: 0;
border-top: var(--app-icon-bar-border-width) solid transparent;
}
aside.aside-icon-bar li a:hover,
aside.aside-icon-bar li a.active,
aside.aside-icon-bar li button:hover,
aside.aside-icon-bar li button.active {
border-left: 0;
border-top: var(--app-icon-bar-border-width) solid var(--app-primary);
}
aside.aside-icon-bar li a:focus-visible,
aside.aside-icon-bar li button:focus-visible {
border-left-color: transparent;
border-top-color: transparent;
}
}
}
}

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

@@ -19,12 +19,14 @@
display: none;
}
.app-container.is-sidebar-hidden .app-sidebar {
display: none;
}
@media (min-width: 768px) {
.app-container.is-sidebar-hidden .app-sidebar {
display: none;
}
.sidebar-hidden .app-sidebar {
display: none;
.sidebar-hidden .app-sidebar {
display: none;
}
}
h1,
@@ -381,42 +383,43 @@
}
.app-container.is-sidebar-hidden:has(.aside-icon-bar):has(.app-sidebar) {
display: grid;
min-height: 100dvh;
align-items: flex-start;
grid-template-columns: minmax(0, 60px) minmax(0, 1fr);
min-height: calc(100dvh - var(--app-topbar-height));
align-items: stretch;
grid-template-columns: minmax(0, 52px) minmax(0, 1fr);
}
.sidebar-hidden .app-container:has(.aside-icon-bar):has(.app-sidebar) {
grid-template-columns: minmax(0, 60px) minmax(0, 1fr);
grid-template-columns: minmax(0, 52px) minmax(0, 1fr);
}
.app-container:has(.aside-icon-bar):has(.app-sidebar) {
display: grid;
min-height: 100dvh;
align-items: flex-start;
grid-template-columns: minmax(0, 60px) minmax(0, 220px) minmax(0, 1fr);
min-height: calc(100dvh - var(--app-topbar-height));
align-items: stretch;
grid-template-columns: minmax(0, 52px) minmax(0, 220px) minmax(0, 1fr);
}
.app-container.is-sidebar-collapsed:has(.aside-icon-bar):has(.app-sidebar) {
display: grid;
min-height: 100dvh;
align-items: flex-start;
grid-template-columns: minmax(0, 60px) minmax(0, 220px) minmax(0, 1fr);
min-height: calc(100dvh - var(--app-topbar-height));
align-items: stretch;
grid-template-columns: minmax(0, 52px) minmax(0, 220px) minmax(0, 1fr);
}
.app-container.is-sidebar-collapsed {
grid-template-columns: minmax(0, 60px) minmax(0, 220px) minmax(0, 1fr);
grid-template-columns: minmax(0, 52px) minmax(0, 220px) minmax(0, 1fr);
}
.sidebar-collapsed .app-container {
grid-template-columns: minmax(0, 60px) minmax(0, 220px) minmax(0, 1fr);
grid-template-columns: minmax(0, 52px) minmax(0, 220px) minmax(0, 1fr);
}
.app-main {
border-left: 1px solid var(--app-border);
min-height: 100dvh;
min-height: calc(100dvh - var(--app-topbar-height));
background: var(--app-background-color);
}
.app-main-content {
padding-inline: calc(var(--app-spacing) * 2);
padding-block-start: var(--app-spacing);
margin-bottom: calc(var(--app-spacing) * 2);
}
.app-main-content:has(.app-details-container) {
@@ -3016,4 +3019,18 @@
body.is-loading textarea {
pointer-events: none;
}
/* ── Print: hide all navigation chrome ── */
@media print {
.app-header,
aside.aside-icon-bar,
aside.app-sidebar,
.app-drawer-backdrop {
display: none !important;
}
.app-container {
display: block !important;
}
}
}

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

@@ -83,63 +83,13 @@
display: none !important;
}
.app-sidebar.is-collapsed .app-sidebar-panels,
.app-sidebar.is-collapsed .app-sidebar-titlebar,
.sidebar-collapsed .app-sidebar .app-sidebar-titlebar,
.sidebar-collapsed .app-sidebar .app-sidebar-panels {
display: none;
}
.app-sidebar-tenant-logo {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--app-sidebar-gap);
padding: var(--app-spacing);
margin-bottom: var(--app-spacing);
}
.app-sidebar .app-sidebar-tenant-logo a:hover {
background: transparent;
border: 0;
}
.app-sidebar .app-sidebar-tenant-logo > a {
padding: 0;
flex: 1;
border: 0;
text-decoration: none;
}
.app-sidebar .app-sidebar-tenant-logo img {
display: block;
max-width: 100%;
max-height: 48px;
width: auto;
height: auto;
object-fit: contain;
}
.app-sidebar-tenant-toggle {
display: none;
border: 1px solid var(--app-border);
background: transparent;
margin: 0;
}
.app-sidebar-tenant-toggle:hover {
color: var(--app-contrast);
border-color: var(--app-contrast);
}
.app-sidebar-tenant-name {
font-weight: var(--font-semibold);
font-size: var(--text-base);
color: var(--app-contrast);
text-align: left;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
@media (min-width: 768px) {
.app-sidebar.is-collapsed .app-sidebar-panels,
.app-sidebar.is-collapsed .app-sidebar-titlebar,
.sidebar-collapsed .app-sidebar .app-sidebar-titlebar,
.sidebar-collapsed .app-sidebar .app-sidebar-panels {
display: none;
}
}
.app-sidebar-title {
@@ -180,33 +130,64 @@
.app-sidebar {
position: sticky;
top: 0;
top: var(--app-topbar-height);
align-self: start;
z-index: 1;
height: 100vh;
height: calc(100dvh - var(--app-topbar-height));
overflow-y: auto;
}
.app-sidebar-panels {
padding-block-start: var(--app-spacing);
}
}
@media (max-width: 767px) {
.app-sidebar-tenant-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
}
.app-sidebar-tenant-logo img {
max-width: 120px;
max-height: 40px;
flex-shrink: 0;
}
.app-sidebar {
border-bottom: 1px solid var(--app-border);
position: fixed;
top: var(--app-topbar-height);
left: 0;
bottom: 0;
width: min(280px, 85vw);
z-index: var(--z-drawer);
transform: translateX(-100%);
transition: transform 300ms ease;
background: var(--app-sidebar-background-color);
overflow-y: auto;
}
.drawer-open .app-sidebar {
transform: translateX(0);
}
.app-sidebar-panels {
padding-block-end: var(--app-spacing);
padding-block-start: calc(
var(--app-icon-bar-item-padding, 0.6875rem) * 2
+ var(--app-icon-bar-item-size, 22px)
+ var(--app-icon-bar-border-width, 3px)
);
padding-block-end: calc(var(--app-spacing) + env(safe-area-inset-bottom));
}
}
/* ── Drawer backdrop ── */
.app-drawer-backdrop {
display: none;
position: fixed;
inset: 0;
top: var(--app-topbar-height);
z-index: var(--z-drawer-backdrop);
background: rgba(0, 0, 0, 0.5);
}
.drawer-open .app-drawer-backdrop {
display: block;
}
html.drawer-open {
overflow: hidden;
}
.app-sidebar a {
color: inherit;
display: block;
@@ -215,7 +196,6 @@
margin: 0;
border-left: var(--app-sidebar-border-width) solid transparent;
width: 100%;
font-size: var(--text-base);
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
@@ -226,7 +206,8 @@
.app-sidebar .active > a {
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));
border-left: var(--app-sidebar-border-width) solid
var(--app-nav-icon-color, var(--app-primary));
}
aside.app-sidebar ul,
@@ -321,7 +302,7 @@
details
> ul
li:last-child {
margin-bottom: 0.35rem;
margin-bottom: 1rem;
}
.app-sidebar .app-sidebar-group details > ul li:first-child {

188
web/css/layout/app-topbar.css
View File

@@ -23,23 +23,17 @@
--app-topbar-item-padding: 8px;
--app-topbar-list-gap: 8px;
--app-topbar-divider: 1px solid var(--app-border);
--app-topbar-margin-bottom: calc(var(--app-spacing) * 2);
--app-topbar-muted: var(--app-form-element-placeholder-color);
--app-topbar-bg: var(--app-background-color);
padding-block: 0.375rem;
padding-inline: var(--app-spacing);
margin-bottom: var(--app-topbar-margin-bottom);
color: var(--app-contrast);
border-bottom: var(--app-topbar-divider);
}
main:has(.app-details-container) .app-header {
margin-bottom: 0;
}
.app-header nav.app-topbar {
display: grid;
grid-template-columns: auto 1fr auto;
grid-template-columns: 1fr auto 1fr;
gap: var(--app-spacing);
align-items: center;
}
@@ -70,7 +64,8 @@
display: inline-flex;
align-items: center;
gap: 0.5rem;
max-width: min(20rem, 50vw);
min-width: min(22rem, 35vw);
max-width: min(30rem, 50vw);
width: 100%;
padding: 0.3rem 0.65rem;
border: var(--app-border-width) solid var(--app-border);
@@ -142,7 +137,7 @@
display: none;
}
main:has(#app-details-aside-section) .app-topbar-menu-item-detail-sidebar {
body:has(#app-details-aside-section) .app-topbar-menu-item-detail-sidebar {
display: list-item;
}
@@ -165,7 +160,7 @@
}
.app-topbar-right > li > a,
.app-topbar-right button {
.app-topbar-right > li > button {
display: flex;
align-items: center;
justify-content: center;
@@ -175,74 +170,57 @@
margin: 0;
border: none;
border-radius: var(--app-border-radius);
background: transparent;
background-color: transparent;
box-shadow: none;
color: var(--app-topbar-muted);
font-size: inherit;
font-weight: normal;
line-height: 1;
cursor: pointer;
transition:
background var(--app-transition),
background-color var(--app-transition),
color var(--app-transition);
appearance: none;
-webkit-appearance: none;
/* Reset global button custom properties from app-shell.css */
--app-background-color: transparent;
--app-border-color: transparent;
--app-color: var(--app-topbar-muted);
--app-box-shadow: none;
}
.app-topbar-right > li > a:hover,
.app-topbar-right button:hover,
.app-topbar-right > li > button:hover,
.app-header details.dropdown > summary:not([role]):hover {
background: color-mix(in srgb, var(--app-contrast) 8%, transparent);
background-color: color-mix(in srgb, var(--app-contrast) 8%, transparent);
color: var(--app-color);
--app-background-color: color-mix(
in srgb,
var(--app-contrast) 8%,
transparent
);
--app-color: var(--app-color);
}
.app-topbar-right > li > a:active,
.app-topbar-right button:active,
.app-topbar-right > li > button:active,
.app-header details.dropdown > summary:not([role]):active {
background: color-mix(in srgb, var(--app-contrast) 12%, transparent);
background-color: color-mix(in srgb, var(--app-contrast) 12%, transparent);
--app-background-color: color-mix(
in srgb,
var(--app-contrast) 12%,
transparent
);
}
.app-topbar-right > li > a:focus-visible,
.app-topbar-right button:focus-visible,
.app-topbar-right > li > button:focus-visible,
.app-header details.dropdown > summary:not([role]):focus-visible {
outline: 2px solid var(--app-primary);
outline-offset: -2px;
}
.app-topbar-tenant-chip {
display: inline-flex;
align-items: center;
gap: calc(var(--app-spacing) * 0.4);
max-width: min(26rem, 45vw);
padding: calc(var(--app-spacing) * 0.35) calc(var(--app-spacing) * 0.75);
border: var(--app-border-width) solid var(--app-border);
border-radius: 999px;
background: transparent;
color: var(--app-topbar-muted);
}
.app-topbar-tenant-menu > summary.app-topbar-tenant-chip {
cursor: pointer;
transition:
border-color var(--app-transition),
color var(--app-transition);
}
.app-topbar-tenant-menu > summary.app-topbar-tenant-chip:hover {
border-color: var(--app-primary);
color: var(--app-color);
}
.app-topbar-tenant-menu > summary.app-topbar-tenant-chip:focus-visible {
outline: 2px solid var(--app-primary);
outline-offset: -2px;
border-color: var(--app-primary);
color: var(--app-color);
}
.app-topbar-tenant-name {
display: inline-block;
max-width: min(20rem, 38vw);
font-size: var(--text-sm);
line-height: var(--leading-tight);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Tenant-switcher uses the shared dropdown summary styling from .app-header details.dropdown > summary:not([role]) */
.app-topbar-user-menu > summary:hover {
color: var(--app-color);
@@ -366,26 +344,92 @@
margin-top: calc(var(--app-spacing) * 0.15);
}
header.app-header {
position: sticky;
top: 0;
z-index: var(--z-topbar);
background: var(--app-topbar-bg);
}
/* ── Hamburger button (mobile-only) ── */
.app-topbar-hamburger {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 2.25rem;
min-height: 2.25rem;
padding: var(--app-topbar-item-padding);
margin: 0;
border: none;
border-radius: var(--app-border-radius);
background: transparent;
color: var(--app-topbar-muted);
font-size: var(--text-2xl);
cursor: pointer;
transition:
background var(--app-transition),
color var(--app-transition);
}
.app-topbar-hamburger:hover {
background: color-mix(in srgb, var(--app-contrast) 8%, transparent);
color: var(--app-color);
}
.app-topbar-hamburger:focus-visible {
outline: 2px solid var(--app-primary);
outline-offset: -2px;
}
@media (min-width: 768px) {
header.app-header {
position: sticky;
top: 0;
background: var(--app-topbar-bg);
z-index: 10;
.app-topbar-hamburger {
display: none;
}
}
/* ── Tenant branding in topbar ── */
.app-topbar-brand {
display: flex;
align-items: center;
gap: 0.5rem;
text-decoration: none;
color: var(--app-contrast);
}
.app-topbar-brand::after {
content: "";
display: block;
width: 1px;
height: 1.25rem;
background: var(--app-border);
flex-shrink: 0;
margin-inline: calc(var(--app-spacing) * 0.5);
}
.app-topbar-brand img {
display: block;
width: 8rem;
height: 2.5rem;
object-fit: contain;
object-position: left;
}
.app-topbar-brand-name {
font-weight: var(--font-semibold);
font-size: var(--text-sm);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 14rem;
}
@media (max-width: 575px) {
.app-topbar-brand-name {
display: none;
}
}
.app-header details.dropdown[open] > summary::before {
display: none;
}
@media (max-width: 767px) {
.app-topbar-tenant-chip {
max-width: min(14rem, 55vw);
}
.app-topbar-tenant-name {
max-width: min(11rem, 45vw);
}
}
}

12
web/js/app-boot.js
View File

@@ -35,11 +35,13 @@
var sidebarHiddenKey = buildStorageKey('sidebar', 'sidebar-hidden');
var contrastKey = buildStorageKey('contrast', 'contrast-mode');
if (sidebarCollapsedKey && window.localStorage.getItem(sidebarCollapsedKey) === '1') {
root.classList.add('sidebar-collapsed');
}
if (sidebarHiddenKey && window.localStorage.getItem(sidebarHiddenKey) === '1') {
root.classList.add('sidebar-hidden');
if (window.innerWidth >= 768) {
if (sidebarCollapsedKey && window.localStorage.getItem(sidebarCollapsedKey) === '1') {
root.classList.add('sidebar-collapsed');
}
if (sidebarHiddenKey && window.localStorage.getItem(sidebarHiddenKey) === '1') {
root.classList.add('sidebar-hidden');
}
}
var contrastValue = contrastKey ? window.localStorage.getItem(contrastKey) : null;
if (contrastValue === 'high') {

134
web/js/components/app-toggle-sidebar.js
View File

@@ -133,10 +133,123 @@ export function initSidebarToggle(root = document, options = {}) {
applyHidden(hiddenStored === '1', { persist: false });
}
// ── Mobile drawer helpers ──
const mobileQuery = window.matchMedia('(max-width: 767px)');
const isMobileViewport = () => mobileQuery.matches;
const FOCUSABLE = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
const isDrawerOpen = () => rootEl.classList.contains('drawer-open');
const openDrawer = () => {
rootEl.classList.add('drawer-open');
const hamburger = document.querySelector('.app-topbar-hamburger');
if (hamburger) {
hamburger.setAttribute('aria-label', hamburger.dataset.closeLabel || 'Close navigation');
hamburger.setAttribute('aria-expanded', 'true');
}
};
const closeDrawer = () => {
rootEl.classList.remove('drawer-open');
const hamburger = document.querySelector('.app-topbar-hamburger');
if (hamburger) {
hamburger.setAttribute('aria-label', hamburger.dataset.openLabel || 'Open navigation');
hamburger.setAttribute('aria-expanded', 'false');
hamburger.focus();
}
};
const toggleDrawer = () => {
if (isDrawerOpen()) {
closeDrawer();
} else {
openDrawer();
}
};
const cleanupFns = [];
// ── Focus trap (active only when drawer open) ──
const onFocusTrap = (event) => {
if (!isDrawerOpen() || event.key !== 'Tab') {
return;
}
const drawerElements = [
...document.querySelectorAll('.app-topbar-hamburger'),
...aside.querySelectorAll(FOCUSABLE),
...document.querySelectorAll('.aside-icon-bar ' + FOCUSABLE),
];
const focusable = drawerElements.filter((el) => el.offsetParent !== null);
if (!focusable.length) {
return;
}
const first = focusable[0];
const last = focusable[focusable.length - 1];
if (event.shiftKey && document.activeElement === first) {
event.preventDefault();
last.focus();
} else if (!event.shiftKey && document.activeElement === last) {
event.preventDefault();
first.focus();
}
};
document.addEventListener('keydown', onFocusTrap);
cleanupFns.push(() => document.removeEventListener('keydown', onFocusTrap));
// ── ESC to close drawer ──
const onEscDrawer = (event) => {
if (event.key === 'Escape' && isDrawerOpen()) {
event.preventDefault();
closeDrawer();
}
};
document.addEventListener('keydown', onEscDrawer);
cleanupFns.push(() => document.removeEventListener('keydown', onEscDrawer));
// ── Backdrop click to close drawer ──
const onBackdropClick = (event) => {
if (isDrawerOpen() && event.target.classList.contains('app-drawer-backdrop')) {
closeDrawer();
}
};
document.addEventListener('click', onBackdropClick);
cleanupFns.push(() => document.removeEventListener('click', onBackdropClick));
// ── matchMedia listener: sync state on viewport change ──
const onViewportChange = (mql) => {
if (!mql.matches) {
// Crossed to desktop — close drawer, restore desktop sidebar state
if (isDrawerOpen()) {
closeDrawer();
}
const storedCollapsed = readStored();
if (storedCollapsed === '1' || storedCollapsed === '0') {
applyState(storedCollapsed === '1', { persist: false });
}
const storedHidden = readHiddenStored();
if (storedHidden === '1' || storedHidden === '0') {
applyHidden(storedHidden === '1', { persist: false });
}
} else {
// Crossed to mobile — remove desktop sidebar classes that would interfere
rootEl.classList.remove('sidebar-collapsed', 'sidebar-hidden');
aside.classList.remove('is-collapsed', 'is-hidden');
if (container instanceof HTMLElement) {
container.classList.remove('is-sidebar-collapsed', 'is-sidebar-hidden');
}
}
};
mobileQuery.addEventListener('change', onViewportChange);
cleanupFns.push(() => mobileQuery.removeEventListener('change', onViewportChange));
buttons.forEach((button) => {
const onClick = (event) => {
event.preventDefault();
if (isMobileViewport()) {
toggleDrawer();
return;
}
const action = (button.dataset.sidebarAction || '').toLowerCase();
if (action === 'visibility') {
controller.toggleVisibility({ persist: true });
@@ -152,6 +265,21 @@ export function initSidebarToggle(root = document, options = {}) {
const detail = event.detail || {};
const action = detail.action;
const persist = detail.persist ?? false;
if (isMobileViewport()) {
if (action === 'show' || action === 'open') {
openDrawer();
return;
}
if (action === 'hide' || action === 'close') {
closeDrawer();
return;
}
if (action === 'toggle' || action === 'toggle-visibility') {
toggleDrawer();
return;
}
return;
}
if (action === 'open') { controller.open({ persist }); }
if (action === 'close') { controller.close({ persist }); }
if (action === 'toggle') { controller.toggle({ persist }); }
@@ -163,6 +291,9 @@ export function initSidebarToggle(root = document, options = {}) {
cleanupFns.push(() => document.removeEventListener('app:sidebar', onSidebarEvent));
const onShortcut = (event) => {
if (isMobileViewport()) {
return;
}
if (!(event.metaKey || event.ctrlKey)) {
return;
}
@@ -183,6 +314,9 @@ export function initSidebarToggle(root = document, options = {}) {
const destroy = () => {
cleanupFns.forEach((cleanup) => cleanup());
if (isDrawerOpen()) {
rootEl.classList.remove('drawer-open');
}
delete aside.dataset.sidebarToggleBound;
delete aside._sidebarToggleApi;
};