diff --git a/web/src/i18n/en.json b/web/src/i18n/en.json index b51343e..d08b7e6 100644 --- a/web/src/i18n/en.json +++ b/web/src/i18n/en.json @@ -1,6 +1,6 @@ { "app": { "name": "Collection" }, - "nav": { "objects": "Objects", "vocabularies": "Vocabularies", "authorities": "Authorities", "fields": "Fields", "search": "Search" }, + "nav": { "objects": "Objects", "vocabularies": "Vocabularies", "authorities": "Authorities", "fields": "Fields", "search": "Search", "collapseSidebar": "Collapse sidebar", "expandSidebar": "Expand sidebar" }, "auth": { "email": "Email", "password": "Password", "signIn": "Sign in", "signOut": "Sign out", "invalid": "Invalid email or password", "networkError": "Could not reach the server" }, "objects": { "title": "Objects", "empty": "No objects yet", "loadError": "Could not load objects", "selectPrompt": "Select an object to view its details", "notFound": "Object not found", "prev": "Previous", "next": "Next", "of": "of", "new": "New object", "filter": "Filter objects…", "pageSize": "Per page", "columns": { "number": "Object №", "name": "Name", "visibility": "Visibility", "location": "Location", "count": "#", "updated": "Updated" } }, "fieldsLabels": { "objectNumber": "Object number", "objectName": "Name", "count": "Number of objects", "briefDescription": "Brief description", "currentLocation": "Current location", "currentOwner": "Current owner", "recorder": "Recorder", "recordingDate": "Recording date", "visibility": "Visibility", "flexible": "Catalogue fields" }, diff --git a/web/src/i18n/sv.json b/web/src/i18n/sv.json index feaaa52..e8cab48 100644 --- a/web/src/i18n/sv.json +++ b/web/src/i18n/sv.json @@ -1,6 +1,6 @@ { "app": { "name": "Samling" }, - "nav": { "objects": "Föremål", "vocabularies": "Vokabulär", "authorities": "Auktoriteter", "fields": "Fält", "search": "Sök" }, + "nav": { "objects": "Föremål", "vocabularies": "Vokabulär", "authorities": "Auktoriteter", "fields": "Fält", "search": "Sök", "collapseSidebar": "Fäll ihop sidofältet", "expandSidebar": "Fäll ut sidofältet" }, "auth": { "email": "E-post", "password": "Lösenord", "signIn": "Logga in", "signOut": "Logga ut", "invalid": "Fel e-post eller lösenord", "networkError": "Kunde inte nå servern" }, "objects": { "title": "Föremål", "empty": "Inga föremål ännu", "loadError": "Kunde inte ladda föremål", "selectPrompt": "Välj ett föremål för att se detaljer", "notFound": "Föremålet hittades inte", "prev": "Föregående", "next": "Nästa", "of": "av", "new": "Nytt föremål", "filter": "Filtrera föremål…", "pageSize": "Per sida", "columns": { "number": "Föremålsnr", "name": "Namn", "visibility": "Synlighet", "location": "Plats", "count": "Antal", "updated": "Uppdaterad" } }, "fieldsLabels": { "objectNumber": "Föremålsnummer", "objectName": "Namn", "count": "Antal föremål", "briefDescription": "Kort beskrivning", "currentLocation": "Nuvarande plats", "currentOwner": "Nuvarande ägare", "recorder": "Registrerad av", "recordingDate": "Registreringsdatum", "visibility": "Synlighet", "flexible": "Katalogfält" }, diff --git a/web/src/shell/app-shell.tsx b/web/src/shell/app-shell.tsx index 43fb481..9262273 100644 --- a/web/src/shell/app-shell.tsx +++ b/web/src/shell/app-shell.tsx @@ -1,9 +1,10 @@ -import { NavLink, Outlet, useNavigate } from "react-router-dom"; +import { Outlet, useNavigate } from "react-router-dom"; import { useTranslation } from "react-i18next"; import { useLogout } from "../api/queries"; import { Button } from "@/components/ui/button"; import { LangSwitch } from "./lang-switch"; +import { Sidebar } from "./sidebar"; export function AppShell() { const { t } = useTranslation(); @@ -17,51 +18,7 @@ export function AppShell() { return (
- +
diff --git a/web/src/shell/sidebar.stories.tsx b/web/src/shell/sidebar.stories.tsx new file mode 100644 index 0000000..60070d6 --- /dev/null +++ b/web/src/shell/sidebar.stories.tsx @@ -0,0 +1,45 @@ +import type { Meta, StoryObj } from '@storybook/react-vite' +import { expect } from 'storybook/test' + +import { Sidebar } from './sidebar' + +const meta = { + component: Sidebar, + tags: ['ai-generated'], +} satisfies Meta + +export default meta +type Story = StoryObj + +// Expanded is the default wide-viewport state: the stored preference is "not +// collapsed", so the nav labels render inline next to their icons. +export const Expanded: Story = { + beforeEach: () => { + localStorage.setItem('sidebar-collapsed', 'false') + }, + play: async ({ canvas }) => { + await expect(canvas.getByRole('link', { name: 'Objects' })).toBeVisible() + await expect(canvas.getByText('Vocabularies')).toBeVisible() + await expect( + canvas.getByRole('button', { name: 'Collapse sidebar' }), + ).toBeVisible() + }, +} + +// Collapsed rail: labels are no longer inline text — each link exposes its +// label only via `aria-label` (and a tooltip rendered in a portal). +export const Collapsed: Story = { + beforeEach: () => { + localStorage.setItem('sidebar-collapsed', 'true') + }, + play: async ({ canvas }) => { + const link = canvas.getByRole('link', { name: 'Objects' }) + await expect(link).toBeVisible() + await expect(link).toHaveAttribute('aria-label', 'Objects') + // No inline label text in the collapsed rail. + await expect(canvas.queryByText('Vocabularies')).not.toBeInTheDocument() + await expect( + canvas.getByRole('button', { name: 'Expand sidebar' }), + ).toBeVisible() + }, +} diff --git a/web/src/shell/sidebar.tsx b/web/src/shell/sidebar.tsx new file mode 100644 index 0000000..e395902 --- /dev/null +++ b/web/src/shell/sidebar.tsx @@ -0,0 +1,126 @@ +import { useEffect, useState } from "react"; +import { NavLink } from "react-router-dom"; +import { useTranslation } from "react-i18next"; +import { + BookMarked, + Boxes, + PanelLeft, + PanelLeftClose, + Search, + Tags, + Users, +} from "lucide-react"; +import type { LucideIcon } from "lucide-react"; + +import { cn } from "@/lib/utils"; +import { Tooltip } from "@/components/ui/tooltip"; +import { useMediaQuery } from "@/lib/use-media-query"; + +const STORAGE_KEY = "sidebar-collapsed"; + +type NavItem = { + to: string; + /** i18n key under `nav.*`. */ + label: string; + Icon: LucideIcon; +}; + +const NAV_ITEMS: readonly NavItem[] = [ + { to: "/objects", label: "nav.objects", Icon: Boxes }, + { to: "/vocabularies", label: "nav.vocabularies", Icon: BookMarked }, + { to: "/authorities", label: "nav.authorities", Icon: Users }, + { to: "/search", label: "nav.search", Icon: Search }, + { to: "/fields", label: "nav.fields", Icon: Tags }, +]; + +function readStored(): boolean { + if (typeof window === "undefined") return false; + return window.localStorage.getItem(STORAGE_KEY) === "true"; +} + +function navLinkClass(collapsed: boolean) { + return ({ isActive }: { isActive: boolean }) => + cn( + "flex items-center gap-2 rounded px-2 py-1 outline-none", + "focus-visible:ring-3 focus-visible:ring-ring/50", + collapsed && "justify-center", + isActive && "bg-neutral-200 font-medium", + ); +} + +export function Sidebar() { + const { t } = useTranslation(); + const narrow = useMediaQuery("(max-width: 768px)"); + const [stored, setStored] = useState(readStored); + + // On narrow viewports the rail is always collapsed regardless of the stored + // preference; the toggle only takes effect when wide. + const collapsed = narrow || stored; + + useEffect(() => { + if (typeof window !== "undefined") { + window.localStorage.setItem(STORAGE_KEY, String(stored)); + } + }, [stored]); + + const toggle = () => setStored((prev) => !prev); + + return ( + + ); +} diff --git a/web/src/test/setup.ts b/web/src/test/setup.ts index 82707c8..6123a07 100644 --- a/web/src/test/setup.ts +++ b/web/src/test/setup.ts @@ -21,6 +21,25 @@ if (typeof globalThis.localStorage === "undefined") { }); } +// jsdom does not implement matchMedia. useMediaQuery (used by the shell +// sidebar) calls it on mount, so provide a minimal non-matching stub. +if (typeof window !== "undefined" && typeof window.matchMedia !== "function") { + Object.defineProperty(window, "matchMedia", { + value: (query: string): MediaQueryList => + ({ + matches: false, + media: query, + onchange: null, + addEventListener: () => {}, + removeEventListener: () => {}, + addListener: () => {}, + removeListener: () => {}, + dispatchEvent: () => false, + }) as MediaQueryList, + writable: true, + }); +} + // Start MSW at module level so its fetch patch is in place before any test // module captures globalThis.fetch via openapi-fetch's createClient(). server.listen({ onUnhandledRequest: "error" });