improvements: Content structure + navigation fix

docs-v3/components/MobileSidebarOverlay.vue

@@ -13,7 +13,7 @@
         @click.stop
         @touchmove.stop
       >
-        <div class="flex items-center justify-between px-4 py-4 border-b border-gray-200 dark:border-gray-700 flex-shrink-0">
+        <div class="sticky top-0 z-10 flex items-center justify-between px-4 py-4 border-b border-gray-200 dark:border-gray-700 flex-shrink-0 bg-white dark:bg-gray-900">
           <h2 class="text-lg font-semibold text-gray-900 dark:text-white">{{ title }}</h2>
           <button
             @click.stop="$emit('close')"

docs-v3/components/case-studies/CaseStudiesCta.vue

@@ -14,27 +14,29 @@
         Start your project today and become our next case study.
       </p>
       <div class="flex flex-col sm:flex-row gap-4 justify-center">
-        <NuxtLink
-          to="/docs"
-          class="inline-flex items-center justify-center px-8 py-4 bg-gradient-to-r from-red-500 to-red-600 text-white hover:from-red-600 hover:to-red-700 font-semibold rounded-xl transition-all duration-300 text-lg shadow-lg shadow-red-500/20 hover:shadow-red-500/30"
+        <AppButton
+          variant="primary"
+          href="/docs"
+          :icon="BookOpenIcon"
+          :is-nuxt-link="true"
+          :external="false"
         >
-          <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.746 0 3.332.477 4.5 1.253v13C19.832 18.477 18.246 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
-          </svg>
           Get Started with Restify
-        </NuxtLink>
-        <a
+        </AppButton>
+        <AppButton
+          variant="secondary"
           href="https://www.binarcode.com/recent-work"
-          target="_blank"
-          rel="noopener noreferrer"
-          class="inline-flex items-center justify-center px-8 py-4 bg-gray-100 dark:bg-gray-800/50 border border-gray-300 dark:border-gray-700/50 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700/50 hover:text-gray-900 dark:hover:text-white font-semibold rounded-xl transition-all duration-300 text-lg backdrop-blur-sm"
+          :icon="BriefcaseIcon"
+          :show-external-icon="true"
         >
-          <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16l3-3 3 3 3-3 3 3V5a2 2 0 00-2-2z" />
-          </svg>
           Recent Projects
-        </a>
+        </AppButton>
       </div>
     </div>
   </div>
 </template>
+
+<script setup lang="ts">
+import { BookOpenIcon, BriefcaseIcon } from '@heroicons/vue/24/outline'
+import AppButton from '~/components/ui/AppButton.vue'
+</script>

docs-v3/components/docs/DocsPagination.vue

@@ -0,0 +1,58 @@
+<template>
+  <nav
+    v-if="surround && (surround[0] || surround[1])"
+    class="mt-12 pt-6 border-t border-gray-200 dark:border-gray-700"
+  >
+    <div class="flex items-center justify-between gap-4">
+      <NuxtLink
+        v-if="surround[0]"
+        :to="surround[0].path"
+        class="group flex-1 flex items-center gap-3 p-4 rounded-lg border border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-all"
+      >
+        <ChevronLeftIcon
+          class="w-5 h-5 text-gray-400 group-hover:text-gray-600 dark:group-hover:text-gray-300 transition-colors"
+        />
+        <div class="min-w-0">
+          <div class="text-xs text-gray-500 dark:text-gray-400 mb-1">Previous</div>
+          <div
+            class="text-sm font-medium text-gray-900 dark:text-white truncate transition-colors"
+          >
+            {{ surround[0].title }}
+          </div>
+        </div>
+      </NuxtLink>
+
+      <div v-else class="flex-1"></div>
+
+      <NuxtLink
+        v-if="surround[1]"
+        :to="surround[1].path"
+        class="group flex-1 flex items-center justify-end gap-3 p-4 rounded-lg border border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-all text-right"
+      >
+        <div class="min-w-0">
+          <div class="text-xs text-gray-500 dark:text-gray-400 mb-1">Next</div>
+          <div
+            class="text-sm font-medium text-gray-900 dark:text-white truncate transition-colors"
+          >
+            {{ surround[1].title }}
+          </div>
+        </div>
+        <ChevronRightIcon
+          class="w-5 h-5 text-gray-400 group-hover:text-gray-600 dark:group-hover:text-gray-300 transition-colors"
+        />
+      </NuxtLink>
+
+      <div v-else class="flex-1"></div>
+    </div>
+  </nav>
+</template>
+
+<script setup lang="ts">
+import { ChevronLeftIcon, ChevronRightIcon } from '@heroicons/vue/24/outline'
+
+const route = useRoute()
+
+const { data: surround } = await useAsyncData(`surround-${route.path}`, () => {
+  return queryCollectionItemSurroundings('content', route.path)
+})
+</script>

