fix: possible merge issue in sidebarItem.vue

Author: iropolo

apps/dialtone-documentation/docs/.vuepress/theme/components/SidebarItem.vue

@@ -14,6 +14,8 @@
         <dt-button
           :id="labelId"
           v-bind="attrs"
+          :to="item.link || undefined"
+          :active="isActiveLink(item.link, true)"
           importance="clear"
           kind="muted"
           label-class="d-jc-flex-start d-ta-left d-fw-normal"
@@ -23,15 +25,14 @@
             'd-w100p dialtone-shell-btn',
             {
               'd-headline--eyebrow d-fw-semibold d-bgc-transparent d-c-default': !item.link,
-              'd-btn--active': isActiveLink(isExactActive, item.link, true),
               'd-pr16': depth === 1,
             },
             {
               'd-pl48': depth === 1,
             },
           ]"
           :data-sidebar-link="item.link"
-          @click="handleClick($event, listeners, navigate, item.link)"
+          @click="handleClick($event, listeners, item.link)"
         >
           {{ item.text }}
           <template #endIcon="{ iconSize }">
@@ -55,7 +56,7 @@
           }"
         >
           <li
-            v-for="subItem in subItems"
+            v-for="(subItem, index) in subItems"
             :key="subItem.text"
           >
             <sidebar-item
@@ -136,35 +137,29 @@
     v-else
     class="dt-sidebar-item"
   >
-    <router-link
-      v-slot="{ navigate, isExactActive }"
-      :to="item.link ?? ''"
-      custom
+    <dt-button
+      :to="item.link || undefined"
+      :active="isActiveLink(item.link)"
+      importance="clear"
+      kind="muted"
+      label-class="d-jc-flex-start d-ta-left d-fw-normal"
+      :size="depth === 0 ? 'lg' : undefined"
+      :class="[
+        'd-w100p dialtone-shell-btn',
+        {
+          'd-headline--eyebrow d-fw-semibold d-bgc-transparent d-c-default': !item.link,
+        },
+      ]"
+      :data-sidebar-link="item.link"
     >
-      <dt-button
-        importance="clear"
-        kind="muted"
-        label-class="d-jc-flex-start d-ta-left d-fw-normal"
-        :size="depth === 0 ? 'lg' : undefined"
-        :active="isActiveLink(isExactActive, item.link)"
-        :class="[
-          'd-w100p dialtone-shell-btn',
-          {
-            'd-headline--eyebrow d-fw-semibold d-bgc-transparent d-c-default': !item.link,
-          },
-        ]"
-        :data-sidebar-link="item.link"
-        @click="navigate"
-      >
-        <dt-icon
-          v-if="depth === 0 && item.icon"
-          :name="item.icon"
-          size="400"
-          class="d-mr12 d-fc-muted"
-        />
-        {{ item.text }}
-      </dt-button>
-    </router-link>
+      <dt-icon
+        v-if="depth === 0 && item.icon"
+        :name="item.icon"
+        size="400"
+        class="d-mr12 d-fc-muted"
+      />
+      {{ item.text }}
+    </dt-button>
   </li>
 </template>
 
@@ -223,9 +218,10 @@ watch(route, (newRoute) => {
   hash.value = newRoute.hash;
 });
 
-// isExactActive from the router-link doesn't work with hashes,
-// that's why we need to check for the hash if it's a single page
-const isActiveLink = (isExactActive, link, isParentButton = false) => {
+// isExactActive from router-link doesn't work with hashes,
+// that's why we need to check for the hash if it's a single page.
+// Now computed from route directly instead of router-link's scoped slot.
+const isActiveLink = (link, isParentButton = false) => {
   if (!link) return false;
 
   // Check if this is a grouping-only parent (link matches first child)
@@ -243,10 +239,11 @@ const isActiveLink = (isExactActive, link, isParentButton = false) => {
     return true;
   }
 
+  const isExactActive = route.path === link;
   return props.isSinglePage ? hash.value === link : isExactActive;
 };
 
-function handleClick (event, listeners, navigate, link) {
+function handleClick (event, listeners, link) {
   const itemKey = props.item.link || props.item.text;
 
   // If we're already on this exact page, just toggle the collapsible
@@ -257,13 +254,6 @@ function handleClick (event, listeners, navigate, link) {
     return;
   }
 
-  // We're NOT on this page, so navigate
-  if (link && route.path !== link) {
-    navigate();
-    // Don't emit toggle - route watcher in Sidebar will handle it
-    return;
-  }
-
   // If no link, just toggle
   if (!link) {
     event.preventDefault();