feat(admin): entity flyout for tablet icon strip (Phase 9 complete)
Tapping any icon in the 48px tablet nav strip now opens a 160px overlay flyout with full entity labels and navigation links. Flyout closes on Escape, backdrop click, or link click. Includes role="dialog", aria-modal, aria-label for WCAG. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Marcel
@@ -22,11 +22,21 @@ let {
|
||||
|
||||
const currentPath = $derived(page.url.pathname);
|
||||
const isActive = (section: string) => currentPath.startsWith(`/admin/${section}`);
|
||||
|
||||
let flyoutOpen = $state(false);
|
||||
|
||||
function handleKeydown(event: KeyboardEvent) {
|
||||
if (event.key === 'Escape' && flyoutOpen) {
|
||||
flyoutOpen = false;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<svelte:document onkeydown={handleKeydown} />
|
||||
|
||||
<!--
|
||||
Desktop (lg+): 120px with text labels
|
||||
Tablet (md–lg): 48px icon-only strip
|
||||
Tablet (md–lg): 48px icon-only strip with flyout panel
|
||||
-->
|
||||
<nav
|
||||
class="flex flex-shrink-0 flex-col bg-brand-navy md:w-12 lg:w-30"
|
||||
@@ -40,16 +50,17 @@ const isActive = (section: string) => currentPath.startsWith(`/admin/${section}`
|
||||
</div>
|
||||
|
||||
{#if canManageUsers}
|
||||
<a
|
||||
href="/admin/users"
|
||||
class="flex flex-col items-center justify-center gap-0.5 border-l-[3px] py-3 transition-colors md:px-0 lg:items-start lg:px-3.5 lg:py-2.5
|
||||
<!-- Tablet trigger button (md only, hidden at lg) -->
|
||||
<button
|
||||
data-flyout-trigger
|
||||
type="button"
|
||||
aria-label={m.admin_tab_users()}
|
||||
onclick={() => (flyoutOpen = true)}
|
||||
class="flex w-full flex-col items-center justify-center gap-0.5 border-l-[3px] py-3 transition-colors lg:hidden
|
||||
{isActive('users')
|
||||
? 'border-brand-mint bg-white/10'
|
||||
: 'border-transparent hover:bg-white/5'}"
|
||||
aria-current={isActive('users') ? 'page' : undefined}
|
||||
title={m.admin_tab_users()}
|
||||
>
|
||||
<!-- Icon: user group (always visible) -->
|
||||
<svg
|
||||
class="h-5 w-5 flex-shrink-0 {isActive('users') ? 'text-brand-mint' : 'text-white/40'}"
|
||||
fill="none"
|
||||
@@ -64,39 +75,58 @@ const isActive = (section: string) => currentPath.startsWith(`/admin/${section}`
|
||||
d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z"
|
||||
/>
|
||||
</svg>
|
||||
<!-- Count: desktop only -->
|
||||
<span
|
||||
class="hidden text-[13px] font-black lg:block {isActive('users') ? 'text-white/65' : 'text-white/20'}"
|
||||
>
|
||||
<span class="text-[9px] font-bold {isActive('users') ? 'text-white/80' : 'text-white/35'}">
|
||||
{userCount}
|
||||
</span>
|
||||
</button>
|
||||
<!-- Desktop link (lg+) -->
|
||||
<a
|
||||
href="/admin/users"
|
||||
class="hidden flex-col items-start justify-center gap-0.5 border-l-[3px] px-3.5 py-2.5 transition-colors lg:flex
|
||||
{isActive('users')
|
||||
? 'border-brand-mint bg-white/10'
|
||||
: 'border-transparent hover:bg-white/5'}"
|
||||
aria-current={isActive('users') ? 'page' : undefined}
|
||||
title={m.admin_tab_users()}
|
||||
>
|
||||
<svg
|
||||
class="h-5 w-5 flex-shrink-0 {isActive('users') ? 'text-brand-mint' : 'text-white/40'}"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z"
|
||||
/>
|
||||
</svg>
|
||||
<span class="text-[13px] font-black {isActive('users') ? 'text-white/65' : 'text-white/20'}">
|
||||
{userCount}
|
||||
</span>
|
||||
<!-- Label: desktop only -->
|
||||
<span
|
||||
class="hidden text-[9px] font-extrabold tracking-[0.5px] uppercase lg:block
|
||||
class="text-[9px] font-extrabold tracking-[0.5px] uppercase
|
||||
{isActive('users') ? 'text-white' : 'text-white/55'}"
|
||||
>
|
||||
{m.admin_tab_users()}
|
||||
</span>
|
||||
<!-- Count badge on tablet -->
|
||||
<span
|
||||
class="text-[9px] font-bold lg:hidden {isActive('users') ? 'text-white/80' : 'text-white/35'}"
|
||||
>
|
||||
{userCount}
|
||||
</span>
|
||||
</a>
|
||||
{/if}
|
||||
|
||||
{#if canManageGroups}
|
||||
<a
|
||||
href="/admin/groups"
|
||||
class="flex flex-col items-center justify-center gap-0.5 border-l-[3px] py-3 transition-colors md:px-0 lg:items-start lg:px-3.5 lg:py-2.5
|
||||
<!-- Tablet trigger button (md only, hidden at lg) -->
|
||||
<button
|
||||
data-flyout-trigger
|
||||
type="button"
|
||||
aria-label={m.admin_tab_groups()}
|
||||
onclick={() => (flyoutOpen = true)}
|
||||
class="flex w-full flex-col items-center justify-center gap-0.5 border-l-[3px] py-3 transition-colors lg:hidden
|
||||
{isActive('groups')
|
||||
? 'border-brand-mint bg-white/10'
|
||||
: 'border-transparent hover:bg-white/5'}"
|
||||
aria-current={isActive('groups') ? 'page' : undefined}
|
||||
title={m.admin_tab_groups()}
|
||||
>
|
||||
<!-- Icon: lock closed -->
|
||||
<svg
|
||||
class="h-5 w-5 flex-shrink-0 {isActive('groups') ? 'text-brand-mint' : 'text-white/40'}"
|
||||
fill="none"
|
||||
@@ -111,36 +141,58 @@ const isActive = (section: string) => currentPath.startsWith(`/admin/${section}`
|
||||
d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z"
|
||||
/>
|
||||
</svg>
|
||||
<span
|
||||
class="hidden text-[13px] font-black lg:block {isActive('groups') ? 'text-white/65' : 'text-white/20'}"
|
||||
<span class="text-[9px] font-bold {isActive('groups') ? 'text-white/80' : 'text-white/35'}">
|
||||
{groupCount}
|
||||
</span>
|
||||
</button>
|
||||
<!-- Desktop link (lg+) -->
|
||||
<a
|
||||
href="/admin/groups"
|
||||
class="hidden flex-col items-start justify-center gap-0.5 border-l-[3px] px-3.5 py-2.5 transition-colors lg:flex
|
||||
{isActive('groups')
|
||||
? 'border-brand-mint bg-white/10'
|
||||
: 'border-transparent hover:bg-white/5'}"
|
||||
aria-current={isActive('groups') ? 'page' : undefined}
|
||||
title={m.admin_tab_groups()}
|
||||
>
|
||||
<svg
|
||||
class="h-5 w-5 flex-shrink-0 {isActive('groups') ? 'text-brand-mint' : 'text-white/40'}"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z"
|
||||
/>
|
||||
</svg>
|
||||
<span class="text-[13px] font-black {isActive('groups') ? 'text-white/65' : 'text-white/20'}">
|
||||
{groupCount}
|
||||
</span>
|
||||
<span
|
||||
class="hidden text-[9px] font-extrabold tracking-[0.5px] uppercase lg:block
|
||||
class="text-[9px] font-extrabold tracking-[0.5px] uppercase
|
||||
{isActive('groups') ? 'text-white' : 'text-white/55'}"
|
||||
>
|
||||
{m.admin_tab_groups()}
|
||||
</span>
|
||||
<span
|
||||
class="text-[9px] font-bold lg:hidden {isActive('groups') ? 'text-white/80' : 'text-white/35'}"
|
||||
>
|
||||
{groupCount}
|
||||
</span>
|
||||
</a>
|
||||
{/if}
|
||||
|
||||
{#if canManageTags}
|
||||
<a
|
||||
href="/admin/tags"
|
||||
class="flex flex-col items-center justify-center gap-0.5 border-l-[3px] py-3 transition-colors md:px-0 lg:items-start lg:px-3.5 lg:py-2.5
|
||||
<!-- Tablet trigger button (md only, hidden at lg) -->
|
||||
<button
|
||||
data-flyout-trigger
|
||||
type="button"
|
||||
aria-label={m.admin_tab_tags()}
|
||||
onclick={() => (flyoutOpen = true)}
|
||||
class="flex w-full flex-col items-center justify-center gap-0.5 border-l-[3px] py-3 transition-colors lg:hidden
|
||||
{isActive('tags')
|
||||
? 'border-brand-mint bg-white/10'
|
||||
: 'border-transparent hover:bg-white/5'}"
|
||||
aria-current={isActive('tags') ? 'page' : undefined}
|
||||
title={m.admin_tab_tags()}
|
||||
>
|
||||
<!-- Icon: tag -->
|
||||
<svg
|
||||
class="h-5 w-5 flex-shrink-0 {isActive('tags') ? 'text-brand-mint' : 'text-white/40'}"
|
||||
fill="none"
|
||||
@@ -156,38 +208,87 @@ const isActive = (section: string) => currentPath.startsWith(`/admin/${section}`
|
||||
/>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M6 6h.008v.008H6V6z" />
|
||||
</svg>
|
||||
<span
|
||||
class="hidden text-[13px] font-black lg:block {isActive('tags') ? 'text-white/65' : 'text-white/20'}"
|
||||
<span class="text-[9px] font-bold {isActive('tags') ? 'text-white/80' : 'text-white/35'}">
|
||||
{tagCount}
|
||||
</span>
|
||||
</button>
|
||||
<!-- Desktop link (lg+) -->
|
||||
<a
|
||||
href="/admin/tags"
|
||||
class="hidden flex-col items-start justify-center gap-0.5 border-l-[3px] px-3.5 py-2.5 transition-colors lg:flex
|
||||
{isActive('tags')
|
||||
? 'border-brand-mint bg-white/10'
|
||||
: 'border-transparent hover:bg-white/5'}"
|
||||
aria-current={isActive('tags') ? 'page' : undefined}
|
||||
title={m.admin_tab_tags()}
|
||||
>
|
||||
<svg
|
||||
class="h-5 w-5 flex-shrink-0 {isActive('tags') ? 'text-brand-mint' : 'text-white/40'}"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M9.568 3H5.25A2.25 2.25 0 003 5.25v4.318c0 .597.237 1.17.659 1.591l9.581 9.581c.699.699 1.78.872 2.607.33a18.095 18.095 0 005.223-5.223c.542-.827.369-1.908-.33-2.607L11.16 3.66A2.25 2.25 0 009.568 3z"
|
||||
/>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M6 6h.008v.008H6V6z" />
|
||||
</svg>
|
||||
<span class="text-[13px] font-black {isActive('tags') ? 'text-white/65' : 'text-white/20'}">
|
||||
{tagCount}
|
||||
</span>
|
||||
<span
|
||||
class="hidden text-[9px] font-extrabold tracking-[0.5px] uppercase lg:block
|
||||
class="text-[9px] font-extrabold tracking-[0.5px] uppercase
|
||||
{isActive('tags') ? 'text-white' : 'text-white/55'}"
|
||||
>
|
||||
{m.admin_tab_tags()}
|
||||
</span>
|
||||
<span
|
||||
class="text-[9px] font-bold lg:hidden {isActive('tags') ? 'text-white/80' : 'text-white/35'}"
|
||||
>
|
||||
{tagCount}
|
||||
</span>
|
||||
</a>
|
||||
{/if}
|
||||
|
||||
<div class="flex-1"></div>
|
||||
|
||||
{#if canRunMaintenance}
|
||||
<!-- Tablet trigger button (md only, hidden at lg) -->
|
||||
<button
|
||||
data-flyout-trigger
|
||||
type="button"
|
||||
aria-label={m.admin_tab_system()}
|
||||
onclick={() => (flyoutOpen = true)}
|
||||
class="flex w-full flex-col items-center justify-center gap-0.5 border-t border-l-[3px] border-white/10 py-3 transition-colors lg:hidden
|
||||
{isActive('system')
|
||||
? 'border-brand-mint bg-white/10'
|
||||
: 'border-l-transparent hover:bg-white/5'}"
|
||||
>
|
||||
<svg
|
||||
class="h-5 w-5 flex-shrink-0 {isActive('system') ? 'text-brand-mint' : 'text-white/40'}"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 011.37.49l1.296 2.247a1.125 1.125 0 01-.26 1.431l-1.003.827c-.293.24-.438.613-.431.992a6.759 6.759 0 010 .255c-.007.378.138.75.43.99l1.005.828c.424.35.534.954.26 1.43l-1.298 2.247a1.125 1.125 0 01-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.57 6.57 0 01-.22.128c-.331.183-.581.495-.644.869l-.213 1.28c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.02-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 01-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 01-1.369-.49l-1.297-2.247a1.125 1.125 0 01.26-1.431l1.004-.827c.292-.24.437-.613.43-.992a6.932 6.932 0 010-.255c.007-.378-.138-.75-.43-.99l-1.004-.828a1.125 1.125 0 01-.26-1.43l1.297-2.247a1.125 1.125 0 011.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.087.22-.128.332-.183.582-.495.644-.869l.214-1.281z"
|
||||
/>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||
</svg>
|
||||
</button>
|
||||
<!-- Desktop link (lg+) -->
|
||||
<a
|
||||
href="/admin/system"
|
||||
class="flex flex-col items-center justify-center gap-0.5 border-t border-l-[3px] border-white/10 py-3 transition-colors md:px-0 lg:items-start lg:px-3.5 lg:py-2.5
|
||||
class="hidden flex-col items-start justify-center gap-0.5 border-t border-l-[3px] border-white/10 px-3.5 py-2.5 transition-colors lg:flex
|
||||
{isActive('system')
|
||||
? 'border-brand-mint bg-white/10'
|
||||
: 'border-l-transparent hover:bg-white/5'}"
|
||||
aria-current={isActive('system') ? 'page' : undefined}
|
||||
title={m.admin_tab_system()}
|
||||
>
|
||||
<!-- Icon: cog -->
|
||||
<svg
|
||||
class="h-5 w-5 flex-shrink-0 {isActive('system') ? 'text-brand-mint' : 'text-white/40'}"
|
||||
fill="none"
|
||||
@@ -204,7 +305,7 @@ const isActive = (section: string) => currentPath.startsWith(`/admin/${section}`
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||
</svg>
|
||||
<span
|
||||
class="hidden text-[9px] font-extrabold tracking-[0.5px] uppercase lg:block
|
||||
class="text-[9px] font-extrabold tracking-[0.5px] uppercase
|
||||
{isActive('system') ? 'text-white' : 'text-white/55'}"
|
||||
>
|
||||
{m.admin_tab_system()}
|
||||
@@ -212,3 +313,180 @@ const isActive = (section: string) => currentPath.startsWith(`/admin/${section}`
|
||||
</a>
|
||||
{/if}
|
||||
</nav>
|
||||
|
||||
{#if flyoutOpen}
|
||||
<!-- Backdrop -->
|
||||
<div
|
||||
data-flyout-backdrop
|
||||
role="none"
|
||||
class="fixed inset-0 z-40 bg-black/40"
|
||||
onclick={() => (flyoutOpen = false)}
|
||||
></div>
|
||||
|
||||
<!-- Flyout panel -->
|
||||
<div
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-label={m.admin_heading()}
|
||||
class="fixed top-0 left-12 z-50 flex h-full w-40 flex-col bg-brand-navy shadow-xl"
|
||||
style="transform: translateX(0); transition: transform 180ms ease-out;"
|
||||
>
|
||||
<!-- Heading -->
|
||||
<div class="px-3 pt-3 pb-1 text-[9px] font-extrabold tracking-widest text-white/30 uppercase">
|
||||
{m.admin_heading()}
|
||||
</div>
|
||||
|
||||
{#if canManageUsers}
|
||||
<a
|
||||
href="/admin/users"
|
||||
onclick={() => (flyoutOpen = false)}
|
||||
class="flex flex-col items-start justify-center gap-0.5 border-l-[3px] px-3.5 py-2.5 transition-colors
|
||||
{isActive('users')
|
||||
? 'border-brand-mint bg-white/10'
|
||||
: 'border-transparent hover:bg-white/5'}"
|
||||
aria-current={isActive('users') ? 'page' : undefined}
|
||||
>
|
||||
<svg
|
||||
class="h-5 w-5 flex-shrink-0 {isActive('users') ? 'text-brand-mint' : 'text-white/40'}"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z"
|
||||
/>
|
||||
</svg>
|
||||
<span
|
||||
class="text-[13px] font-black {isActive('users') ? 'text-white/65' : 'text-white/20'}"
|
||||
>
|
||||
{userCount}
|
||||
</span>
|
||||
<span
|
||||
class="text-[9px] font-extrabold tracking-[0.5px] uppercase
|
||||
{isActive('users') ? 'text-white' : 'text-white/55'}"
|
||||
>
|
||||
{m.admin_tab_users()}
|
||||
</span>
|
||||
</a>
|
||||
{/if}
|
||||
|
||||
{#if canManageGroups}
|
||||
<a
|
||||
href="/admin/groups"
|
||||
onclick={() => (flyoutOpen = false)}
|
||||
class="flex flex-col items-start justify-center gap-0.5 border-l-[3px] px-3.5 py-2.5 transition-colors
|
||||
{isActive('groups')
|
||||
? 'border-brand-mint bg-white/10'
|
||||
: 'border-transparent hover:bg-white/5'}"
|
||||
aria-current={isActive('groups') ? 'page' : undefined}
|
||||
>
|
||||
<svg
|
||||
class="h-5 w-5 flex-shrink-0 {isActive('groups') ? 'text-brand-mint' : 'text-white/40'}"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z"
|
||||
/>
|
||||
</svg>
|
||||
<span
|
||||
class="text-[13px] font-black {isActive('groups') ? 'text-white/65' : 'text-white/20'}"
|
||||
>
|
||||
{groupCount}
|
||||
</span>
|
||||
<span
|
||||
class="text-[9px] font-extrabold tracking-[0.5px] uppercase
|
||||
{isActive('groups') ? 'text-white' : 'text-white/55'}"
|
||||
>
|
||||
{m.admin_tab_groups()}
|
||||
</span>
|
||||
</a>
|
||||
{/if}
|
||||
|
||||
{#if canManageTags}
|
||||
<a
|
||||
href="/admin/tags"
|
||||
onclick={() => (flyoutOpen = false)}
|
||||
class="flex flex-col items-start justify-center gap-0.5 border-l-[3px] px-3.5 py-2.5 transition-colors
|
||||
{isActive('tags')
|
||||
? 'border-brand-mint bg-white/10'
|
||||
: 'border-transparent hover:bg-white/5'}"
|
||||
aria-current={isActive('tags') ? 'page' : undefined}
|
||||
>
|
||||
<svg
|
||||
class="h-5 w-5 flex-shrink-0 {isActive('tags') ? 'text-brand-mint' : 'text-white/40'}"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M9.568 3H5.25A2.25 2.25 0 003 5.25v4.318c0 .597.237 1.17.659 1.591l9.581 9.581c.699.699 1.78.872 2.607.33a18.095 18.095 0 005.223-5.223c.542-.827.369-1.908-.33-2.607L11.16 3.66A2.25 2.25 0 009.568 3z"
|
||||
/>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M6 6h.008v.008H6V6z" />
|
||||
</svg>
|
||||
<span class="text-[13px] font-black {isActive('tags') ? 'text-white/65' : 'text-white/20'}">
|
||||
{tagCount}
|
||||
</span>
|
||||
<span
|
||||
class="text-[9px] font-extrabold tracking-[0.5px] uppercase
|
||||
{isActive('tags') ? 'text-white' : 'text-white/55'}"
|
||||
>
|
||||
{m.admin_tab_tags()}
|
||||
</span>
|
||||
</a>
|
||||
{/if}
|
||||
|
||||
<div class="flex-1"></div>
|
||||
|
||||
{#if canRunMaintenance}
|
||||
<a
|
||||
href="/admin/system"
|
||||
onclick={() => (flyoutOpen = false)}
|
||||
class="flex flex-col items-start justify-center gap-0.5 border-t border-l-[3px] border-white/10 px-3.5 py-2.5 transition-colors
|
||||
{isActive('system')
|
||||
? 'border-brand-mint bg-white/10'
|
||||
: 'border-l-transparent hover:bg-white/5'}"
|
||||
aria-current={isActive('system') ? 'page' : undefined}
|
||||
>
|
||||
<svg
|
||||
class="h-5 w-5 flex-shrink-0 {isActive('system') ? 'text-brand-mint' : 'text-white/40'}"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 011.37.49l1.296 2.247a1.125 1.125 0 01-.26 1.431l-1.003.827c-.293.24-.438.613-.431.992a6.759 6.759 0 010 .255c-.007.378.138.75.43.99l1.005.828c.424.35.534.954.26 1.43l-1.298 2.247a1.125 1.125 0 01-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.57 6.57 0 01-.22.128c-.331.183-.581.495-.644.869l-.213 1.28c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.02-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 01-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 01-1.369-.49l-1.297-2.247a1.125 1.125 0 01.26-1.431l1.004-.827c.292-.24.437-.613.43-.992a6.932 6.932 0 010-.255c.007-.378-.138-.75-.43-.99l-1.004-.828a1.125 1.125 0 01-.26-1.43l1.297-2.247a1.125 1.125 0 011.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.087.22-.128.332-.183.582-.495.644-.869l.214-1.281z"
|
||||
/>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
|
||||
/>
|
||||
</svg>
|
||||
<span
|
||||
class="text-[9px] font-extrabold tracking-[0.5px] uppercase
|
||||
{isActive('system') ? 'text-white' : 'text-white/55'}"
|
||||
>
|
||||
{m.admin_tab_system()}
|
||||
</span>
|
||||
</a>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
81
frontend/src/routes/admin/entity-nav.svelte.spec.ts
Normal file
81
frontend/src/routes/admin/entity-nav.svelte.spec.ts
Normal file
@@ -0,0 +1,81 @@
|
||||
import { afterEach, describe, it, expect, vi } from 'vitest';
|
||||
import { cleanup, render } from 'vitest-browser-svelte';
|
||||
import { page } from 'vitest/browser';
|
||||
import EntityNav from './EntityNav.svelte';
|
||||
|
||||
vi.mock('$app/state', () => ({
|
||||
page: { url: { pathname: '/admin/users' } }
|
||||
}));
|
||||
|
||||
afterEach(cleanup);
|
||||
|
||||
const props = {
|
||||
userCount: 5,
|
||||
groupCount: 3,
|
||||
tagCount: 8,
|
||||
canManageUsers: true,
|
||||
canManageTags: true,
|
||||
canManageGroups: true,
|
||||
canRunMaintenance: true
|
||||
};
|
||||
|
||||
describe('EntityNav — flyout', () => {
|
||||
it('flyout dialog is not visible initially', async () => {
|
||||
render(EntityNav, props);
|
||||
await expect.element(page.getByRole('dialog')).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('clicking a flyout trigger opens the dialog', async () => {
|
||||
render(EntityNav, props);
|
||||
document.querySelector<HTMLButtonElement>('[data-flyout-trigger]')!.click();
|
||||
await expect.element(page.getByRole('dialog')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('flyout dialog has aria-modal="true"', async () => {
|
||||
render(EntityNav, props);
|
||||
document.querySelector<HTMLButtonElement>('[data-flyout-trigger]')!.click();
|
||||
await expect.element(page.getByRole('dialog')).toHaveAttribute('aria-modal', 'true');
|
||||
});
|
||||
|
||||
it('flyout dialog has an aria-label', async () => {
|
||||
render(EntityNav, props);
|
||||
document.querySelector<HTMLButtonElement>('[data-flyout-trigger]')!.click();
|
||||
await expect.element(page.getByRole('dialog')).toBeInTheDocument();
|
||||
const dialog = document.querySelector('[role="dialog"]')!;
|
||||
expect(dialog.getAttribute('aria-label')).toBeTruthy();
|
||||
});
|
||||
|
||||
it('flyout contains navigation links to each entity', async () => {
|
||||
render(EntityNav, props);
|
||||
document.querySelector<HTMLButtonElement>('[data-flyout-trigger]')!.click();
|
||||
await expect.element(page.getByRole('dialog')).toBeInTheDocument();
|
||||
const dialog = document.querySelector('[role="dialog"]')!;
|
||||
const links = dialog.querySelectorAll('a[href^="/admin/"]');
|
||||
expect(links.length).toBeGreaterThanOrEqual(3);
|
||||
});
|
||||
|
||||
it('pressing Escape closes the flyout', async () => {
|
||||
render(EntityNav, props);
|
||||
document.querySelector<HTMLButtonElement>('[data-flyout-trigger]')!.click();
|
||||
await expect.element(page.getByRole('dialog')).toBeInTheDocument();
|
||||
document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }));
|
||||
await expect.element(page.getByRole('dialog')).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('clicking the backdrop closes the flyout', async () => {
|
||||
render(EntityNav, props);
|
||||
document.querySelector<HTMLButtonElement>('[data-flyout-trigger]')!.click();
|
||||
await expect.element(page.getByRole('dialog')).toBeInTheDocument();
|
||||
document.querySelector<HTMLElement>('[data-flyout-backdrop]')!.click();
|
||||
await expect.element(page.getByRole('dialog')).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('clicking a flyout link closes the flyout', async () => {
|
||||
render(EntityNav, props);
|
||||
document.querySelector<HTMLButtonElement>('[data-flyout-trigger]')!.click();
|
||||
await expect.element(page.getByRole('dialog')).toBeInTheDocument();
|
||||
const dialog = document.querySelector('[role="dialog"]')!;
|
||||
dialog.querySelector<HTMLAnchorElement>('a[href^="/admin/"]')!.click();
|
||||
await expect.element(page.getByRole('dialog')).not.toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user