fix: move hamburger backdrop outside <header> so drawer items are not blurred
This commit is contained in:
@@ -754,15 +754,6 @@
|
|||||||
></div>
|
></div>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
<!-- Backdrop for mobile hamburger menu -->
|
|
||||||
{#if menuOpen}
|
|
||||||
<div
|
|
||||||
class="fixed top-14 inset-x-0 bottom-0 z-40 sm:hidden"
|
|
||||||
style="background: rgba(0,0,0,0.6); backdrop-filter: blur(4px);"
|
|
||||||
onpointerdown={() => { menuOpen = false; }}
|
|
||||||
aria-hidden="true"
|
|
||||||
></div>
|
|
||||||
{/if}
|
|
||||||
{:else}
|
{:else}
|
||||||
<div class="ml-auto">
|
<div class="ml-auto">
|
||||||
<a
|
<a
|
||||||
@@ -895,6 +886,17 @@
|
|||||||
{/if}
|
{/if}
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
|
<!-- Backdrop for mobile hamburger menu — outside <header> so the blur
|
||||||
|
only affects page content below, not the drawer items themselves -->
|
||||||
|
{#if menuOpen}
|
||||||
|
<div
|
||||||
|
class="fixed top-14 inset-x-0 bottom-0 z-40 sm:hidden"
|
||||||
|
style="background: rgba(0,0,0,0.6); backdrop-filter: blur(4px);"
|
||||||
|
onpointerdown={() => { menuOpen = false; }}
|
||||||
|
aria-hidden="true"
|
||||||
|
></div>
|
||||||
|
{/if}
|
||||||
|
|
||||||
<main class="flex-1 max-w-6xl mx-auto w-full px-4 py-8">
|
<main class="flex-1 max-w-6xl mx-auto w-full px-4 py-8">
|
||||||
{#key page.url.pathname + page.url.search}
|
{#key page.url.pathname + page.url.search}
|
||||||
<div in:fade={{ duration: 180, delay: 60 }} out:fade={{ duration: 100 }}>
|
<div in:fade={{ duration: 180, delay: 60 }} out:fade={{ duration: 100 }}>
|
||||||
|
|||||||
Reference in New Issue
Block a user