docs-v3/components/docs/DocsSidebar.vue

@@ -3,7 +3,7 @@
     <nav class="fixed top-16 left-0 w-64 h-[calc(100vh-4rem)] overflow-y-auto px-4 py-6 bg-gray-50 dark:bg-gray-800/50 border-r border-gray-200 dark:border-gray-700">
       <div class="space-y-6">
         <NavigationSection 
-          v-for="section in docsNavigationSections" 
+          v-for="section in navigationSections" 
           :key="section.title"
           :title="section.title"
           :items="section.items"
@@ -22,7 +22,7 @@
   >
     <div class="space-y-6">
       <NavigationSection 
-        v-for="section in docsNavigationSections" 
+        v-for="section in navigationSections" 
         :key="section.title"
         :title="section.title"
         :items="section.items"
@@ -38,83 +38,30 @@
 <script setup lang="ts">
 const INITIALLY_COLLAPSED = ['Performance', 'Extensions', 'Testing']
 
-const docsNavigationSections = [
-  {
-    title: "Getting Started",
-    items: [
-      { title: "Quick Start", path: "/docs/quickstart" },
-    ]
-  },
-  {
-    title: "Authentication",
-    items: [
-      { title: "Authentication", path: "/docs/auth/authentication" },
-      { title: "Authorization", path: "/docs/auth/authorization" },
-      { title: "Profile Management", path: "/docs/auth/profile" }
-    ]
-  },
-  {
-    title: "API Resources",
-    items: [
-      { title: "Basic Repositories", path: "/docs/api/repositories-basic" },
-      { title: "Repositories", path: "/docs/api/repositories" },
-      { title: "Advanced Repositories", path: "/docs/api/repositories-advanced" },
-      { title: "Repository Generation", path: "/docs/api/repository-generation" },
-      { title: "Fields", path: "/docs/api/fields" },
-      { title: "Relations", path: "/docs/api/relations" },
-      { title: "REST Methods", path: "/docs/api/rest-methods" },
-      { title: "Validation Methods", path: "/docs/api/validation-methods" },
-      { title: "Actions", path: "/docs/api/actions" },
-      { title: "Getters", path: "/docs/api/getters" },
-      { title: "Serializer", path: "/docs/api/serializer" }
-    ]
-  },
-  {
-    title: "Search & Filtering",
-    items: [
-      { title: "Basic Filters", path: "/docs/search/basic-filters" },
-      { title: "Advanced Filters", path: "/docs/search/advanced-filters" },
-      { title: "Sorting", path: "/docs/search/sorting" }
-    ]
-  },
-  {
-    title: "GraphQL",
-    items: [
-      { title: "GraphQL Overview", path: "/docs/graphql/graphql" },
-      { title: "Schema Generation", path: "/docs/graphql/graphql-generation" }
-    ]
-  },
-  {
-    title: "MCP Integration",
-    items: [
-      { title: "MCP Server", path: "/docs/mcp/mcp" },
-      { title: "MCP Repositories", path: "/docs/mcp/repositories" },
-      { title: "MCP Fields", path: "/docs/mcp/fields" },
-      { title: "MCP Getters", path: "/docs/mcp/getters" },
-      { title: "JSON Schema Converter", path: "/docs/mcp/json-schema-converter" },
-      { title: "MCP Actions", path: "/docs/mcp/actions" }
-    ]
-  },
-  {
-    title: "Performance",
-    items: [
-      { title: "Performance Overview", path: "/docs/performance/performance" },
-      { title: "Optimization Solutions", path: "/docs/performance/solutions" }
-    ]
-  },
-  {
-    title: "Extensions",
-    items: [
-      { title: "Boost Package", path: "/docs/boost/boost" }
-    ]
-  },
-  {
-    title: "Testing",
-    items: [
-      { title: "Testing Guide", path: "/docs/testing/testing" }
-    ]
-  }
-]
+// Fetch docs navigation from Nuxt Content
+const { data: navigation } = await useAsyncData('docs-navigation', () => 
+  queryCollectionNavigation('content')
+)
+
+// Transform navigation tree to sidebar format
+const navigationSections = computed(() => {
+  if (!navigation.value) return []
+
+  // Find the docs section in the navigation
+  const docsNav = navigation.value.find(item => item.path === '/docs')
+  if (!docsNav?.children) return []
+
+  // Transform each section (folder) into sidebar format
+  return docsNav.children
+    .filter(section => section.children && section.children.length > 0)
+    .map(section => ({
+      title: section.title,
+      items: section.children.map(item => ({
+        title: item.title,
+        path: item.path
+      }))
+    }))
+})
 
 const isMobileMenuOpen = inject('isMobileMenuOpen', ref(false))
 const toggleMobileMenu = inject('toggleMobileMenu', () => {})

