Use anchor links for related items to fix shift+click and keyboard na…

…vigation. Fixes #511
techniq · Nov 3, 2024 · df4e367 · df4e367
1 parent e8df0a0
commit df4e367
Showing 1 changed file with 13 additions and 19 deletions.
diff --git a/packages/svelte-ux/src/routes/docs/+layout.svelte b/packages/svelte-ux/src/routes/docs/+layout.svelte
@@ -227,25 +227,19 @@
                           : item.type === 'github'
                             ? mdiGithub
                             : mdiLink}
-                  <ListItem
-                    title={item.name.toString()}
-                    {icon}
-                    avatar={{ size: 'sm', class: 'text-xs text-white bg-primary' }}
-                    on:click={() => {
-                      if (item.url instanceof URL) {
-                        // open in new window
-                        window.open(item.url);
-                      } else {
-                        // go to route
-                        goto(item.url);
-                      }
-                    }}
-                    class="hover:bg-surface-200 cursor-pointer"
-                  >
-                    <div slot="actions">
-                      <Icon data={mdiChevronRight} class="text-surface-content/50" />
-                    </div>
-                  </ListItem>
+                  <a href={item.url.toString()} class="group">
+                    <ListItem
+                      title={item.name.toString()}
+                      {icon}
+                      avatar={{ size: 'sm', class: 'text-xs text-white bg-primary' }}
+                      list="group"
+                      class="hover:bg-surface-200 cursor-pointer"
+                    >
+                      <div slot="actions">
+                        <Icon data={mdiChevronRight} class="text-surface-content/50" />
+                      </div>
+                    </ListItem>
+                  </a>
                 {/each}
               </div>
             </div>