💄 adjust header auto-close and backdrop

okfde · Feb 19, 2024 · f35a5ef · f35a5ef
1 parent 4180e13
commit f35a5ef
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 6 deletions.
diff --git a/fragdenstaat_de/templates/header.html b/fragdenstaat_de/templates/header.html
@@ -30,7 +30,7 @@
                     </li>
                 {% endif %}
                 {% page_url "home" as home_url %}
-                <li class="order-lg-first">
+                <li class="order-lg-first nav-logo">
                     <a href="{{ home_url|default:'/' }}">
                         {% render_svg "img/header_logo.svg" %}
                         <span class="visually-hidden">{{ SITE_NAME }}</span>

diff --git a/frontend/javascript/navbar.ts b/frontend/javascript/navbar.ts
@@ -52,8 +52,9 @@ header?.querySelectorAll<HTMLElement>('.nav-toggle-menu').forEach((el) =>
       })
     })
 
+    const height = target.clientHeight
     window.addEventListener('scroll', () => {
-      if (window.scrollY > 150) hide()
+      if (window.scrollY > height) hide()
     })
   })
 )

diff --git a/frontend/styles/header.scss b/frontend/styles/header.scss
@@ -2,6 +2,11 @@
 
 $c: map.get($container-max-widths, 'xxl');
 
+#header {
+  position: relative;
+  z-index: 50;
+}
+
 #header nav {
   padding: $spacer 0;
   --#{$prefix}navbar-toggler-icon-bg: #{escape-svg(
@@ -40,6 +45,11 @@ $c: map.get($container-max-widths, 'xxl');
     color: var(--bs-link-color);
   }
 
+  .nav-logo svg {
+    height: 2.5rem;
+    width: auto;
+  }
+
   button.user-profile {
     display: flex;
     align-items: center;
@@ -94,12 +104,12 @@ $c: map.get($container-max-widths, 'xxl');
     }
 
     &::before {
-      position: absolute;
-      z-index: 1045;
+      position: fixed;
+      z-index: -1; // still at least level of #header
       left: 0;
       right: 0;
-      top: calc(100% + 1px); // to show the navbar border
-      height: 100vh;
+      top: 0;
+      bottom: 0;
       background-color: var(--bs-body-color);
       opacity: 0;
       content: '';