refactor: enhance UI components and navigation structure, implement export functionality for wizard steps, and update routing for improved user experience

components/WizardSubnav.vue

@@ -0,0 +1,101 @@
+<template>
+  <div
+    class="border-b border-neutral-200 dark:border-neutral-700 bg-neutral-50 dark:bg-neutral-900">
+    <div class="max-w-4xl mx-auto px-4 py-3">
+      <nav class="flex items-center space-x-1 overflow-x-auto">
+        <!-- Main Setup Wizard -->
+        <NuxtLink
+          to="/wizard"
+          class="inline-flex items-center px-3 py-2 rounded-md text-sm font-medium transition-colors whitespace-nowrap"
+          :class="
+            isActive('/wizard')
+              ? 'bg-black text-white dark:bg-white dark:text-black'
+              : 'text-neutral-600 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-neutral-100 hover:bg-neutral-100 dark:hover:bg-neutral-800'
+          ">
+          <UIcon name="i-heroicons-cog-6-tooth" class="w-4 h-4 mr-2" />
+          Setup Wizard
+        </NuxtLink>
+
+        <!-- Divider -->
+        <div class="h-6 w-px bg-neutral-300 dark:bg-neutral-600 mx-2"></div>
+
+        <!-- Template Wizards -->
+        <NuxtLink
+          v-for="wizard in templateWizards"
+          :key="wizard.id"
+          :to="wizard.path"
+          class="inline-flex items-center px-3 py-2 rounded-md text-sm font-medium transition-colors whitespace-nowrap"
+          :class="
+            isActive(wizard.path)
+              ? 'bg-black text-white dark:bg-white dark:text-black'
+              : 'text-neutral-600 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-neutral-100 hover:bg-neutral-100 dark:hover:bg-neutral-800'
+          ">
+          <UIcon :name="wizard.icon" class="w-4 h-4 mr-2" />
+          {{ wizard.name }}
+        </NuxtLink>
+
+        <!-- All Wizards Link -->
+        <div class="h-6 w-px bg-neutral-300 dark:bg-neutral-600 mx-2"></div>
+        <NuxtLink
+          to="/wizards"
+          class="inline-flex items-center px-3 py-2 rounded-md text-sm font-medium transition-colors whitespace-nowrap"
+          :class="
+            isActive('/wizards')
+              ? 'bg-black text-white dark:bg-white dark:text-black'
+              : 'text-neutral-600 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-neutral-100 hover:bg-neutral-100 dark:hover:bg-neutral-800'
+          ">
+          <UIcon name="i-heroicons-squares-plus" class="w-4 h-4 mr-2" />
+          All Wizards
+        </NuxtLink>
+      </nav>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const route = useRoute();
+
+// Template wizards data - matches the wizards.vue page
+const templateWizards = [
+  {
+    id: "membership-agreement",
+    name: "Membership Agreement",
+    icon: "i-heroicons-user-group",
+    path: "/templates/membership-agreement",
+  },
+  {
+    id: "conflict-resolution-framework",
+    name: "Conflict Resolution",
+    icon: "i-heroicons-scale",
+    path: "/templates/conflict-resolution-framework",
+  },
+  {
+    id: "tech-charter",
+    name: "Tech Charter",
+    icon: "i-heroicons-cog-6-tooth",
+    path: "/templates/tech-charter",
+  },
+  {
+    id: "decision-framework",
+    name: "Decision Helper",
+    icon: "i-heroicons-light-bulb",
+    path: "/templates/decision-framework",
+  },
+];
+
+function isActive(path: string): boolean {
+  return route.path === path;
+}
+</script>
+
+<style scoped>
+/* Ensure horizontal scroll on mobile */
+nav {
+  scrollbar-width: none; /* Firefox */
+  -ms-overflow-style: none; /* Internet Explorer 10+ */
+}
+
+nav::-webkit-scrollbar {
+  display: none; /* WebKit */
+}
+</style>