From b0d65df2cfaf21a85189a39f2a516f24024bce10 Mon Sep 17 00:00:00 2001
From: Zefir Kirilov <contact@zefir.pro>
Date: Sun, 15 Mar 2026 21:00:02 +0200
Subject: [PATCH 1/4] Improved the header and the mobile nav menu

---
 src/components/AppHeader.ts | 122 +++++++++++++++++++++++-------------
 1 file changed, 79 insertions(+), 43 deletions(-)

diff --git a/src/components/AppHeader.ts b/src/components/AppHeader.ts
index 752973d..ba9921a 100644
--- a/src/components/AppHeader.ts
+++ b/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="flex items-center justify-between px-4 py-4 sm:px-0 sm:py-16"
+      >
         <a
           href="${logoHref}"
           class="z-20 outline-offset-2 outline-blue-400 focus-visible:outline-2"
@@ -33,7 +36,10 @@ 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="hidden items-center gap-2 sm:flex"
+        >
           ${this.links.map((link) =>
             html`
               <a
@@ -41,58 +47,88 @@ export class AppHeader extends Component {
                 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"
+        </nav>
+        <button
+          type="button"
+          class="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 sm:hidden"
+          popovertarget="menu"
+          popovertargetaction="show"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            class="size-6 fill-current"
+            viewBox="0 0 256 256"
+            aria-hidden="true"
           >
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              class="size-6 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"
             >
-              <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"
-              >
-              </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"
+            </path>
+          </svg>
+          <span class="sr-only">Open menu</span>
+        </button>
+        <div
+          class="absolute inset-x-0 w-full bg-neutral-800 sm:hidden backdrop:bg-neutral-950/80 backdrop:backdrop-blur rounded-b-2xl shadow-lg"
+          popover
+          id="menu"
+        >
+          <div class="flex items-center justify-between px-4 py-4 sm:px-0 sm:py-16">
+            <a
+              class="z-20 outline-offset-2 outline-blue-400 focus-visible:outline-2"
+              href="https://cloudnode.pro"
+            >
+              <img
+                class="h-8"
+                src="https://wsrv.nl?url=https%3A%2F%2Finstatus.com%2Fuser-content%2Fv1688824424%2Fk4zb7ei2gwwbnlezquio.svg"
+                alt="Cloudnode"
+              />
+            </a>
+            <button
+              type="button"
+              class="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 sm:hidden"
+              popovertarget="menu"
+              popovertargetaction="hide"
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                class="size-6 fill-current"
+                viewBox="0 0 256 256"
+                aria-hidden="true"
               >
-                Get updates
-              </button>
-            </ul>
+                <path
+                  d="M208.49,191.51a12,12,0,0,1-17,17L128,145,64.49,208.49a12,12,0,0,1-17-17L111,128,47.51,64.49a12,12,0,0,1,17-17L128,111l63.51-63.52a12,12,0,0,1,17,17L145,128Z"
+                >
+                </path>
+              </svg><span class="sr-only">Close menu</span>
+            </button>
           </div>
-        </details>
+          <nav aria-label="Mobile navigation" class="py-2">
+            ${this.links.map((link) =>
+              html`
+                <a
+                  class="block 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
+              type="button"
+              class="block w-full px-4 py-3 text-start font-medium text-white hover:bg-white/5"
+            >
+              Get updates
+            </button>
+          </nav>
+        </div>
       </header>
     `;
   }

From b3c266273bf5791f844c4ead6b2dc414487ca8dd Mon Sep 17 00:00:00 2001
From: Zefir Kirilov <contact@zefir.pro>
Date: Mon, 16 Mar 2026 08:29:13 +0200
Subject: [PATCH 2/4] improved the mobile nav and made it smoother with
 transitions

---
 src/components/AppHeader.ts | 80 ++++++++++---------------------------
 1 file changed, 21 insertions(+), 59 deletions(-)

diff --git a/src/components/AppHeader.ts b/src/components/AppHeader.ts
index ba9921a..498aab8 100644
--- a/src/components/AppHeader.ts
+++ b/src/components/AppHeader.ts
@@ -26,7 +26,7 @@ export class AppHeader extends Component {
     return html`
       <header
         role="banner"
-        class="flex items-center justify-between px-4 py-4 sm:px-0 sm:py-16"
+        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}"
@@ -38,12 +38,12 @@ export class AppHeader extends Component {
         </a>
         <nav
           aria-label="Desktop navigation"
-          class="hidden items-center gap-2 sm:flex"
+          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}"
@@ -56,62 +56,29 @@ export class AppHeader extends Component {
           >
             Get updates
           </button>
-        </nav>
-        <button
-          type="button"
-          class="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 sm:hidden"
-          popovertarget="menu"
-          popovertargetaction="show"
-        >
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            class="size-6 fill-current"
-            viewBox="0 0 256 256"
-            aria-hidden="true"
+          <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"
           >
-            <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"
+            <svg
+                xmlns="http://www.w3.org/2000/svg"
+                class="size-4 fill-current"
+                viewBox="0 0 256 256"
+                aria-hidden="true"
             >
-            </path>
-          </svg>
-          <span class="sr-only">Open menu</span>
-        </button>
+              <path 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>
+          </button>
+        </nav>
         <div
-          class="absolute inset-x-0 w-full bg-neutral-800 sm:hidden backdrop:bg-neutral-950/80 backdrop:backdrop-blur rounded-b-2xl shadow-lg"
+          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"
         >
-          <div class="flex items-center justify-between px-4 py-4 sm:px-0 sm:py-16">
-            <a
-              class="z-20 outline-offset-2 outline-blue-400 focus-visible:outline-2"
-              href="https://cloudnode.pro"
-            >
-              <img
-                class="h-8"
-                src="https://wsrv.nl?url=https%3A%2F%2Finstatus.com%2Fuser-content%2Fv1688824424%2Fk4zb7ei2gwwbnlezquio.svg"
-                alt="Cloudnode"
-              />
-            </a>
-            <button
-              type="button"
-              class="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 sm:hidden"
-              popovertarget="menu"
-              popovertargetaction="hide"
-            >
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                class="size-6 fill-current"
-                viewBox="0 0 256 256"
-                aria-hidden="true"
-              >
-                <path
-                  d="M208.49,191.51a12,12,0,0,1-17,17L128,145,64.49,208.49a12,12,0,0,1-17-17L111,128,47.51,64.49a12,12,0,0,1,17-17L128,111l63.51-63.52a12,12,0,0,1,17,17L145,128Z"
-                >
-                </path>
-              </svg><span class="sr-only">Close menu</span>
-            </button>
-          </div>
-          <nav aria-label="Mobile navigation" class="py-2">
+          <nav aria-label="Mobile navigation" class="py-2 overflow-hidden">
             ${this.links.map((link) =>
               html`
                 <a
@@ -121,12 +88,7 @@ export class AppHeader extends Component {
                     : link.value}"
                 >${link.label.default}</a>
               `
-            )}<button
-              type="button"
-              class="block w-full px-4 py-3 text-start font-medium text-white hover:bg-white/5"
-            >
-              Get updates
-            </button>
+            )}
           </nav>
         </div>
       </header>

