@commonpub/layer 0.11.0 → 0.13.0

package/components/nav/NavRenderer.vue

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import type { NavItem } from '@commonpub/server';
+
+defineProps<{
+  items: NavItem[];
+  openDropdown: string | null;
+}>();
+
+const emit = defineEmits<{
+  'toggle-dropdown': [name: string];
+  'close-dropdowns': [];
+}>();
+
+const { isAuthenticated, isAdmin } = useAuth();
+const features = useFeatures();
+
+const featureMap = computed(() => {
+  const map: Record<string, boolean> = {};
+  for (const [key, val] of Object.entries(features)) {
+    if (typeof val === 'object' && val !== null && 'value' in val) {
+      map[key] = (val as { value: boolean }).value;
+    }
+  }
+  return map;
+});
+
+function isVisible(item: NavItem): boolean {
+  if (item.featureGate && !featureMap.value[item.featureGate]) return false;
+  if (item.visibleTo === 'authenticated' && !isAuthenticated.value) return false;
+  if (item.visibleTo === 'admin' && !isAdmin.value) return false;
+  return true;
+}
+</script>
+
+<template>
+  <nav class="cpub-topbar-nav" aria-label="Main navigation">
+    <template v-for="item in items" :key="item.id">
+      <NavDropdown
+        v-if="item.type === 'dropdown' && isVisible(item)"
+        :item="item"
+        :open="openDropdown === item.id"
+        @toggle="emit('toggle-dropdown', item.id)"
+        @close="emit('close-dropdowns')"
+      />
+      <NavLink
+        v-else-if="isVisible(item)"
+        :item="item"
+      />
+    </template>
+  </nav>
+</template>

package/composables/useFeatures.ts

