axel/wol-dash
1
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects Releases Wiki Activity

fix: dropdown keyboard navigation - closes #2

Browse Source
This commit is contained in:
axel 2025-04-18 22:21:09 +02:00
parent 7b45197aa7
commit 168409d3c0
1 changed files with 29 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
src/routes/dash/+layout.svelte
View File

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