marcel/familienarchiv
1
0
Fork 0
Code Issues 118 Pull Requests 2 Actions Packages Projects Releases Wiki Activity

feat(admin): responsive entity nav and collapsible list panels (Phase 9)

Browse Source 
EntityNav: hidden on mobile, 48px icon strip at tablet (md), full labels+counts at desktop (lg).
Each list panel collapses to a 32px handle via localStorage-persisted state; auto-collapses when
navigating to the "+New" route. Mobile routing hides the list panel when a detail route is active.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Marcel
2026-03-30 07:19:41 +02:00
parent 06a489567a
commit 3c54401bb2
14 changed files with 540 additions and 178 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
frontend/src/routes/admin/groups/layout.svelte.spec.ts
View File

@@ -1,4 +1,4 @@
import { afterEach, describe, it, expect, vi } from 'vitest';
import { afterEach, beforeEach, describe, it, expect, vi } from 'vitest';
import { cleanup, render } from 'vitest-browser-svelte';
import { page } from 'vitest/browser';
import GroupsListPanel from './GroupsListPanel.svelte';
@@ -77,3 +77,34 @@ describe('GroupsListPanel — empty state', () => {
await expect.element(page.getByText(/keine gruppen/i)).toBeInTheDocument();
});
});
// ─── Collapse toggle ──────────────────────────────────────────────────────────
describe('GroupsListPanel — collapse toggle', () => {
beforeEach(() => localStorage.removeItem('admin_list_collapsed'));
it('renders a collapse button with aria-label', async () => {
render(GroupsListPanel, { groups });
await expect
.element(page.getByRole('button', { name: /Liste einklappen/i }))
.toBeInTheDocument();
});
it('clicking collapse shows the expand handle', async () => {
render(GroupsListPanel, { groups });
await expect
.element(page.getByRole('button', { name: /Liste einklappen/i }))
.toBeInTheDocument();
document.querySelector<HTMLButtonElement>('[aria-label="Liste einklappen"]')!.click();
await expect
.element(page.getByRole('button', { name: /Liste ausklappen/i }))
.toBeInTheDocument();
});
it('autocollapse prop starts the panel in collapsed state', async () => {
render(GroupsListPanel, { groups, autocollapse: true });
await expect
.element(page.getByRole('button', { name: /Liste ausklappen/i }))
.toBeInTheDocument();
});
});