@@ -7,6 +7,7 @@ export interface FeatureFlags {
   docs: boolean;
   video: boolean;
   contests: boolean;
+  events: boolean;
   learning: boolean;
   explainers: boolean;
   editorial: boolean;
@@ -27,6 +28,7 @@ export function useFeatures() {
     docs: computed(() => flags.docs),
     video: computed(() => flags.video),
     contests: computed(() => flags.contests),
+    events: computed(() => flags.events),
     learning: computed(() => flags.learning),
     explainers: computed(() => flags.explainers),
     editorial: computed(() => flags.editorial),

package/layouts/admin.vue

@@ -34,6 +34,7 @@ const sidebarOpen = ref(false);
           <NuxtLink to="/admin/audit" class="admin-nav-link" @click="sidebarOpen = false"><i class="fa-solid fa-clipboard-list"></i> Audit Log</NuxtLink>
           <NuxtLink to="/admin/theme" class="admin-nav-link" @click="sidebarOpen = false"><i class="fa-solid fa-palette"></i> Theme</NuxtLink>
           <NuxtLink to="/admin/homepage" class="admin-nav-link" @click="sidebarOpen = false"><i class="fa-solid fa-house"></i> Homepage</NuxtLink>
+          <NuxtLink to="/admin/navigation" class="admin-nav-link" @click="sidebarOpen = false"><i class="fa-solid fa-bars"></i> Navigation</NuxtLink>
           <NuxtLink to="/admin/features" class="admin-nav-link" @click="sidebarOpen = false"><i class="fa-solid fa-toggle-on"></i> Features</NuxtLink>
           <NuxtLink to="/admin/federation" class="admin-nav-link" @click="sidebarOpen = false"><i class="fa-solid fa-globe"></i> Federation</NuxtLink>
           <NuxtLink to="/admin/settings" class="admin-nav-link" @click="sidebarOpen = false"><i class="fa-solid fa-gear"></i> Settings</NuxtLink>

package/layouts/default.vue

@@ -1,8 +1,10 @@
 <script setup lang="ts">
+import type { NavItem } from '@commonpub/server';
+
 const { user, isAuthenticated, isAdmin, signOut, refreshSession } = useAuth();
 const { count: unreadCount, connect: connectNotifications, disconnect: disconnectNotifications } = useNotifications();
 const { count: unreadMessages, connect: connectMessages, disconnect: disconnectMessages } = useMessages();
-const { hubs, learning, video, docs, contests, admin, federation, explainers } = useFeatures();
+const { hubs, learning, video, docs, contests, events, admin, federation, explainers } = useFeatures();
 const { isDark, setDarkMode } = useTheme();
 const { enabledTypeMeta } = useContentTypes();
 const runtimeConfig = useRuntimeConfig();
@@ -18,6 +20,9 @@ const userMenuOpen = ref(false);
 const mobileMenuOpen = ref(false);
 const openDropdown = ref<string | null>(null);
 
+// Fetch configurable nav items (falls back to defaults on server)
+const { data: navItems } = await useFetch<NavItem[]>('/api/navigation/items');
+
 function toggleDropdown(name: string): void {
   openDropdown.value = openDropdown.value === name ? null : name;
 }
@@ -80,58 +85,13 @@ const userUsername = computed(() => user.value?.username ?? '');
         <SiteLogo />
       </NuxtLink>
 
-      <nav class="cpub-topbar-nav" aria-label="Main navigation">
-        <NuxtLink to="/" class="cpub-nav-link"><i class="fa-solid fa-house"></i> Home</NuxtLink>
-
-        <!-- Learn dropdown -->
-        <div v-if="learning || docs" class="cpub-nav-dropdown">
-          <button class="cpub-nav-link cpub-nav-trigger" :class="{ 'cpub-nav-trigger--open': openDropdown === 'learn' }" aria-haspopup="true" :aria-expanded="openDropdown === 'learn'" @click.stop="toggleDropdown('learn')">
-            <i class="fa-solid fa-graduation-cap"></i> Learn <i class="fa-solid fa-chevron-down cpub-nav-caret" />
-          </button>
-          <div v-if="openDropdown === 'learn'" class="cpub-nav-panel">
-            <NuxtLink v-if="learning" to="/learn" class="cpub-nav-panel-item" @click="closeDropdowns"><i class="fa-solid fa-route"></i> Learning Paths</NuxtLink>
-            <NuxtLink v-if="explainers" to="/explainer" class="cpub-nav-panel-item" @click="closeDropdowns"><i class="fa-solid fa-lightbulb"></i> Explainers</NuxtLink>
-            <NuxtLink v-if="docs" to="/docs" class="cpub-nav-panel-item" @click="closeDropdowns"><i class="fa-solid fa-book"></i> Docs</NuxtLink>
-          </div>
-        </div>
-
-        <!-- Build dropdown -->
-        <div class="cpub-nav-dropdown">
-          <button class="cpub-nav-link cpub-nav-trigger" :class="{ 'cpub-nav-trigger--open': openDropdown === 'build' }" aria-haspopup="true" :aria-expanded="openDropdown === 'build'" @click.stop="toggleDropdown('build')">
-            <i class="fa-solid fa-hammer"></i> Build <i class="fa-solid fa-chevron-down cpub-nav-caret" />
-          </button>
-          <div v-if="openDropdown === 'build'" class="cpub-nav-panel">
-            <NuxtLink to="/project" class="cpub-nav-panel-item" @click="closeDropdowns"><i class="fa-solid fa-cube"></i> Projects</NuxtLink>
-            <NuxtLink v-if="contests" to="/contests" class="cpub-nav-panel-item" @click="closeDropdowns"><i class="fa-solid fa-trophy"></i> Contests</NuxtLink>
-          </div>
-        </div>
-
-        <!-- Read dropdown -->
-        <div class="cpub-nav-dropdown">
-          <button class="cpub-nav-link cpub-nav-trigger" :class="{ 'cpub-nav-trigger--open': openDropdown === 'read' }" aria-haspopup="true" :aria-expanded="openDropdown === 'read'" @click.stop="toggleDropdown('read')">
-            <i class="fa-solid fa-newspaper"></i> Read <i class="fa-solid fa-chevron-down cpub-nav-caret" />
-          </button>
-          <div v-if="openDropdown === 'read'" class="cpub-nav-panel">
-            <NuxtLink to="/blog" class="cpub-nav-panel-item" @click="closeDropdowns"><i class="fa-solid fa-pen-nib"></i> Blog</NuxtLink>
-          </div>
-        </div>
-
-        <!-- Watch dropdown -->
-        <div v-if="video" class="cpub-nav-dropdown">
-          <button class="cpub-nav-link cpub-nav-trigger" :class="{ 'cpub-nav-trigger--open': openDropdown === 'watch' }" aria-haspopup="true" :aria-expanded="openDropdown === 'watch'" @click.stop="toggleDropdown('watch')">
-            <i class="fa-solid fa-play"></i> Watch <i class="fa-solid fa-chevron-down cpub-nav-caret" />
-          </button>
-          <div v-if="openDropdown === 'watch'" class="cpub-nav-panel">
-            <NuxtLink to="/videos" class="cpub-nav-panel-item" @click="closeDropdowns"><i class="fa-solid fa-video"></i> Videos</NuxtLink>
-            <span class="cpub-nav-panel-item cpub-nav-panel-item--disabled"><i class="fa-solid fa-tower-broadcast"></i> Live Streams</span>
-            <span class="cpub-nav-panel-item cpub-nav-panel-item--disabled"><i class="fa-solid fa-podcast"></i> Podcasts</span>
-          </div>
-        </div>
-
-        <NuxtLink v-if="hubs" to="/hubs" class="cpub-nav-link"><i class="fa-solid fa-users"></i> Hubs</NuxtLink>
-        <NuxtLink v-if="federation" to="/federation" class="cpub-nav-link"><i class="fa-solid fa-globe"></i> Fediverse</NuxtLink>
-        <NuxtLink v-if="isAdmin && admin" to="/admin" class="cpub-nav-link"><i class="fa-solid fa-shield-halved"></i> Admin</NuxtLink>
-      </nav>
+      <NavRenderer
+        v-if="navItems"
+        :items="navItems"
+        :open-dropdown="openDropdown"
+        @toggle-dropdown="toggleDropdown"
+        @close-dropdowns="closeDropdowns"
+      />
 
       <div class="cpub-topbar-spacer" />
 
@@ -183,38 +143,12 @@ const userUsername = computed(() => user.value?.username ?? '');
 
     <!-- Mobile menu -->
     <div v-if="mobileMenuOpen" class="cpub-mobile-menu" @click.self="mobileMenuOpen = false">
-      <nav class="cpub-mobile-nav" aria-label="Mobile navigation">
-        <NuxtLink to="/" class="cpub-mobile-link" @click="mobileMenuOpen = false"><i class="fa-solid fa-house"></i> Home</NuxtLink>
-
-        <!-- Learn -->
-        <template v-if="learning || docs">
-          <div class="cpub-mobile-section-label">Learn</div>
-          <NuxtLink v-if="learning" to="/learn" class="cpub-mobile-link cpub-mobile-link--indent" @click="mobileMenuOpen = false"><i class="fa-solid fa-route"></i> Learning Paths</NuxtLink>
-          <NuxtLink v-if="explainers" to="/explainer" class="cpub-mobile-link cpub-mobile-link--indent" @click="mobileMenuOpen = false"><i class="fa-solid fa-lightbulb"></i> Explainers</NuxtLink>
-          <NuxtLink v-if="docs" to="/docs" class="cpub-mobile-link cpub-mobile-link--indent" @click="mobileMenuOpen = false"><i class="fa-solid fa-book"></i> Docs</NuxtLink>
-        </template>
-
-        <!-- Build -->
-        <div class="cpub-mobile-section-label">Build</div>
-        <NuxtLink to="/project" class="cpub-mobile-link cpub-mobile-link--indent" @click="mobileMenuOpen = false"><i class="fa-solid fa-cube"></i> Projects</NuxtLink>
-        <NuxtLink v-if="contests" to="/contests" class="cpub-mobile-link cpub-mobile-link--indent" @click="mobileMenuOpen = false"><i class="fa-solid fa-trophy"></i> Contests</NuxtLink>
-
-        <!-- Read -->
-        <div class="cpub-mobile-section-label">Read</div>
-        <NuxtLink to="/blog" class="cpub-mobile-link cpub-mobile-link--indent" @click="mobileMenuOpen = false"><i class="fa-solid fa-pen-nib"></i> Blog</NuxtLink>
-
-        <!-- Watch -->
-        <template v-if="video">
-          <div class="cpub-mobile-section-label">Watch</div>
-          <NuxtLink to="/videos" class="cpub-mobile-link cpub-mobile-link--indent" @click="mobileMenuOpen = false"><i class="fa-solid fa-video"></i> Videos</NuxtLink>
-          <span class="cpub-mobile-link cpub-mobile-link--indent cpub-mobile-link--disabled"><i class="fa-solid fa-tower-broadcast"></i> Live Streams</span>
-          <span class="cpub-mobile-link cpub-mobile-link--indent cpub-mobile-link--disabled"><i class="fa-solid fa-podcast"></i> Podcasts</span>
-        </template>
-
-        <div class="cpub-mobile-divider" />
-        <NuxtLink v-if="hubs" to="/hubs" class="cpub-mobile-link" @click="mobileMenuOpen = false"><i class="fa-solid fa-users"></i> Hubs</NuxtLink>
-        <NuxtLink v-if="federation" to="/federation" class="cpub-mobile-link" @click="mobileMenuOpen = false"><i class="fa-solid fa-globe"></i> Fediverse</NuxtLink>
-        <NuxtLink v-if="isAdmin && admin" to="/admin" class="cpub-mobile-link" @click="mobileMenuOpen = false"><i class="fa-solid fa-shield-halved"></i> Admin</NuxtLink>
+      <MobileNavRenderer
+        v-if="navItems"
+        :items="navItems"
+        @close="mobileMenuOpen = false"
+      />
+      <div class="cpub-mobile-nav cpub-mobile-nav-extra">
         <NuxtLink to="/search" class="cpub-mobile-link" @click="mobileMenuOpen = false"><i class="fa-solid fa-magnifying-glass"></i> Search</NuxtLink>
         <template v-if="isAuthenticated">
           <div class="cpub-mobile-divider" />
@@ -223,7 +157,7 @@ const userUsername = computed(() => user.value?.username ?? '');
           <NuxtLink to="/messages" class="cpub-mobile-link" @click="mobileMenuOpen = false"><i class="fa-solid fa-envelope"></i> Messages</NuxtLink>
           <NuxtLink to="/notifications" class="cpub-mobile-link" @click="mobileMenuOpen = false"><i class="fa-solid fa-bell"></i> Notifications</NuxtLink>
         </template>
-      </nav>
+      </div>
     </div>
 
     <!-- ═══ MAIN ═══ -->
@@ -254,6 +188,7 @@ const userUsername = computed(() => user.value?.username ?? '');
           <h4 class="cpub-footer-col-title">Community</h4>
           <NuxtLink v-if="hubs" to="/hubs" class="cpub-footer-link">Hubs</NuxtLink>
           <NuxtLink v-if="contests" to="/contests" class="cpub-footer-link">Contests</NuxtLink>
+          <NuxtLink v-if="events" to="/events" class="cpub-footer-link">Events</NuxtLink>
           <NuxtLink v-if="learning" to="/learn" class="cpub-footer-link">Learning Paths</NuxtLink>
           <NuxtLink v-if="video" to="/videos" class="cpub-footer-link">Videos</NuxtLink>
           <NuxtLink to="/search" class="cpub-footer-link">Explore</NuxtLink>
@@ -358,6 +293,7 @@ const userUsername = computed(() => user.value?.username ?? '');
 .cpub-mobile-link:hover { background: var(--surface2); color: var(--text); }
 .cpub-mobile-link i { width: 16px; text-align: center; font-size: 12px; }
 .cpub-mobile-divider { height: 2px; background: var(--border2); margin: 4px 16px; }
+.cpub-mobile-nav-extra { border-top: var(--border-width-default) solid var(--border2); }
 
 #main-content { margin-top: 48px; flex: 1; }
 

package/middleware/feature-gate.global.ts

@@ -7,6 +7,7 @@ const ROUTE_FEATURE_MAP: Record<string, keyof import('../composables/useFeatures
   '/videos': 'video',
   '/admin': 'admin',
   '/contests': 'contests',
+  '/events': 'events',
   '/explainer': 'explainers',
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@commonpub/layer",
-  "version": "0.11.0",
+  "version": "0.13.0",
   "type": "module",
   "main": "./nuxt.config.ts",
   "files": [
@@ -29,8 +29,8 @@
   "dependencies": {
     "@aws-sdk/client-s3": "^3.1010.0",
     "@commonpub/explainer": "^0.7.11",
-    "@commonpub/schema": "^0.10.0",
-    "@commonpub/server": "^2.33.0",
+    "@commonpub/schema": "^0.13.0",
+    "@commonpub/server": "^2.39.0",
     "@tiptap/core": "^2.11.0",
     "@tiptap/extension-bold": "^2.11.0",
     "@tiptap/extension-bullet-list": "^2.11.0",
@@ -53,13 +53,13 @@
     "vue": "^3.4.0",
     "vue-router": "^4.3.0",
     "zod": "^4.3.6",
-    "@commonpub/config": "0.9.2",
-    "@commonpub/auth": "0.5.1",
     "@commonpub/docs": "0.6.2",
     "@commonpub/editor": "0.7.9",
-    "@commonpub/protocol": "0.9.9",
     "@commonpub/learning": "0.5.0",
-    "@commonpub/ui": "0.8.5"
+    "@commonpub/config": "0.10.0",
+    "@commonpub/auth": "0.5.1",
+    "@commonpub/ui": "0.8.5",
+    "@commonpub/protocol": "0.9.9"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.9.1",

package/pages/admin/navigation.vue

@@ -0,0 +1,350 @@
+<script setup lang="ts">
+import type { NavItem } from '@commonpub/server';
+
+definePageMeta({ layout: 'admin', middleware: 'auth' });
+useSeoMeta({ title: `Navigation — Admin — ${useSiteName()}` });
+
+const toast = useToast();
+const { data, refresh } = await useFetch<NavItem[]>('/api/admin/navigation/items');
+
+const items = ref<NavItem[]>([]);
+const saving = ref(false);
+const hasChanges = ref(false);
+
+watch(data, (val) => {
+  if (val) {
+    items.value = JSON.parse(JSON.stringify(val));
+    hasChanges.value = false;
+  }
+}, { immediate: true });
+
+function markChanged(): void { hasChanges.value = true; }
+
+const NAV_TYPES: Array<{ value: NavItem['type']; label: string }> = [
+  { value: 'link', label: 'Internal Link' },
+  { value: 'dropdown', label: 'Dropdown Menu' },
+  { value: 'external', label: 'External Link' },
+];
+
+const VISIBILITY_OPTIONS: Array<{ value: string; label: string }> = [
+  { value: 'all', label: 'Everyone' },
+  { value: 'authenticated', label: 'Logged-in users' },
+  { value: 'admin', label: 'Admins only' },
+];
+
+function moveUp(index: number): void {
+  if (index <= 0) return;
+  const arr = [...items.value];
+  [arr[index - 1], arr[index]] = [arr[index]!, arr[index - 1]!];
+  items.value = arr;
+  markChanged();
+}
+
+function moveDown(index: number): void {
+  if (index >= items.value.length - 1) return;
+  const arr = [...items.value];
+  [arr[index], arr[index + 1]] = [arr[index + 1]!, arr[index]!];
+  items.value = arr;
+  markChanged();
+}
+
+function removeItem(index: number): void {
+  if (!confirm(`Remove "${items.value[index]!.label}" from navigation?`)) return;
+  items.value.splice(index, 1);
+  markChanged();
+}
+
+function addItem(): void {
+  items.value.push({
+    id: `nav-${Date.now()}`,
+    type: 'link',
+    label: 'New Link',
+    icon: 'fa-solid fa-link',
+    route: '/',
+  });
+  markChanged();
+}
+
+function addChild(parentIndex: number): void {
+  const parent = items.value[parentIndex]!;
+  if (!parent.children) parent.children = [];
+  parent.children.push({
+    id: `nav-child-${Date.now()}`,
+    type: 'link',
+    label: 'New Child',
+    icon: 'fa-solid fa-link',
+    route: '/',
+  });
+  markChanged();
+}
+
+function removeChild(parentIndex: number, childIndex: number): void {
+  const parent = items.value[parentIndex]!;
+  if (!parent.children) return;
+  parent.children.splice(childIndex, 1);
+  markChanged();
+}
+
+function moveChildUp(parentIndex: number, childIndex: number): void {
+  const children = items.value[parentIndex]!.children;
+  if (!children || childIndex <= 0) return;
+  [children[childIndex - 1], children[childIndex]] = [children[childIndex]!, children[childIndex - 1]!];
+  markChanged();
+}
+
+function moveChildDown(parentIndex: number, childIndex: number): void {
+  const children = items.value[parentIndex]!.children;
+  if (!children || childIndex >= children.length - 1) return;
+  [children[childIndex], children[childIndex + 1]] = [children[childIndex + 1]!, children[childIndex]!];
+  markChanged();
+}
+
+async function save(): Promise<void> {
+  saving.value = true;
+  try {
+    await $fetch('/api/admin/navigation/items', {
+      method: 'PUT',
+      body: { items: items.value },
+    });
+    toast.success('Navigation saved');
+    hasChanges.value = false;
+    await refresh();
+  } catch {
+    toast.error('Failed to save navigation');
+  } finally {
+    saving.value = false;
+  }
+}
+
+function discard(): void {
+  if (data.value) {
+    items.value = JSON.parse(JSON.stringify(data.value));
+    hasChanges.value = false;
+  }
+}
+
+const editingId = ref<string | null>(null);
+</script>
+
+<template>
+  <div class="cpub-admin-nav-page">
+    <div class="cpub-admin-header">
+      <div>
+        <h1 class="cpub-admin-title">Navigation</h1>
+        <p class="cpub-admin-subtitle">Configure the main site navigation bar.</p>
+      </div>
+      <div class="cpub-admin-header-actions">
+        <button class="cpub-btn cpub-btn-sm" @click="addItem">
+          <i class="fa-solid fa-plus"></i> Add Item
+        </button>
+        <button
+          v-if="hasChanges"
+          class="cpub-btn cpub-btn-primary cpub-btn-sm"
+          :disabled="saving"
+          @click="save"
+        >
+          <i :class="saving ? 'fa-solid fa-circle-notch fa-spin' : 'fa-solid fa-check'"></i> Save
+        </button>
+      </div>
+    </div>
+
+    <div class="cpub-nav-list">
+      <div
+        v-for="(item, idx) in items"
+        :key="item.id"
+        class="cpub-nav-row"
+      >
+        <div class="cpub-nav-order">
+          <button class="cpub-order-btn" :disabled="idx === 0" title="Move up" @click="moveUp(idx)">
+            <i class="fa-solid fa-chevron-up"></i>
+          </button>
+          <span class="cpub-order-num">{{ idx + 1 }}</span>
+          <button class="cpub-order-btn" :disabled="idx === items.length - 1" title="Move down" @click="moveDown(idx)">
+            <i class="fa-solid fa-chevron-down"></i>
+          </button>
+        </div>
+
+        <div class="cpub-nav-icon-cell">
+          <i :class="item.icon || 'fa-solid fa-link'"></i>
+        </div>
+
+        <div class="cpub-nav-info">
+          <div class="cpub-nav-label">{{ item.label }}</div>
+          <div class="cpub-nav-meta">
+            <span class="cpub-nav-type-badge">{{ item.type }}</span>
+            <span v-if="item.route" class="cpub-nav-route">{{ item.route }}</span>
+            <span v-if="item.href" class="cpub-nav-route">{{ item.href }}</span>
+            <span v-if="item.featureGate" class="cpub-nav-gate">gate: {{ item.featureGate }}</span>
+            <span v-if="item.visibleTo && item.visibleTo !== 'all'" class="cpub-nav-gate">{{ item.visibleTo }}</span>
+            <span v-if="item.children?.length" class="cpub-nav-gate">{{ item.children.length }} children</span>
+          </div>
+        </div>
+
+        <div class="cpub-nav-actions">
+          <button
+            class="cpub-nav-action"
+            :title="editingId === item.id ? 'Close' : 'Edit'"
+            @click="editingId = editingId === item.id ? null : item.id"
+          >
+            <i :class="editingId === item.id ? 'fa-solid fa-xmark' : 'fa-solid fa-pencil'"></i>
+          </button>
+          <button class="cpub-nav-action cpub-nav-action--danger" title="Remove" @click="removeItem(idx)">
+            <i class="fa-solid fa-trash"></i>
+          </button>
+        </div>
+
+        <!-- Inline editor -->
+        <div v-if="editingId === item.id" class="cpub-nav-editor">
+          <div class="cpub-editor-grid">
+            <div class="cpub-editor-field">
+              <label class="cpub-editor-label">Label</label>
+              <input v-model="item.label" class="cpub-editor-input" @input="markChanged" />
+            </div>
+            <div class="cpub-editor-field">
+              <label class="cpub-editor-label">Type</label>
+              <select v-model="item.type" class="cpub-editor-input" @change="markChanged">
+                <option v-for="t in NAV_TYPES" :key="t.value" :value="t.value">{{ t.label }}</option>
+              </select>
+            </div>
+            <div class="cpub-editor-field">
+              <label class="cpub-editor-label">Icon (FontAwesome class)</label>
+              <input v-model="item.icon" class="cpub-editor-input" placeholder="fa-solid fa-house" @input="markChanged" />
+            </div>
+            <div v-if="item.type === 'link' || item.type === 'dropdown'" class="cpub-editor-field">
+              <label class="cpub-editor-label">Route</label>
+              <input v-model="item.route" class="cpub-editor-input" placeholder="/page" @input="markChanged" />
+            </div>
+            <div v-if="item.type === 'external'" class="cpub-editor-field">
+              <label class="cpub-editor-label">URL</label>
+              <input v-model="item.href" class="cpub-editor-input" placeholder="https://..." @input="markChanged" />
+            </div>
+            <div class="cpub-editor-field">
+              <label class="cpub-editor-label">Feature Gate</label>
+              <input v-model="item.featureGate" class="cpub-editor-input" placeholder="e.g. hubs" @input="markChanged" />
+            </div>
+            <div class="cpub-editor-field">
+              <label class="cpub-editor-label">Visible To</label>
+              <select v-model="item.visibleTo" class="cpub-editor-input" @change="markChanged">
+                <option v-for="v in VISIBILITY_OPTIONS" :key="v.value" :value="v.value">{{ v.label }}</option>
+              </select>
+            </div>
+          </div>
+
+          <!-- Children (for dropdown type) -->
+          <div v-if="item.type === 'dropdown'" class="cpub-children-section">
+            <div class="cpub-children-header">
+              <span class="cpub-children-title">Children</span>
+              <button class="cpub-btn cpub-btn-sm" @click="addChild(idx)">
+                <i class="fa-solid fa-plus"></i> Add Child
+              </button>
+            </div>
+            <div v-if="item.children?.length" class="cpub-children-list">
+              <div
+                v-for="(child, ci) in item.children"
+                :key="child.id"
+                class="cpub-child-row"
+              >
+                <div class="cpub-child-order">
+                  <button class="cpub-order-btn" :disabled="ci === 0" @click="moveChildUp(idx, ci)">
+                    <i class="fa-solid fa-chevron-up"></i>
+                  </button>
+                  <button class="cpub-order-btn" :disabled="ci === (item.children?.length ?? 0) - 1" @click="moveChildDown(idx, ci)">
+                    <i class="fa-solid fa-chevron-down"></i>
+                  </button>
+                </div>
+                <div class="cpub-child-fields">
+                  <input v-model="child.label" class="cpub-editor-input cpub-child-input" placeholder="Label" @input="markChanged" />
+                  <input v-model="child.icon" class="cpub-editor-input cpub-child-input" placeholder="Icon class" @input="markChanged" />
+                  <input v-model="child.route" class="cpub-editor-input cpub-child-input" placeholder="Route" @input="markChanged" />
+                  <input v-model="child.featureGate" class="cpub-editor-input cpub-child-input" placeholder="Feature gate" @input="markChanged" />
+                  <label class="cpub-child-disabled-label">
+                    <input type="checkbox" v-model="child.disabled" @change="markChanged" /> Disabled
+                  </label>
+                </div>
+                <button class="cpub-nav-action cpub-nav-action--danger" title="Remove child" @click="removeChild(idx, ci)">
+                  <i class="fa-solid fa-trash"></i>
+                </button>
+              </div>
+            </div>
+            <p v-else class="cpub-children-empty">No children. Add items to populate this dropdown.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div v-if="hasChanges" class="cpub-nav-footer">
+      <span class="cpub-nav-footer-text">Unsaved changes</span>
+      <button class="cpub-btn cpub-btn-sm" @click="discard">Discard</button>
+      <button class="cpub-btn cpub-btn-primary cpub-btn-sm" :disabled="saving" @click="save">Save</button>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.cpub-admin-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: var(--space-6); gap: var(--space-4); }
+.cpub-admin-header-actions { display: flex; gap: var(--space-2); }
+.cpub-admin-title { font-size: var(--text-xl); font-weight: var(--font-weight-bold); }
+.cpub-admin-subtitle { font-size: 12px; color: var(--text-dim); margin-top: 4px; }
+
+.cpub-nav-list { display: flex; flex-direction: column; border: var(--border-width-default) solid var(--border); }
+
+.cpub-nav-row {
+  display: flex;
+  align-items: center;
+  padding: 12px 16px;
+  border-bottom: var(--border-width-default) solid var(--border2);
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.cpub-nav-row:last-child { border-bottom: none; }
+
+.cpub-nav-order { display: flex; flex-direction: column; align-items: center; gap: 2px; }
+.cpub-order-btn { background: none; border: none; color: var(--text-faint); cursor: pointer; font-size: 10px; padding: 2px 4px; }
+.cpub-order-btn:hover { color: var(--accent); }
+.cpub-order-btn:disabled { opacity: 0.3; cursor: default; }
+.cpub-order-num { font-family: var(--font-mono); font-size: 10px; color: var(--text-faint); }
+
+.cpub-nav-icon-cell { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; background: var(--surface2); border: var(--border-width-default) solid var(--border2); color: var(--text-dim); font-size: 13px; flex-shrink: 0; }
+
+.cpub-nav-info { flex: 1; min-width: 0; }
+.cpub-nav-label { font-size: 13px; font-weight: 600; }
+.cpub-nav-meta { display: flex; gap: 8px; margin-top: 2px; flex-wrap: wrap; }
+.cpub-nav-type-badge { font-family: var(--font-mono); font-size: 9px; text-transform: uppercase; color: var(--text-faint); }
+.cpub-nav-route { font-family: var(--font-mono); font-size: 9px; color: var(--text-dim); }
+.cpub-nav-gate { font-family: var(--font-mono); font-size: 9px; color: var(--accent); }
+
+.cpub-nav-actions { display: flex; gap: 6px; flex-shrink: 0; }
+.cpub-nav-action { background: none; border: none; color: var(--text-faint); cursor: pointer; font-size: 12px; padding: 4px 6px; }
+.cpub-nav-action:hover { color: var(--accent); }
+.cpub-nav-action--danger:hover { color: var(--red); }
+
+.cpub-nav-editor { width: 100%; padding: 12px 0 0; border-top: var(--border-width-default) solid var(--border2); margin-top: 8px; }
+.cpub-editor-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
+.cpub-editor-field { display: flex; flex-direction: column; gap: 4px; }
+.cpub-editor-label { font-family: var(--font-mono); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-dim); }
+.cpub-editor-input { font-size: 13px; padding: 6px 10px; border: var(--border-width-default) solid var(--border); background: var(--bg); color: var(--text); outline: none; }
+.cpub-editor-input:focus { border-color: var(--accent); }
+
+.cpub-children-section { margin-top: var(--space-4); padding-top: var(--space-3); border-top: var(--border-width-default) solid var(--border2); }
+.cpub-children-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-3); }
+.cpub-children-title { font-family: var(--font-mono); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-faint); }
+.cpub-children-list { display: flex; flex-direction: column; gap: 8px; }
+.cpub-child-row { display: flex; align-items: center; gap: 8px; padding: 8px; background: var(--surface2); border: var(--border-width-default) solid var(--border2); }
+.cpub-child-order { display: flex; flex-direction: column; gap: 2px; }
+.cpub-child-fields { display: flex; gap: 6px; flex: 1; flex-wrap: wrap; align-items: center; }
+.cpub-child-input { flex: 1; min-width: 100px; font-size: 12px; padding: 4px 8px; }
+.cpub-child-disabled-label { font-size: 11px; color: var(--text-dim); display: flex; align-items: center; gap: 4px; white-space: nowrap; }
+.cpub-children-empty { font-size: 12px; color: var(--text-faint); font-style: italic; }
+
+.cpub-nav-footer { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4); margin-top: var(--space-4); background: var(--yellow-bg, var(--surface2)); border: var(--border-width-default) solid var(--yellow, var(--border)); }
+.cpub-nav-footer-text { font-family: var(--font-mono); font-size: 11px; font-weight: 600; color: var(--yellow, var(--text-dim)); flex: 1; }
+
+@media (max-width: 768px) {
+  .cpub-admin-header { flex-direction: column; }
+  .cpub-editor-grid { grid-template-columns: 1fr; }
+  .cpub-nav-row { flex-direction: column; align-items: flex-start; }
+  .cpub-nav-actions { align-self: flex-end; }
+  .cpub-child-fields { flex-direction: column; }
+  .cpub-child-input { min-width: 0; }
+}
+</style>