From 69b10a3e44c3123caaae47fa9854dda5b0cc8a0c Mon Sep 17 00:00:00 2001
From: Timur Mashara <timur@metabase.com>
Date: Tue, 13 Oct 2026 11:26:17 +0200
Subject: [PATCH 1/3] revert parent nav items links

---
 src/components/chrome/LeftSidebar.astro | 70 +++++++++++--------------
 src/components/chrome/NavItem.astro     | 17 +++---
 2 files changed, 41 insertions(+), 46 deletions(-)

diff --git a/src/components/chrome/LeftSidebar.astro b/src/components/chrome/LeftSidebar.astro
index 089eeef6ba..e71e2f2590 100644
--- a/src/components/chrome/LeftSidebar.astro
+++ b/src/components/chrome/LeftSidebar.astro
@@ -39,9 +39,7 @@ const { url: pageUrl, categories } = Astro.props;
   drawer.addEventListener("click", (e) => {
     if (e.target === e.currentTarget) return setDocsNavOpen(false);
 
-    const item = (e.target as Element)
-      .closest("button, a:not([href])")
-      ?.closest("li");
+    const item = (e.target as Element).closest("li > button")?.parentElement;
     if (!item) return;
 
     drawer.querySelectorAll("li.expanded").forEach((open) => {
@@ -138,7 +136,6 @@ const { url: pageUrl, categories } = Astro.props;
     li {
       margin: 0;
       padding: 0 0 4px;
-      position: relative;
 
       ul {
         display: none;
@@ -164,51 +161,24 @@ const { url: pageUrl, categories } = Astro.props;
       }
     }
 
-    li > button {
-      align-items: center;
-      appearance: none;
+    li > button,
+    a {
       background: none;
       border: 0;
-      cursor: pointer;
-      display: flex;
-      height: 29px;
-      justify-content: center;
-      padding: 0;
-      position: absolute;
-      right: 2px;
-      top: 0;
-      width: 30px;
-
-      svg {
-        display: block;
-        height: 12px;
-        transform: rotate(-90deg);
-        transition: transform 0.3s ease-in-out;
-        width: 20px;
-      }
-
-      svg path {
-        stroke: #c6c9d2;
-        transition: stroke 0.3s ease-in-out;
-      }
-
-      &:hover svg path {
-        stroke: #509ee3;
-      }
-    }
-
-    a {
       border-radius: 8px;
       color: #5a6072;
       display: block;
+      font: inherit;
       font-size: 14px;
       font-weight: 400;
       line-height: 20px;
       padding: 4px 38px 5px 8px;
       position: relative;
+      text-align: left;
       transition:
         background-color 0.3s ease,
         color 0.3s ease;
+      width: 100%;
 
       &:hover,
       &.selected {
@@ -216,13 +186,33 @@ const { url: pageUrl, categories } = Astro.props;
         color: #509ee3;
       }
 
-      &.selected + button svg path {
-        stroke: #509ee3;
-      }
-
       &.selected {
         font-weight: 700;
       }
     }
+
+    li > button {
+      cursor: pointer;
+
+      svg {
+        height: 12px;
+        position: absolute;
+        right: 7px;
+        top: 8px;
+        transform: rotate(-90deg);
+        transition: transform 0.3s ease-in-out;
+        width: 20px;
+      }
+
+      svg path {
+        stroke: #c6c9d2;
+        transition: stroke 0.3s ease-in-out;
+      }
+
+      &:hover svg path,
+      &.selected svg path {
+        stroke: #509ee3;
+      }
+    }
   }
 </style>
diff --git a/src/components/chrome/NavItem.astro b/src/components/chrome/NavItem.astro
index 2fb9800320..2dc88456a5 100644
--- a/src/components/chrome/NavItem.astro
+++ b/src/components/chrome/NavItem.astro
@@ -12,21 +12,26 @@ const { node, pageUrl } = Astro.props;
 
 const hasChildren = Boolean(node.pages && node.pages.length > 0);
 const expanded = containsUrl(node, pageUrl);
+const isCurrent = pageUrl === node.url;
+const selected = isCurrent ? "selected" : "";
+const current = isCurrent ? "page" : undefined;
 ---
 
 <li class={expanded ? "expanded" : ""}>
-  <a href={node.url} class={pageUrl === node.url ? "selected" : ""}>
-    {node.name}
-  </a>
-
-  {hasChildren && (
+  {hasChildren ? (
     <button
       type="button"
+      class={selected}
+      aria-current={current}
       aria-expanded={expanded}
-      aria-label={`Toggle ${node.name}`}
     >
+      {node.name}
       <Chevron />
     </button>
+  ) : (
+    <a href={node.url} class={selected} aria-current={current}>
+      {node.name}
+    </a>
   )}
 
   {hasChildren && (

From 1826c9a1e97b1999c4ebcdcc9b4a632011e4b4cc Mon Sep 17 00:00:00 2001
From: Timur Mashara <timur@metabase.com>
Date: Tue, 13 Oct 2026 15:57:39 +0200
Subject: [PATCH 2/3] Drop aria-current from parent nav toggles

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/components/chrome/NavItem.astro | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/components/chrome/NavItem.astro b/src/components/chrome/NavItem.astro
index 2dc88456a5..003e45f6a7 100644
--- a/src/components/chrome/NavItem.astro
+++ b/src/components/chrome/NavItem.astro
@@ -14,7 +14,6 @@ const hasChildren = Boolean(node.pages && node.pages.length > 0);
 const expanded = containsUrl(node, pageUrl);
 const isCurrent = pageUrl === node.url;
 const selected = isCurrent ? "selected" : "";
-const current = isCurrent ? "page" : undefined;
 ---
 
 <li class={expanded ? "expanded" : ""}>
@@ -22,14 +21,13 @@ const current = isCurrent ? "page" : undefined;
     <button
       type="button"
       class={selected}
-      aria-current={current}
       aria-expanded={expanded}
     >
       {node.name}
       <Chevron />
     </button>
   ) : (
-    <a href={node.url} class={selected} aria-current={current}>
+    <a href={node.url} class={selected} aria-current={isCurrent ? "page" : undefined}>
       {node.name}
     </a>
   )}

From 0418e78e8e7dccb965c3cec51f2eaac0f908ebc5 Mon Sep 17 00:00:00 2001
From: Timur Mashara <timur@metabase.com>
Date: Tue, 13 Oct 2026 15:58:12 +0200
Subject: [PATCH 3/3] Format NavItem

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/components/chrome/NavItem.astro | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/chrome/NavItem.astro b/src/components/chrome/NavItem.astro
index 003e45f6a7..6f2ced95d6 100644
--- a/src/components/chrome/NavItem.astro
+++ b/src/components/chrome/NavItem.astro
@@ -18,16 +18,16 @@ const selected = isCurrent ? "selected" : "";
 
 <li class={expanded ? "expanded" : ""}>
   {hasChildren ? (
-    <button
-      type="button"
-      class={selected}
-      aria-expanded={expanded}
-    >
+    <button type="button" class={selected} aria-expanded={expanded}>
       {node.name}
       <Chevron />
     </button>
   ) : (
-    <a href={node.url} class={selected} aria-current={isCurrent ? "page" : undefined}>
+    <a
+      href={node.url}
+      class={selected}
+      aria-current={isCurrent ? "page" : undefined}
+    >
       {node.name}
     </a>
   )}