Navbar pointer events + pride

Myrstad · Jun 7, 2024 · 624b2d6 · 624b2d6
1 parent 5f776e5
commit 624b2d6
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 1 deletion.
diff --git a/public/favicon.pride.svg b/public/favicon.pride.svg
diff --git a/src/components/Navbar.astro b/src/components/Navbar.astro
@@ -4,7 +4,7 @@
 <div class="container navigation">
   <div class="content">
     <a class="logo" href="/" data-cursor-big="">
-      <img src="/favicon.svg" alt="m logo">
+      <img src="/favicon.pride.svg" alt="m logo">
       Myrstad
     </a>
     <input type="checkbox" id="navigation-toggle" aria-controls="navigation" aria-label="Åpne/lukke navigasjon">
@@ -32,6 +32,7 @@
     left: 0;
     right: 0;
     top: 0;
+    pointer-events: none;
 
     --color-background-blur: rgba(255, 255, 255, 0.65);
   }
@@ -45,6 +46,7 @@
   }
 
   .logo {
+    pointer-events: auto;
     position: relative;
     padding: 0.5rem 1.75rem;
     border-radius: 1.25rem;
@@ -90,6 +92,7 @@
   }
 
   label {
+    pointer-events: auto;
     position: relative;
     width: 2.5rem;
     height: 2.5rem;
@@ -138,6 +141,7 @@
   }
 
   .menu {
+    pointer-events: auto;
     position: fixed;
     z-index: -2;
     display: flex;
@@ -243,6 +247,7 @@
   const navLinks = document.querySelectorAll(".menu a") as NodeListOf<HTMLAnchorElement>;
   const checkbox = document.querySelector("#navigation-toggle") as HTMLInputElement;
   const body = document.querySelector("body"); 
+  const menu = document.querySelector(".menu") as HTMLElement;
 
   checkbox.addEventListener('change', ()=>{
     if (checkbox.checked) {
@@ -268,4 +273,15 @@
       })
     })
   });
+
+  menu.addEventListener('focusout', (event) => {
+    // Check if the focus has moved outside of the .menu element
+    if (!menu.contains(event.relatedTarget as Node)) {
+      body?.classList.remove("no-scroll");
+      checkbox.checked = false;
+      navLinks.forEach(link => {
+        link.tabIndex = -1;
+      });
+    }
+  });
 </script>