diff --git a/apps/app/src/components-v2/layout/AppSidebar.stories.ts b/apps/app/src/components-v2/layout/AppSidebar.stories.ts index c5ffe438..1800e2e1 100644 --- a/apps/app/src/components-v2/layout/AppSidebar.stories.ts +++ b/apps/app/src/components-v2/layout/AppSidebar.stories.ts @@ -1,5 +1,5 @@ import type { Meta, StoryObj } from '@storybook/vue3-vite' -import { navFixture, orgA, userFixture, withPinia } from '@/stories/v2/_helpers' +import { orgA, userFixture, withPinia } from '@/stories/v2/_helpers' import AppSidebar from '@/components-v2/layout/AppSidebar.vue' import { useAuthStore } from '@/stores/useAuthStore' import { useShellUiStore } from '@/stores/useShellUiStore' @@ -10,6 +10,9 @@ import { useShellUiStore } from '@/stores/useShellUiStore' * via WorkspaceSwitcher, useAuthStore. Each story seeds both stores on a * fresh Pinia. The desktop @@ -119,10 +110,7 @@ const mobileVisible = computed({ }" > - + diff --git a/apps/app/src/components-v2/layout/SidebarNav.stories.ts b/apps/app/src/components-v2/layout/SidebarNav.stories.ts index c44d619f..9b00074c 100644 --- a/apps/app/src/components-v2/layout/SidebarNav.stories.ts +++ b/apps/app/src/components-v2/layout/SidebarNav.stories.ts @@ -1,13 +1,13 @@ import type { Meta, StoryObj } from '@storybook/vue3-vite' import { useRouter } from 'vue-router' -import { navFixture } from '@/stories/v2/_helpers' import SidebarNav from '@/components-v2/layout/SidebarNav.vue' /** - * SidebarNav needs no Pinia, but vue-router is installed app-wide in - * preview.ts (the component uses useRoute + RouterLink). The - * WithActiveItem story pushes the `events` route in setup so the - * Evenementen item renders in its active state. + * SidebarNav now reads APP_NAVIGATION from `@/config/navigation` directly + * (AD-2.5-B1 / Plan 2.5 P4). The previous `groups` prop is gone — stories + * only vary the `collapsed` axis and the active route. vue-router is + * installed app-wide in preview.ts; the WithActiveItem story pushes the + * `v2-dashboard` route so the Dashboard item renders in its active state. */ const meta: Meta = { title: 'v2 Shell/SidebarNav', @@ -22,7 +22,7 @@ export default meta type Story = StoryObj export const Expanded: Story = { - args: { groups: navFixture, collapsed: false }, + args: { collapsed: false }, render: args => ({ components: { SidebarNav }, setup() { @@ -30,14 +30,14 @@ export const Expanded: Story = { }, template: `
- +
`, }), } export const Collapsed: Story = { - args: { groups: navFixture, collapsed: true }, + args: { collapsed: true }, render: args => ({ components: { SidebarNav }, setup() { @@ -45,26 +45,26 @@ export const Collapsed: Story = { }, template: `
- +
`, }), } export const WithActiveItem: Story = { - args: { groups: navFixture, collapsed: false }, + args: { collapsed: false }, render: args => ({ components: { SidebarNav }, setup() { const router = useRouter() - router.push({ name: 'events' }) + router.push({ name: 'v2-dashboard' }) return { args } }, template: `
- +
`, }), diff --git a/apps/app/src/components-v2/layout/SidebarNav.vue b/apps/app/src/components-v2/layout/SidebarNav.vue index 7fac0a39..36365f3c 100644 --- a/apps/app/src/components-v2/layout/SidebarNav.vue +++ b/apps/app/src/components-v2/layout/SidebarNav.vue @@ -1,71 +1,145 @@ diff --git a/apps/app/src/components-v2/layout/WorkspaceSwitcher.vue b/apps/app/src/components-v2/layout/WorkspaceSwitcher.vue index c69cefd3..ea4bdd57 100644 --- a/apps/app/src/components-v2/layout/WorkspaceSwitcher.vue +++ b/apps/app/src/components-v2/layout/WorkspaceSwitcher.vue @@ -23,7 +23,7 @@ import type { Organisation } from '@/types/auth' defineProps<{ /** - * When true (collapsed sidebar), hide the name/sub meta text and + * When true (collapsed sidebar), hide the name meta text and * show only the logo square — mirrors crewli-starter's collapsed prop. */ collapsed?: boolean @@ -43,8 +43,6 @@ interface WorkspaceDisplay { id: string initials: string name: string - /** The role string is the relevant context identifier in Crewli. */ - sub: string gradient: [string, string] } @@ -60,7 +58,6 @@ function buildDisplay(org: Organisation): WorkspaceDisplay { id: org.id, initials, name: org.name, - sub: org.role, gradient: computeOrgGradient(org.id), } } @@ -129,7 +126,7 @@ function selectOrg(ws: WorkspaceDisplay): void { {{ current.initials }} - + {{ current.name }} - - - {{ current.sub }} - @@ -185,12 +178,10 @@ function selectOrg(ws: WorkspaceDisplay): void { :style="{ background: `linear-gradient(135deg, ${ws.gradient[0]}, ${ws.gradient[1]})` }" >{{ ws.initials }} - +
{{ ws.name }}
- -
{{ ws.sub }}
diff --git a/apps/app/src/components-v2/layout/__tests__/AppSidebar.spec.ts b/apps/app/src/components-v2/layout/__tests__/AppSidebar.spec.ts index 32cce9b2..399c68c8 100644 --- a/apps/app/src/components-v2/layout/__tests__/AppSidebar.spec.ts +++ b/apps/app/src/components-v2/layout/__tests__/AppSidebar.spec.ts @@ -4,11 +4,14 @@ * Strategy: mount with @vue/test-utils stubs for all heavy children (SidebarHeader, * SidebarNav, WorkspaceSwitcher, Drawer) so we test only: * 1. Renders the 3 child components (SidebarHeader, SidebarNav, WorkspaceSwitcher). - * 2. Passes `groups` prop to SidebarNav. - * 3. Mobile Drawer v-model:visible wires to shell.mobileOpen (get path). - * 4. Drawer close (v-model:visible = false) calls shell.setMobileOpen(false). - * 5. Drawer is NOT rendered when isMobile=false (desktop); IS rendered when isMobile=true. - * 6. Desktop