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>
</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}