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

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:
2026-04-06 22:21:39 +02:00
parent fe88e748a3
commit a3f270408b
13 changed files with 543 additions and 340 deletions

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'; ?>