From df4e367ac85bb17202ca025d3bee3da16f2058b2 Mon Sep 17 00:00:00 2001
From: Sean Lynch <techniq35@gmail.com>
Date: Sun, 3 Nov 2024 09:34:30 -0500
Subject: [PATCH] Use anchor links for related items to fix shift+click and
 keyboard navigation.  Fixes #511

---
 .../svelte-ux/src/routes/docs/+layout.svelte  | 32 ++++++++-----------
 1 file changed, 13 insertions(+), 19 deletions(-)

diff --git a/packages/svelte-ux/src/routes/docs/+layout.svelte b/packages/svelte-ux/src/routes/docs/+layout.svelte
index f05b7b3b..33c15ff3 100644
--- 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>