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: `
`,
}),
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