fix(admin): move mobile nav toggle into content area to avoid z-index conflict
Some checks failed
CI / Backend (push) Successful in 43s
CI / UI (push) Successful in 59s
Release / Test backend (push) Successful in 37s
Release / Check ui (push) Successful in 27s
Release / Docker / caddy (push) Failing after 39s
CI / UI (pull_request) Successful in 25s
CI / Backend (pull_request) Successful in 44s
Release / Docker / ui (push) Successful in 2m5s
Release / Docker / runner (push) Successful in 2m27s
Release / Docker / backend (push) Successful in 3m12s
Release / Gitea Release (push) Has been skipped
Some checks failed
CI / Backend (push) Successful in 43s
CI / UI (push) Successful in 59s
Release / Test backend (push) Successful in 37s
Release / Check ui (push) Successful in 27s
Release / Docker / caddy (push) Failing after 39s
CI / UI (pull_request) Successful in 25s
CI / Backend (pull_request) Successful in 44s
Release / Docker / ui (push) Successful in 2m5s
Release / Docker / runner (push) Successful in 2m27s
Release / Docker / backend (push) Successful in 3m12s
Release / Gitea Release (push) Has been skipped
The fixed top bar was hidden behind the main site navbar (z-50). Replace with an inline 'Admin menu' button at the top of the content. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -29,35 +29,17 @@
|
|||||||
<!-- Mobile sidebar overlay -->
|
<!-- Mobile sidebar overlay -->
|
||||||
{#if sidebarOpen}
|
{#if sidebarOpen}
|
||||||
<button
|
<button
|
||||||
class="fixed inset-0 z-20 bg-black/50 md:hidden"
|
class="fixed inset-0 z-40 bg-black/50 md:hidden"
|
||||||
onclick={() => (sidebarOpen = false)}
|
onclick={() => (sidebarOpen = false)}
|
||||||
aria-label="Close sidebar"
|
aria-label="Close sidebar"
|
||||||
></button>
|
></button>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
<div class="flex min-h-[calc(100vh-4rem)] gap-0">
|
<div class="flex min-h-[calc(100vh-4rem)] gap-0">
|
||||||
<!-- Mobile top bar -->
|
|
||||||
<div class="md:hidden fixed top-0 left-0 right-0 z-10 h-16 flex items-center px-4 border-b border-(--color-border) bg-(--color-bg)">
|
|
||||||
<button
|
|
||||||
onclick={() => (sidebarOpen = !sidebarOpen)}
|
|
||||||
class="p-2 rounded-md text-(--color-muted) hover:text-(--color-text) hover:bg-(--color-surface-2) transition-colors"
|
|
||||||
aria-label="Toggle navigation"
|
|
||||||
>
|
|
||||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
||||||
{#if sidebarOpen}
|
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
|
||||||
{:else}
|
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
|
|
||||||
{/if}
|
|
||||||
</svg>
|
|
||||||
</button>
|
|
||||||
<span class="ml-3 text-sm font-semibold text-(--color-muted) uppercase tracking-widest">Admin</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Sidebar -->
|
<!-- Sidebar -->
|
||||||
<aside
|
<aside
|
||||||
class="
|
class="
|
||||||
fixed top-0 left-0 h-full z-30 w-56 shrink-0 border-r border-(--color-border) px-3 py-6 flex flex-col gap-6
|
fixed top-0 left-0 h-full z-50 w-56 shrink-0 border-r border-(--color-border) px-3 py-6 flex flex-col gap-6
|
||||||
bg-(--color-bg) transition-transform duration-200
|
bg-(--color-bg) transition-transform duration-200
|
||||||
{sidebarOpen ? 'translate-x-0' : '-translate-x-full'}
|
{sidebarOpen ? 'translate-x-0' : '-translate-x-full'}
|
||||||
md:relative md:translate-x-0 md:w-48 md:z-auto md:top-auto md:h-auto
|
md:relative md:translate-x-0 md:w-48 md:z-auto md:top-auto md:h-auto
|
||||||
@@ -105,7 +87,19 @@
|
|||||||
</aside>
|
</aside>
|
||||||
|
|
||||||
<!-- Main content -->
|
<!-- Main content -->
|
||||||
<main class="flex-1 min-w-0 px-4 py-6 md:px-8 pt-20 md:pt-6">
|
<main class="flex-1 min-w-0 px-4 py-6 md:px-8">
|
||||||
|
<!-- Mobile nav toggle -->
|
||||||
|
<button
|
||||||
|
onclick={() => (sidebarOpen = true)}
|
||||||
|
class="md:hidden mb-4 flex items-center gap-2 text-sm text-(--color-muted) hover:text-(--color-text) transition-colors"
|
||||||
|
aria-label="Open navigation"
|
||||||
|
>
|
||||||
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
|
||||||
|
</svg>
|
||||||
|
Admin menu
|
||||||
|
</button>
|
||||||
|
|
||||||
{@render children?.()}
|
{@render children?.()}
|
||||||
</main>
|
</main>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user