Improved the header and the mobile nav menu

src/components/AppHeader.ts

@@ -24,7 +24,10 @@ export class AppHeader extends Component {
     const logoHref = this.home ? this.websiteUrl : "/";
 
     return html`
-      <header class="flex items-center justify-between px-4 py-4 sm:px-0 sm:py-16">
+      <header
+        role="banner"
+        class="group/header flex items-center justify-between border-b border-white/5 px-4 py-4 transition-colors has-open:bg-neutral-900 sm:px-0 sm:py-16"
+      >
         <a
           href="${logoHref}"
           class="z-20 outline-offset-2 outline-blue-400 focus-visible:outline-2"
@@ -33,66 +36,64 @@ export class AppHeader extends Component {
             this.logoUrl,
           )}" alt="${this.logoAlt}" class="h-8" />
         </a>
-        <div class="hidden items-center gap-2 sm:flex">
+        <nav
+          aria-label="Desktop navigation"
+          class="flex items-center gap-2"
+        >
           ${this.links.map((link) =>
             html`
               <a
-                class="rounded-lg px-3 py-2 text-sm font-medium text-white outline-offset-2 outline-blue-400 select-none focus-visible:outline-2"
+                class="hidden rounded-lg px-3 py-2 text-sm font-medium text-white outline-offset-2 outline-blue-400 select-none focus-visible:outline-2 sm:block"
                 href="${link.type === "email"
                   ? `mailto:${link.value}`
                   : link.value}"
-              >
-                ${link.label.default}
-              </a>
+              >${link.label.default}</a>
             `
           )}
           <button
+            type="button"
             class="rounded-lg bg-white/5 px-3 py-2 text-sm font-medium text-white ring-1 ring-white/10 outline-offset-2 outline-blue-400 transition-colors select-none ring-inset hover:bg-white/15 focus-visible:outline-2"
           >
             Get updates
           </button>
-        </div>
-        <details class="sm:hidden">
-          <summary
-            class="relative z-20 block rounded-lg bg-white/5 p-2 text-sm font-medium text-white ring-1 ring-white/10 outline-offset-2 outline-blue-400 transition-colors select-none ring-inset hover:bg-white/15 focus-visible:outline-2"
+          <button
+            type="button"
+            class="rounded-lg p-3 text-white outline-offset-2 outline-blue-400 transition select-none group-has-open/header:rotate-180 focus-visible:outline-2 sm:hidden"
+            popovertarget="menu"
+            popovertargetaction="toggle"
           >
             <svg
               xmlns="http://www.w3.org/2000/svg"
-              class="size-6 fill-current"
+              class="size-4 fill-current"
               viewBox="0 0 256 256"
               aria-hidden="true"
             >
               <path
-                d="M224,128a8,8,0,0,1-8,8H40a8,8,0,0,1,0-16H216A8,8,0,0,1,224,128ZM40,72H216a8,8,0,0,0,0-16H40a8,8,0,0,0,0,16ZM216,184H40a8,8,0,0,0,0,16H216a8,8,0,0,0,0-16Z"
+                d="M216.49,104.49l-80,80a12,12,0,0,1-17,0l-80-80a12,12,0,0,1,17-17L128,159l71.51-71.52a12,12,0,0,1,17,17Z"
               >
               </path>
             </svg>
             <span class="sr-only">Menu</span>
-          </summary>
-          <div
-            class="absolute inset-x-0 top-0 z-10 bg-neutral-900/80 pt-16 shadow-md backdrop-blur-lg"
-          >
-            <ul class="z-10 mx-auto flex flex-col py-2">
-              ${this.links.map((link) =>
-                html`
-                  <a
-                    class="px-4 py-3 text-start font-medium text-white hover:bg-white/5"
-                    href="${link.type === "email"
-                      ? `mailto:${link.value}`
-                      : link.value}"
-                  >
-                    ${link.label.default}
-                  </a>
-                `
-              )}
-              <button
-                class="px-4 py-3 text-start font-medium text-white hover:bg-white/5"
-              >
-                Get updates
-              </button>
-            </ul>
-          </div>
-        </details>
+          </button>
+        </nav>
+        <div
+          class="absolute inset-x-0 top-16 z-50 grid w-full grid-rows-[0fr] border-b border-b-white/5 bg-neutral-900 shadow-md transition-all transition-discrete ease-out open:grid-rows-[1fr] sm:hidden starting:open:grid-rows-[0fr]"
+          popover
+          id="menu"
+        >
+          <nav aria-label="Mobile navigation" class="py-2 overflow-hidden">
+            ${this.links.map((link) =>
+              html`
+                <a
+                  class="block px-4 py-3 text-start font-medium text-white -outline-offset-2 outline-blue-400 hover:bg-white/5 focus-visible:outline-2"
+                  href="${link.type === "email"
+                    ? `mailto:${link.value}`
+                    : link.value}"
+                >${link.label.default}</a>
+              `
+            )}
+          </nav>
+        </div>
       </header>
     `;
   }