docs-v3/components/templates/TemplatesCustomCta.vue

@@ -5,19 +5,20 @@
       <p class="text-gray-400 mb-6">
         Our team can build a custom Laravel Restify template tailored specifically to your project needs.
       </p>
-      <a
+      <AppButton
+        variant="primary"
+        size="md"
         href="https://www.binarcode.com/estimate-project"
-        target="_blank"
-        rel="noopener noreferrer"
-        class="inline-flex items-center px-6 py-3 bg-red-600 hover:bg-red-700 text-white font-medium rounded-lg transition-all duration-200"
+        :icon="WrenchScrewdriverIcon"
+        :show-external-icon="true"
       >
         Get Your Custom Template
-        <ArrowTopRightOnSquareIcon class="w-4 h-4 ml-2" />
-      </a>
+      </AppButton>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ArrowTopRightOnSquareIcon } from '@heroicons/vue/24/outline'
+import { WrenchScrewdriverIcon } from '@heroicons/vue/24/outline'
+import AppButton from '~/components/ui/AppButton.vue'
 </script>

docs-v3/components/templates/TemplatesHeader.vue

@@ -8,28 +8,29 @@
     </p>
 
     <div class="flex flex-col sm:flex-row gap-4 justify-center items-center">
-      <a
+      <AppButton
+        variant="primary"
+        size="md"
         href="https://restifytemplates.com/"
-        target="_blank"
-        rel="noopener noreferrer"
-        class="inline-flex items-center px-6 py-3 bg-red-600 hover:bg-red-700 text-white font-medium rounded-lg transition-all duration-200"
+        :icon="RocketLaunchIcon"
+        :show-external-icon="true"
       >
         Browse All Templates
-        <ArrowTopRightOnSquareIcon class="w-4 h-4 ml-2" />
-      </a>
-      <a
+      </AppButton>
+      <AppButton
+        variant="secondary"
+        size="md"
         href="https://www.binarcode.com/estimate-project"
