From c0240117d497355243ac4448998d8f6a6736f616 Mon Sep 17 00:00:00 2001
From: Timothy Koech <timosville@gmail.com>
Date: Fri, 10 Jul 2026 09:46:45 +0300
Subject: [PATCH] feat: add nav rail panel story with role-based visibility and
 update sidebar links for admin users

---
 src/frontend/shared/nav-rail-panel.story.vue | 59 ++++++++++++++++++++
 src/frontend/shared/nav-rail-panel.vue       |  2 +-
 src/frontend/test/mocks.ts                   | 13 +++++
 3 files changed, 73 insertions(+), 1 deletion(-)
 create mode 100644 src/frontend/shared/nav-rail-panel.story.vue

diff --git a/src/frontend/shared/nav-rail-panel.story.vue b/src/frontend/shared/nav-rail-panel.story.vue
new file mode 100644
index 00000000..9fe099d2
--- /dev/null
+++ b/src/frontend/shared/nav-rail-panel.story.vue
@@ -0,0 +1,59 @@
+<template>
+  <Story title="Nav rail panel" group="shared">
+    <Variant title="Admin" :setup-app="loadAdmin">
+      <div class="min-h-screen bg-gray-50">
+        <Sidebar />
+      </div>
+    </Variant>
+
+    <Variant title="Editor" :setup-app="loadEditor">
+      <div class="min-h-screen bg-gray-50">
+        <Sidebar />
+      </div>
+    </Variant>
+  </Story>
+</template>
+
+<script setup lang="ts">
+import Sidebar from './sidebar.vue';
+import { adminUser, editorUser, sharedProps } from '../test/mocks';
+import { useSharedStore } from '../store';
+import type { AppUserInterface } from '../../types';
+import type { StoryHandler } from './helpers';
+
+const loadNav = (user: AppUserInterface): StoryHandler => {
+  return (): void => {
+    const shared = useSharedStore();
+    shared.setFromProps({ ...sharedProps, user });
+    shared.setSidebarOpen(true);
+  };
+};
+
+const loadAdmin = loadNav(adminUser);
+const loadEditor = loadNav(editorUser);
+</script>
+
+<docs lang="md">
+# Nav rail panel
+
+Sidebar navigation with role-based visibility.
+
+## Subscription gating
+
+Links controlled by `config.subscriptions` via `subscribed('feature')`: Streams, Stories, Pages, Resources, Invitations, Audience, Interface.
+
+## Admin gating
+
+Requires `isAdmin && subscribed(...)`:
+
+- **Invitations**
+- **Settings**
+
+## Admin only
+
+Requires `isAdmin`:
+
+- **Team**
+
+Compare the **Admin** and **Editor** variants: editors see content links but not Invitations, Settings, or Team.
+</docs>
diff --git a/src/frontend/shared/nav-rail-panel.vue b/src/frontend/shared/nav-rail-panel.vue
index f40d7fd4..0d6a9ff5 100644
--- a/src/frontend/shared/nav-rail-panel.vue
+++ b/src/frontend/shared/nav-rail-panel.vue
@@ -37,7 +37,7 @@
             >
 
             <a
-              v-if="subscribed('invitation')"
+              v-if="isAdmin && subscribed('invitation')"
               :class="classList('invitation')"
               :href="`/${locale}/invitation`"
               >Invitations</a
diff --git a/src/frontend/test/mocks.ts b/src/frontend/test/mocks.ts
index 607993b4..0672d393 100644
--- a/src/frontend/test/mocks.ts
+++ b/src/frontend/test/mocks.ts
@@ -10,6 +10,7 @@ import type {
   StorySpec,
   InvitationItem,
   UiConfig,
+  AppUserInterface,
 } from '../../types.ts';
 import { StoryHandler } from '../shared/helpers.js';
 import { useSharedStore } from '../store/shared.js';
@@ -444,6 +445,18 @@ export const user = {
   isAllowed: (locale: string) => locale === 'en',
 };
 
+export const adminUser: AppUserInterface = {
+  ...user,
+  role: 'admin',
+  isAdmin: true,
+};
+
+export const editorUser: AppUserInterface = {
+  ...user,
+  role: 'editor',
+  isAdmin: false,
+};
+
 export const stories = ['John', 'Acts'];
 
 export const story: StorySpec = {