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

39
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">
<DropdownMenu.Trigger>
{#snippet child({ props })}
<Button.Root <Button.Root
{...props}
class="flex items-center p-1 cursor-pointer rounded-full 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" 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> <span><span class="hidden md:inline">Signed in as</span> {data.user.name}</span>
<IconChevronDown /> <IconChevronDown />
</Button.Root> </Button.Root>
{/snippet}
</DropdownMenu.Trigger> </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
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> </a>
{/snippet}
</DropdownMenu.Item> </DropdownMenu.Item>
{/snippet}
{@render DropDownLink(IconDeviceDesktopPin, 'Sessions', '/dash/account/sessions')}
{@render DropDownLink(IconLogout, 'Sign out', '/logout', false)}
</div> </div>
</div> </div>
{/if} {/if}