From fc558996ecc8c72e1ec85294c3fc74ef30ba73ef Mon Sep 17 00:00:00 2001
From: Zach Harel <zach@zharel.me>
Date: Thu, 17 Sep 2026 13:34:49 -0400
Subject: [PATCH] fix hamburger menu

---
 src/starlightOverrides/Header.astro | 55 ++++++-----------------------
 src/styles/global.css               |  6 ++--
 2 files changed, 12 insertions(+), 49 deletions(-)

diff --git a/src/starlightOverrides/Header.astro b/src/starlightOverrides/Header.astro
index e790362b..569b00b1 100644
--- a/src/starlightOverrides/Header.astro
+++ b/src/starlightOverrides/Header.astro
@@ -21,9 +21,7 @@ const { hasSidebar } = Astro.locals.starlightRoute;
                             type="button"
                             class="mobile-menu-toggle"
                             aria-label="Toggle navigation menu"
-                            aria-expanded="false"
-                            aria-controls="starlight__sidebar"
-                            data-mobile-menu-toggle
+                            popovertarget="starlight__sidebar"
                         >
                             <span class="hamburger-line" />
                             <span class="hamburger-line" />
@@ -169,45 +167,6 @@ const { hasSidebar } = Astro.locals.starlightRoute;
     })();
 </script>
 
-<script is:inline>
-    (() => {
-        const initMobileMenuToggle = () => {
-            const toggle = document.querySelector('[data-mobile-menu-toggle]');
-            const nativeButton = document.querySelector(
-                'starlight-menu-button',
-            );
-            const nativeInnerButton = nativeButton?.querySelector('button');
-
-            if (!toggle || !nativeButton || !nativeInnerButton) return;
-
-            toggle.addEventListener('click', () => nativeInnerButton.click());
-
-            const syncExpanded = () => {
-                toggle.setAttribute(
-                    'aria-expanded',
-                    nativeButton.getAttribute('aria-expanded') || 'false',
-                );
-            };
-
-            syncExpanded();
-            new MutationObserver(syncExpanded).observe(nativeButton, {
-                attributes: true,
-                attributeFilter: ['aria-expanded'],
-            });
-        };
-
-        if (
-            document.readyState === 'complete' ||
-            document.readyState === 'interactive'
-        ) {
-            initMobileMenuToggle();
-        } else {
-            document.addEventListener('DOMContentLoaded', initMobileMenuToggle);
-        }
-        document.addEventListener('astro:page-load', initMobileMenuToggle);
-    })();
-</script>
-
 <script is:inline>
     (() => {
         const storageKey = 'starlight-theme';
@@ -502,18 +461,24 @@ const { hasSidebar } = Astro.locals.starlightRoute;
             bottom: 11px;
         }
 
-        .mobile-menu-toggle[aria-expanded='true'] .hamburger-line:nth-child(1) {
+        :global(body:has(#starlight__sidebar:popover-open))
+            .mobile-menu-toggle
+            .hamburger-line:nth-child(1) {
             top: 50%;
             margin-top: -1.5px;
             transform: rotate(45deg);
         }
 
-        .mobile-menu-toggle[aria-expanded='true'] .hamburger-line:nth-child(2) {
+        :global(body:has(#starlight__sidebar:popover-open))
+            .mobile-menu-toggle
+            .hamburger-line:nth-child(2) {
             opacity: 0;
             transform: scale(0);
         }
 
-        .mobile-menu-toggle[aria-expanded='true'] .hamburger-line:nth-child(3) {
+        :global(body:has(#starlight__sidebar:popover-open))
+            .mobile-menu-toggle
+            .hamburger-line:nth-child(3) {
             bottom: auto;
             top: 50%;
             margin-top: -1.5px;
diff --git a/src/styles/global.css b/src/styles/global.css
index b6dca251..375ead8f 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -73,10 +73,8 @@ body {
     overscroll-behavior-y: none;
 }
 
-@media (max-width: 50rem) {
-    starlight-menu-button {
-        display: none !important;
-    }
+.sl-menu-button {
+    display: none !important;
 }
 
 /* ==========================================================================