Make docs nav parent items expand and collapse only

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,65 +161,58 @@ 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 {
         background-color: #eef6fc;
         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>

src/components/chrome/NavItem.astro

@@ -12,21 +12,24 @@ 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" : "";
 ---
 
 <li class={expanded ? "expanded" : ""}>
-  <a href={node.url} class={pageUrl === node.url ? "selected" : ""}>
-    {node.name}
-  </a>
-
-  {hasChildren && (
-    <button
-      type="button"
-      aria-expanded={expanded}
-      aria-label={`Toggle ${node.name}`}
-    >
+  {hasChildren ? (
+    <button type="button" class={selected} aria-expanded={expanded}>
+      {node.name}
       <Chevron />
     </button>
+  ) : (
+    <a
+      href={node.url}
+      class={selected}
+      aria-current={isCurrent ? "page" : undefined}
+    >
+      {node.name}
+    </a>
   )}
 
   {hasChildren && (