refactor(admin): extract EntityNavSection to eliminate nav markup repetition (#197)
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Marcel
@@ -3,6 +3,7 @@ import { tick } from 'svelte';
|
||||
import { fly } from 'svelte/transition';
|
||||
import { page } from '$app/state';
|
||||
import { m } from '$lib/paraglide/messages.js';
|
||||
import EntityNavSection from './EntityNavSection.svelte';
|
||||
|
||||
let {
|
||||
userCount,
|
||||
@@ -51,6 +52,76 @@ function handleKeydown(event: KeyboardEvent) {
|
||||
}
|
||||
</script>
|
||||
|
||||
{#snippet usersIcon()}
|
||||
<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>
|
||||
{/snippet}
|
||||
|
||||
{#snippet groupsIcon()}
|
||||
<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>
|
||||
{/snippet}
|
||||
|
||||
{#snippet tagsIcon()}
|
||||
<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>
|
||||
{/snippet}
|
||||
|
||||
{#snippet systemIcon()}
|
||||
<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>
|
||||
{/snippet}
|
||||
|
||||
<svelte:document onkeydown={handleKeydown} />
|
||||
|
||||
<!--
|
||||
@@ -69,271 +140,53 @@ function handleKeydown(event: KeyboardEvent) {
|
||||
</div>
|
||||
|
||||
{#if canManageUsers}
|
||||
<!-- Tablet trigger button (md only, hidden at lg) -->
|
||||
<button
|
||||
data-flyout-trigger
|
||||
type="button"
|
||||
aria-label={m.admin_tab_users()}
|
||||
title={m.admin_tab_users()}
|
||||
onclick={openFlyout}
|
||||
class="flex min-h-[44px] 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'}"
|
||||
>
|
||||
<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-[9px] font-bold {isActive('users') ? 'text-white/80' : 'text-white/35'}">
|
||||
{userCount}
|
||||
</span>
|
||||
</button>
|
||||
<!-- Desktop link (lg+) -->
|
||||
<a
|
||||
<EntityNavSection
|
||||
variant="sidebar"
|
||||
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/50'}">
|
||||
{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>
|
||||
label={m.admin_tab_users()}
|
||||
isActive={isActive('users')}
|
||||
count={userCount}
|
||||
onTabletTrigger={openFlyout}
|
||||
icon={usersIcon}
|
||||
/>
|
||||
{/if}
|
||||
|
||||
{#if canManagePermissions}
|
||||
<!-- Tablet trigger button (md only, hidden at lg) -->
|
||||
<button
|
||||
data-flyout-trigger
|
||||
type="button"
|
||||
aria-label={m.admin_tab_groups()}
|
||||
title={m.admin_tab_groups()}
|
||||
onclick={openFlyout}
|
||||
class="flex min-h-[44px] 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'}"
|
||||
>
|
||||
<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-[9px] font-bold {isActive('groups') ? 'text-white/80' : 'text-white/35'}">
|
||||
{groupCount}
|
||||
</span>
|
||||
</button>
|
||||
<!-- Desktop link (lg+) -->
|
||||
<a
|
||||
<EntityNavSection
|
||||
variant="sidebar"
|
||||
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/50'}">
|
||||
{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>
|
||||
label={m.admin_tab_groups()}
|
||||
isActive={isActive('groups')}
|
||||
count={groupCount}
|
||||
onTabletTrigger={openFlyout}
|
||||
icon={groupsIcon}
|
||||
/>
|
||||
{/if}
|
||||
|
||||
{#if canManageTags}
|
||||
<!-- Tablet trigger button (md only, hidden at lg) -->
|
||||
<button
|
||||
data-flyout-trigger
|
||||
type="button"
|
||||
aria-label={m.admin_tab_tags()}
|
||||
title={m.admin_tab_tags()}
|
||||
onclick={openFlyout}
|
||||
class="flex min-h-[44px] 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'}"
|
||||
>
|
||||
<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-[9px] font-bold {isActive('tags') ? 'text-white/80' : 'text-white/35'}">
|
||||
{tagCount}
|
||||
</span>
|
||||
</button>
|
||||
<!-- Desktop link (lg+) -->
|
||||
<a
|
||||
<EntityNavSection
|
||||
variant="sidebar"
|
||||
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/50'}">
|
||||
{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>
|
||||
label={m.admin_tab_tags()}
|
||||
isActive={isActive('tags')}
|
||||
count={tagCount}
|
||||
onTabletTrigger={openFlyout}
|
||||
icon={tagsIcon}
|
||||
/>
|
||||
{/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()}
|
||||
title={m.admin_tab_system()}
|
||||
onclick={openFlyout}
|
||||
class="flex min-h-[44px] 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
|
||||
<EntityNavSection
|
||||
variant="sidebar"
|
||||
href="/admin/system"
|
||||
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()}
|
||||
>
|
||||
<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>
|
||||
label={m.admin_tab_system()}
|
||||
isActive={isActive('system')}
|
||||
topBorder={true}
|
||||
onTabletTrigger={openFlyout}
|
||||
icon={systemIcon}
|
||||
/>
|
||||
{/if}
|
||||
</nav>
|
||||
|
||||
@@ -360,156 +213,53 @@ function handleKeydown(event: KeyboardEvent) {
|
||||
</div>
|
||||
|
||||
{#if canManageUsers}
|
||||
<a
|
||||
<EntityNavSection
|
||||
variant="flyout"
|
||||
href="/admin/users"
|
||||
onclick={closeFlyout}
|
||||
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/50'}"
|
||||
>
|
||||
{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>
|
||||
label={m.admin_tab_users()}
|
||||
isActive={isActive('users')}
|
||||
count={userCount}
|
||||
onFlyoutClick={closeFlyout}
|
||||
icon={usersIcon}
|
||||
/>
|
||||
{/if}
|
||||
|
||||
{#if canManagePermissions}
|
||||
<a
|
||||
<EntityNavSection
|
||||
variant="flyout"
|
||||
href="/admin/groups"
|
||||
onclick={closeFlyout}
|
||||
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/50'}"
|
||||
>
|
||||
{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>
|
||||
label={m.admin_tab_groups()}
|
||||
isActive={isActive('groups')}
|
||||
count={groupCount}
|
||||
onFlyoutClick={closeFlyout}
|
||||
icon={groupsIcon}
|
||||
/>
|
||||
{/if}
|
||||
|
||||
{#if canManageTags}
|
||||
<a
|
||||
<EntityNavSection
|
||||
variant="flyout"
|
||||
href="/admin/tags"
|
||||
onclick={closeFlyout}
|
||||
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/50'}">
|
||||
{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>
|
||||
label={m.admin_tab_tags()}
|
||||
isActive={isActive('tags')}
|
||||
count={tagCount}
|
||||
onFlyoutClick={closeFlyout}
|
||||
icon={tagsIcon}
|
||||
/>
|
||||
{/if}
|
||||
|
||||
<div class="flex-1"></div>
|
||||
|
||||
{#if canRunMaintenance}
|
||||
<a
|
||||
<EntityNavSection
|
||||
variant="flyout"
|
||||
href="/admin/system"
|
||||
onclick={closeFlyout}
|
||||
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>
|
||||
label={m.admin_tab_system()}
|
||||
isActive={isActive('system')}
|
||||
topBorder={true}
|
||||
onFlyoutClick={closeFlyout}
|
||||
icon={systemIcon}
|
||||
/>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
90
frontend/src/routes/admin/EntityNavSection.svelte
Normal file
90
frontend/src/routes/admin/EntityNavSection.svelte
Normal file
@@ -0,0 +1,90 @@
|
||||
<script lang="ts">
|
||||
import type { Snippet } from 'svelte';
|
||||
|
||||
interface Props {
|
||||
href: string;
|
||||
label: string;
|
||||
isActive: boolean;
|
||||
count?: number;
|
||||
topBorder?: boolean;
|
||||
icon: Snippet;
|
||||
variant?: 'sidebar' | 'flyout';
|
||||
onTabletTrigger?: (event: MouseEvent) => void;
|
||||
onFlyoutClick?: () => void;
|
||||
}
|
||||
|
||||
let {
|
||||
href,
|
||||
label,
|
||||
isActive,
|
||||
count,
|
||||
topBorder = false,
|
||||
icon,
|
||||
variant = 'sidebar',
|
||||
onTabletTrigger,
|
||||
onFlyoutClick
|
||||
}: Props = $props();
|
||||
</script>
|
||||
|
||||
{#if variant === 'sidebar'}
|
||||
<!-- Tablet button (visible at md, hidden at lg) -->
|
||||
<button
|
||||
data-flyout-trigger
|
||||
type="button"
|
||||
aria-label={label}
|
||||
title={label}
|
||||
onclick={onTabletTrigger}
|
||||
class="flex min-h-[44px] w-full flex-col items-center justify-center gap-0.5 border-l-[3px] py-3 transition-colors lg:hidden
|
||||
{topBorder ? 'border-t border-white/10' : ''}
|
||||
{isActive ? 'border-brand-mint bg-white/10' : (topBorder ? 'border-l-transparent hover:bg-white/5' : 'border-transparent hover:bg-white/5')}"
|
||||
>
|
||||
{@render icon()}
|
||||
{#if count !== undefined}
|
||||
<span class="text-[9px] font-bold {isActive ? 'text-white/80' : 'text-white/35'}"
|
||||
>{count}</span
|
||||
>
|
||||
{/if}
|
||||
</button>
|
||||
|
||||
<!-- Desktop link (hidden at md, visible at lg) -->
|
||||
<a
|
||||
href={href}
|
||||
class="hidden flex-col items-start justify-center gap-0.5 border-l-[3px] px-3.5 py-2.5 transition-colors lg:flex
|
||||
{topBorder ? 'border-t border-white/10' : ''}
|
||||
{isActive ? 'border-brand-mint bg-white/10' : (topBorder ? 'border-l-transparent hover:bg-white/5' : 'border-transparent hover:bg-white/5')}"
|
||||
aria-current={isActive ? 'page' : undefined}
|
||||
title={label}
|
||||
>
|
||||
{@render icon()}
|
||||
{#if count !== undefined}
|
||||
<span class="text-[13px] font-black {isActive ? 'text-white/65' : 'text-white/50'}"
|
||||
>{count}</span
|
||||
>
|
||||
{/if}
|
||||
<span
|
||||
class="text-[9px] font-extrabold tracking-[0.5px] uppercase {isActive ? 'text-white' : 'text-white/55'}"
|
||||
>{label}</span
|
||||
>
|
||||
</a>
|
||||
{:else}
|
||||
<!-- Flyout link -->
|
||||
<a
|
||||
href={href}
|
||||
onclick={onFlyoutClick}
|
||||
class="flex flex-col items-start justify-center gap-0.5 border-l-[3px] px-3.5 py-2.5 transition-colors
|
||||
{topBorder ? 'border-t border-white/10' : ''}
|
||||
{isActive ? 'border-brand-mint bg-white/10' : (topBorder ? 'border-l-transparent hover:bg-white/5' : 'border-transparent hover:bg-white/5')}"
|
||||
aria-current={isActive ? 'page' : undefined}
|
||||
>
|
||||
{@render icon()}
|
||||
{#if count !== undefined}
|
||||
<span class="text-[13px] font-black {isActive ? 'text-white/65' : 'text-white/50'}"
|
||||
>{count}</span
|
||||
>
|
||||
{/if}
|
||||
<span
|
||||
class="text-[9px] font-extrabold tracking-[0.5px] uppercase {isActive ? 'text-white' : 'text-white/55'}"
|
||||
>{label}</span
|
||||
>
|
||||
</a>
|
||||
{/if}
|
||||
140
frontend/src/routes/admin/EntityNavSection.svelte.spec.ts
Normal file
140
frontend/src/routes/admin/EntityNavSection.svelte.spec.ts
Normal file
@@ -0,0 +1,140 @@
|
||||
import { afterEach, describe, it, expect } from 'vitest';
|
||||
import { cleanup, render } from 'vitest-browser-svelte';
|
||||
import { page } from 'vitest/browser';
|
||||
import { createRawSnippet } from 'svelte';
|
||||
import EntityNavSection from './EntityNavSection.svelte';
|
||||
|
||||
afterEach(cleanup);
|
||||
|
||||
const testIcon = createRawSnippet(() => ({
|
||||
render: () => `<svg aria-label="test-icon" aria-hidden="true"></svg>`,
|
||||
setup: () => {}
|
||||
}));
|
||||
|
||||
const baseProps = {
|
||||
href: '/admin/users',
|
||||
label: 'Benutzer',
|
||||
icon: testIcon
|
||||
};
|
||||
|
||||
describe('EntityNavSection — sidebar variant (default)', () => {
|
||||
it('tablet button has border-brand-mint class when isActive=true', async () => {
|
||||
render(EntityNavSection, { ...baseProps, isActive: true });
|
||||
const button = document.querySelector('button[data-flyout-trigger]')!;
|
||||
expect(button.className).toContain('border-brand-mint');
|
||||
});
|
||||
|
||||
it('tablet button has border-transparent class when isActive=false', async () => {
|
||||
render(EntityNavSection, { ...baseProps, isActive: false });
|
||||
const button = document.querySelector('button[data-flyout-trigger]')!;
|
||||
expect(button.className).toContain('border-transparent');
|
||||
});
|
||||
|
||||
it('renders count span when count is provided', async () => {
|
||||
render(EntityNavSection, { ...baseProps, isActive: false, count: 42 });
|
||||
// Sidebar renders two elements (tablet button + desktop link), each with a count span
|
||||
const countSpans = document.querySelectorAll('span');
|
||||
const countTexts = Array.from(countSpans).filter((s) => s.textContent?.trim() === '42');
|
||||
expect(countTexts.length).toBeGreaterThanOrEqual(1);
|
||||
});
|
||||
|
||||
it('does not render count span when count is undefined', async () => {
|
||||
render(EntityNavSection, { ...baseProps, isActive: false });
|
||||
// No numeric count element — the label text is present but no count span
|
||||
const spans = document.querySelectorAll('button[data-flyout-trigger] span');
|
||||
expect(spans.length).toBe(0);
|
||||
});
|
||||
|
||||
it('desktop link has hidden and lg:flex classes', async () => {
|
||||
render(EntityNavSection, { ...baseProps, isActive: false });
|
||||
const link = document.querySelector('a[href="/admin/users"]')!;
|
||||
expect(link.className).toContain('hidden');
|
||||
expect(link.className).toContain('lg:flex');
|
||||
});
|
||||
|
||||
it('desktop link has aria-current=page when isActive=true', async () => {
|
||||
render(EntityNavSection, { ...baseProps, isActive: true });
|
||||
await expect
|
||||
.element(page.getByRole('link', { name: 'Benutzer' }))
|
||||
.toHaveAttribute('aria-current', 'page');
|
||||
});
|
||||
|
||||
it('desktop link does not have aria-current when isActive=false', async () => {
|
||||
render(EntityNavSection, { ...baseProps, isActive: false });
|
||||
await expect
|
||||
.element(page.getByRole('link', { name: 'Benutzer' }))
|
||||
.not.toHaveAttribute('aria-current');
|
||||
});
|
||||
|
||||
it('renders the icon in the tablet button', async () => {
|
||||
render(EntityNavSection, { ...baseProps, isActive: false });
|
||||
const button = document.querySelector('button[data-flyout-trigger]')!;
|
||||
expect(button.querySelector('svg')).not.toBeNull();
|
||||
});
|
||||
|
||||
it('renders count in desktop link when count is provided', async () => {
|
||||
render(EntityNavSection, { ...baseProps, isActive: false, count: 7 });
|
||||
const link = document.querySelector('a[href="/admin/users"]')!;
|
||||
expect(link.textContent).toContain('7');
|
||||
});
|
||||
});
|
||||
|
||||
describe('EntityNavSection — topBorder prop', () => {
|
||||
it('tablet button has border-l-transparent (not border-transparent) when topBorder=true and inactive', async () => {
|
||||
render(EntityNavSection, { ...baseProps, isActive: false, topBorder: true });
|
||||
const button = document.querySelector('button[data-flyout-trigger]')!;
|
||||
expect(button.className).toContain('border-l-transparent');
|
||||
expect(button.className).not.toContain('border-transparent hover:bg-white/5');
|
||||
});
|
||||
|
||||
it('tablet button still has border-brand-mint when topBorder=true and isActive=true', async () => {
|
||||
render(EntityNavSection, { ...baseProps, isActive: true, topBorder: true });
|
||||
const button = document.querySelector('button[data-flyout-trigger]')!;
|
||||
expect(button.className).toContain('border-brand-mint');
|
||||
});
|
||||
});
|
||||
|
||||
describe('EntityNavSection — flyout variant', () => {
|
||||
it('renders a single anchor element (no button) in flyout variant', async () => {
|
||||
render(EntityNavSection, { ...baseProps, isActive: false, variant: 'flyout' });
|
||||
expect(document.querySelector('button[data-flyout-trigger]')).toBeNull();
|
||||
expect(document.querySelector('a[href="/admin/users"]')).not.toBeNull();
|
||||
});
|
||||
|
||||
it('flyout link has border-brand-mint class when isActive=true', async () => {
|
||||
render(EntityNavSection, { ...baseProps, isActive: true, variant: 'flyout' });
|
||||
const link = document.querySelector('a[href="/admin/users"]')!;
|
||||
expect(link.className).toContain('border-brand-mint');
|
||||
});
|
||||
|
||||
it('flyout link has border-transparent class when isActive=false', async () => {
|
||||
render(EntityNavSection, { ...baseProps, isActive: false, variant: 'flyout' });
|
||||
const link = document.querySelector('a[href="/admin/users"]')!;
|
||||
expect(link.className).toContain('border-transparent');
|
||||
});
|
||||
|
||||
it('flyout link shows count when count=42', async () => {
|
||||
render(EntityNavSection, { ...baseProps, isActive: false, variant: 'flyout', count: 42 });
|
||||
await expect.element(page.getByText('42')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('flyout link has aria-current=page when isActive=true', async () => {
|
||||
render(EntityNavSection, { ...baseProps, isActive: true, variant: 'flyout' });
|
||||
const link = document.querySelector('a[href="/admin/users"]')!;
|
||||
expect(link.getAttribute('aria-current')).toBe('page');
|
||||
});
|
||||
|
||||
it('flyout link calls onFlyoutClick when clicked', async () => {
|
||||
let called = false;
|
||||
render(EntityNavSection, {
|
||||
...baseProps,
|
||||
isActive: false,
|
||||
variant: 'flyout',
|
||||
onFlyoutClick: () => {
|
||||
called = true;
|
||||
}
|
||||
});
|
||||
document.querySelector<HTMLAnchorElement>('a[href="/admin/users"]')!.click();
|
||||
expect(called).toBe(true);
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user