ensure navbar is always on top during view transition

Trombach · Oct 25, 2024 · 3245213 · 3245213
1 parent 7b7cf28
commit 3245213
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 1 deletion.
diff --git a/src/components/Nav/Navbar.astro b/src/components/Nav/Navbar.astro
@@ -4,7 +4,7 @@ import NavigationMenu from "./NavigationMenu.astro";
 import ThemeSwitcher from "./ThemeSwitcher.astro";
 ---
 
-<header data-header="collapsed" class="group fixed top-0 z-50 w-full px-5 py-3">
+<header data-header="collapsed" transition:name="header" class="group fixed top-0 z-50 w-full px-5 py-3">
   <div
     class="relative mx-auto flex w-full max-w-screen-xl flex-wrap items-center justify-between lg:flex-nowrap lg:items-center"
   >

diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
@@ -62,6 +62,10 @@ const { title, description = "Lukas' Homepage" } = Astro.props;
         animation-duration: 500ms;
       }
 
+      ::view-transition-group(header) {
+        z-index: 999;
+      }
+
       @layer base {
         :root {
           --background: 0 0% 100%;