From f88694f245bd2c6b4bdf89c5cf7bd33e3bbe10f0 Mon Sep 17 00:00:00 2001
From: Zefir Kirilov <contact@zefir.pro>
Date: Mon, 16 Mar 2026 08:31:32 +0200
Subject: [PATCH 3/4] added focus-visible outline to mobile nav items

---
 src/components/AppHeader.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/AppHeader.ts b/src/components/AppHeader.ts
index 498aab8..f6febcd 100644
--- a/src/components/AppHeader.ts
+++ b/src/components/AppHeader.ts
@@ -82,7 +82,7 @@ export class AppHeader extends Component {
             ${this.links.map((link) =>
               html`
                 <a
-                  class="block px-4 py-3 text-start font-medium text-white hover:bg-white/5"
+                  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}"

From 806d4d7d608bc68ac6045ada331437c6993422b4 Mon Sep 17 00:00:00 2001
From: Zefir Kirilov <contact@zefir.pro>
Date: Mon, 16 Mar 2026 08:46:36 +0200
Subject: [PATCH 4/4] reformat code

---
 src/components/AppHeader.ts | 21 ++++++++++++---------
 1 file changed, 12 insertions(+), 9 deletions(-)

diff --git a/src/components/AppHeader.ts b/src/components/AppHeader.ts
index f6febcd..cd7d0c2 100644
--- a/src/components/AppHeader.ts
+++ b/src/components/AppHeader.ts
@@ -57,18 +57,21 @@ export class AppHeader extends Component {
             Get updates
           </button>
           <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"
+            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-4 fill-current"
-                viewBox="0 0 256 256"
-                aria-hidden="true"
+              xmlns="http://www.w3.org/2000/svg"
+              class="size-4 fill-current"
+              viewBox="0 0 256 256"
+              aria-hidden="true"
             >
-              <path 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>
+              <path
+                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>
           </button>