From 168409d3c05bdaddb5a06f34fb50e482fa446d7d Mon Sep 17 00:00:00 2001
From: axel <contact@axel.moe>
Date: Fri, 18 Apr 2025 22:21:09 +0200
Subject: [PATCH] fix: dropdown keyboard navigation - closes #2

---
 src/routes/dash/+layout.svelte | 57 +++++++++++++++++-----------------
 1 file changed, 29 insertions(+), 28 deletions(-)

diff --git a/src/routes/dash/+layout.svelte b/src/routes/dash/+layout.svelte
index bc2314e..2a10f9f 100644
--- a/src/routes/dash/+layout.svelte
+++ b/src/routes/dash/+layout.svelte
@@ -46,15 +46,21 @@
       <p>{$pageTitle}</p>
     </div>
     <DropdownMenu.Root>
-      <DropdownMenu.Trigger class="rounded-full bg-neutral-950 border border-neutral-600 p-1">
-        <Button.Root
-          class="flex items-center p-1 cursor-pointer rounded-full
-					  pl-3 pr-2 py-1 gap-2 hover:bg-neutral-700 transition-all duration-300 ease-in-out"
-        >
-          <span><span class="hidden md:inline">Signed in as</span> {data.user.name}</span>
-          <IconChevronDown />
-        </Button.Root>
-      </DropdownMenu.Trigger>
+      <div class="rounded-full bg-neutral-950 border border-neutral-600 p-1">
+        <DropdownMenu.Trigger>
+          {#snippet child({ props })}
+            <Button.Root
+              {...props}
+              class="flex items-center p-1 cursor-pointer rounded-full
+                pl-3 pr-2 py-1 gap-2 hover:bg-neutral-700 transition-all duration-300 ease-in-out
+                data-[state=open]:bg-neutral-100 data-[state=open]:text-neutral-900"
+            >
+              <span><span class="hidden md:inline">Signed in as</span> {data.user.name}</span>
+              <IconChevronDown />
+            </Button.Root>
+          {/snippet}
+        </DropdownMenu.Trigger>
+      </div>
       <DropdownMenu.Content
         forceMount
         class="z-1 bg-neutral-950 border border-neutral-600
@@ -64,27 +70,22 @@
           {#if open}
             <div {...wrapperProps}>
               <div {...props} transition:slideFade>
-                <DropdownMenu.Item>
-                  <a
-                    href="/sessions"
-                    class="px-3 py-2 hover:bg-neutral-700 transition-all duration-300 ease-in-out
+                {#snippet DropDownLink(Icon: any, label: string, href: string, preload = true)}
+                  <DropdownMenu.Item
+                    class="px-3 py-2 data-highlighted:bg-neutral-700 transition-all duration-300 ease-in-out
 							      rounded-lg flex items-center justify-between gap-4"
                   >
-                    <p>Sessions</p>
-                    <IconDeviceDesktopPin />
-                  </a>
-                </DropdownMenu.Item>
-                <DropdownMenu.Item>
-                  <a
-                    data-sveltekit-preload-data="tap"
-                    href="/logout"
-                    class="px-3 py-2 hover:bg-neutral-700 transition-all duration-300 ease-in-out
-							      rounded-lg flex items-center justify-between gap-4"
-                  >
-                    <p>Logout</p>
-                    <IconLogout />
-                  </a>
-                </DropdownMenu.Item>
+                    {#snippet child({ props })}
+                      <a {...props} {href} data-sveltekit-preload-data={preload ? 'hover' : 'tap'}>
+                        <p>{label}</p>
+                        <Icon />
+                      </a>
+                    {/snippet}
+                  </DropdownMenu.Item>
+                {/snippet}
+
+                {@render DropDownLink(IconDeviceDesktopPin, 'Sessions', '/dash/account/sessions')}
+                {@render DropDownLink(IconLogout, 'Sign out', '/logout', false)}
               </div>
             </div>
           {/if}