-        target="_blank"
-        rel="noopener noreferrer"
-        class="inline-flex items-center px-6 py-3 bg-gray-100 dark:bg-gray-800/50 border border-gray-300 dark:border-gray-700 text-gray-700 dark:text-gray-300 hover:border-gray-400 dark:hover:border-gray-600 hover:bg-gray-200 dark:hover:bg-gray-800 font-medium rounded-lg transition-all duration-200"
+        :icon="WrenchScrewdriverIcon"
+        :show-external-icon="true"
       >
-        Get Your Custom Template
-        <ArrowTopRightOnSquareIcon class="w-4 h-4 ml-2" />
-      </a>
+        Get Custom Template
+      </AppButton>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ArrowTopRightOnSquareIcon } from '@heroicons/vue/24/outline'
+import { RocketLaunchIcon, WrenchScrewdriverIcon } from '@heroicons/vue/24/outline'
+import AppButton from '~/components/ui/AppButton.vue'
 </script>

docs-v3/components/ui/AppButton.vue

@@ -0,0 +1,64 @@
+<template>
+  <NuxtLink
+    v-if="isNuxtLink"
+    :to="href"
+    :class="buttonClasses"
+  >
+    <div v-if="variant === 'primary'" class="absolute inset-0 bg-gradient-to-r from-blue-600 to-cyan-700 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
+    <component v-if="icon" :is="icon" class="relative z-10 w-5 h-5 group-hover:rotate-12 transition-transform duration-300" />
+    <span class="relative z-10"><slot /></span>
+    <ArrowTopRightOnSquareIcon v-if="showExternalIcon && !isNuxtLink" class="relative z-10 w-4 h-4 ml-1" />
+  </NuxtLink>
+  <a
+    v-else
+    :href="href"
+    :target="external ? '_blank' : undefined"
+    :rel="external ? 'noopener noreferrer' : undefined"
+    :class="buttonClasses"
+  >
+    <div v-if="variant === 'primary'" class="absolute inset-0 bg-gradient-to-r from-blue-600 to-cyan-700 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
+    <component v-if="icon" :is="icon" class="relative z-10 w-5 h-5 group-hover:rotate-12 transition-transform duration-300" />
+    <span class="relative z-10"><slot /></span>
+  </a>
+</template>
+
+<script setup lang="ts">
+import type { Component } from 'vue'
+import { ArrowTopRightOnSquareIcon } from '@heroicons/vue/24/outline'
+
+type ButtonVariant = 'primary' | 'secondary'
+type ButtonSize = 'sm' | 'md' | 'lg'
+
+interface Props {
+  variant?: ButtonVariant
+  size?: ButtonSize
+  href: string
+  icon?: Component
+  isNuxtLink?: boolean
+  external?: boolean
+  showExternalIcon?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  variant: 'primary',
+  size: 'lg',
+  isNuxtLink: false,
+  external: true,
+  showExternalIcon: false
+})
+
+const SIZE_CLASSES: Record<ButtonSize, string> = {
+  sm: 'px-4 py-2 text-sm min-h-[40px]',
+  md: 'px-5 py-3 text-base min-h-[48px]',
+  lg: 'px-6 sm:px-8 py-4 text-base sm:text-lg min-h-[56px]'
+}
+
+const BASE_CLASSES = 'cursor-pointer group relative inline-flex items-center justify-center gap-3 font-semibold rounded-full overflow-hidden transition-all duration-300 hover:scale-105'
+
+const VARIANT_STYLES: Record<ButtonVariant, string> = {
+  primary: 'text-white bg-gradient-to-r from-blue-500 to-cyan-600 hover:shadow-2xl hover:shadow-blue-500/25',
+  secondary: 'text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-white/5 border border-gray-300 dark:border-white/10 backdrop-blur-sm hover:bg-gray-200 dark:hover:bg-white/10 hover:border-gray-400 dark:hover:border-white/20'
+}
+
+const buttonClasses = computed(() => `${BASE_CLASSES} ${SIZE_CLASSES[props.size]} ${VARIANT_STYLES[props.variant]}`)
+</script>