Improve menu focus visibility.

Author: nikoshell

src/components/Header.astro

@@ -50,13 +50,23 @@ import links from "../data/links.json";
   let prevScrollPos = window.pageYOffset;
   const navbar = document.getElementById("navbar") as HTMLElement;
 
-  window.onscroll = function () {
+  window.addEventListener("scroll", () => {
     let currentScrollPos = window.pageYOffset;
     if (prevScrollPos > currentScrollPos) {
       navbar.style.transform = "translateY(0)";
     } else {
       navbar.style.transform = "translateY(-100%)";
     }
     prevScrollPos = currentScrollPos;
-  };
+  });
+
+  navbar.addEventListener("focusin", () => {
+    navbar.style.transform = "translateY(0)";
+  });
+
+  navbar.addEventListener("focusout", () => {
+    if (window.pageYOffset > 100) {
+      navbar.style.transform = "translateY(-100%)";
+    }
+  });
 </script>

src/components/NavItems.astro

@@ -184,9 +184,9 @@ const { items, inverted = false, level = 1 } = Astro.props;
 
   /* Focus styles for keyboard navigation */
   [role="menuitem"]:focus-visible {
-    outline: 2px solid white;
+    outline: 2px solid #3583E2;
     outline-offset: -2px;
-    border-radius: 4px;
+    border-radius: 50%;
   }
 
   /* Hide outline for mouse users, but keep for keyboard */

src/layouts/Layout.astro

@@ -83,7 +83,7 @@ const externalDomain = new URL(Astro.site || "").hostname;
 
   @media screen and (width>1200px){
   main {
-    margin-bottom:700px;
+    margin-bottom:800px;
   }
    footer {
             position: fixed;