Merge pull request #52 from VGVentures/fix/header-again

fix: z-index issue
VGVentures · Aug 21, 2024 · d628538 · d628538
2 parents 0dc508a + 4dfe083
commit d628538
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 15 deletions.
diff --git a/src/components/vgv_nav/vgv-nav.astro b/src/components/vgv_nav/vgv-nav.astro
@@ -7,7 +7,7 @@ import ThemeSelect from "@astrojs/starlight/components/ThemeSelect.astro";
 import type { Props } from "@astrojs/starlight/props";
 ---
 
-<header class="sticky top-0 z-20 transition-all backdrop-blur-2xl">
+<header class="fixed top-0 w-[100%] transition-all backdrop-blur-2xl z-20">
   <div class="header-background"></div>
   <div class="header">
     <div class="inner-header sl-flex">
@@ -28,6 +28,12 @@ import type { Props } from "@astrojs/starlight/props";
   </div>
 </header>
 
+<style is:global>
+  :root {
+    --sl-z-index-navbar: 6000;
+  }
+</style>
+
 <style>
   .header-background {
     position: absolute;
@@ -37,10 +43,11 @@ import type { Props } from "@astrojs/starlight/props";
     padding: 0px;
     background-color: var(--vgv-nav-bg);
     opacity: var(--vgv-nav-opacity);
-    z-index: -1;
+    z-index: calc(var(--sl-z-index-navbar) - 1);
     pointer-events: none;
   }
   .header {
+    position: fixed;
     z-index: var(--sl-z-index-navbar);
     position: relative;
 

diff --git a/src/components/vgv_page/vgv-page-frame.astro b/src/components/vgv_page/vgv-page-frame.astro
@@ -28,19 +28,6 @@ const { hasSidebar, labels } = Astro.props;
     min-height: 100vh;
   }
 
-  .header {
-    z-index: var(--sl-z-index-navbar);
-    position: fixed;
-    inset-inline-start: 0;
-    inset-block-start: 0;
-    width: 100%;
-    height: var(--sl-nav-height);
-    border-bottom: 1px solid var(--sl-color-hairline-shade);
-    padding: var(--sl-nav-pad-y) var(--sl-nav-pad-x);
-    padding-inline-end: var(--sl-nav-pad-x);
-    background-color: var(--sl-color-bg-nav);
-  }
-
   :global([data-has-sidebar]) .header {
     padding-inline-end: calc(
       var(--sl-nav-gap) + var(--sl-nav-pad-x) + var(--sl-menu-button-size)

diff --git a/src/styles/theme.css b/src/styles/theme.css
@@ -16,7 +16,10 @@
 
   --sl-color-bg-sidebar: transparent;
   --sl-color-hairline-shade: #323846;
+
+  --sl-z-index-navbar: 6000;
 }
+
 /* Light mode colors. */
 :root[data-theme="light"] {
   --sl-color-accent-low: #c7d7fb;