up

Author: HugoRCD

app/components/AppHeader.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { ContentNavigationItem } from '@nuxt/content'
+import TemplateMenu from "~/components/TemplateMenu.vue";
 
 const navigation = inject<Ref<ContentNavigationItem[]>>('navigation')
 
@@ -22,46 +23,8 @@ const { header } = useAppConfig()
       </template>
     </UContentSearchButton>
 
-    <template #title>
-      <div class="flex items-center gap-2">
-        <LogoPro class="w-auto h-6 shrink-0" />
-        <UDropdownMenu
-          v-slot="{ open }"
-          :modal="false"
-          :items="[{
-            label: `Starter`,
-            to: 'https://starter-template.nuxt.dev/'
-          }, {
-            label: `Landing`,
-            to: 'https://landing-template.nuxt.dev/'
-          }, {
-            label: `Docs`,
-            to: 'https://docs-template.nuxt.dev/',
-            checked: true,
-            type: 'checkbox'
-          }, {
-            label: `SaaS`,
-            to: 'https://saas-template.nuxt.dev/'
-          }, {
-            label: `Dashboard`,
-            to: 'https://dashboard-template.nuxt.dev/'
-          }]"
-          :ui="{ content: 'w-(--reka-dropdown-menu-trigger-width) min-w-0' }"
-          size="xs"
-        >
-          <UButton
-            label="Docs"
-            variant="subtle"
-            trailing-icon="i-lucide-chevron-down"
-            size="xs"
-            class="-mb-[6px] font-semibold rounded-full truncate"
-            :class="[open && 'bg-[var(--ui-primary)]/15 ']"
-            :ui="{
-              trailingIcon: ['transition-transform duration-200', open ? 'rotate-180' : undefined].filter(Boolean).join(' ')
-            }"
-          />
-        </UDropdownMenu>
-      </div>
+    <template #left>
+      <TemplateMenu />
     </template>
 
     <template #right>

app/components/TemplateMenu.vue

@@ -0,0 +1,41 @@
+<template>
+  <div class="flex items-center gap-2">
+    <LogoPro class="w-auto h-6 shrink-0" />
+    <UDropdownMenu
+      v-slot="{ open }"
+      :modal="false"
+      :items="[{
+        label: `Starter`,
+        to: 'https://starter-template.nuxt.dev/'
+      }, {
+        label: `Landing`,
+        to: 'https://landing-template.nuxt.dev/'
+      }, {
+        label: `Docs`,
+        to: 'https://docs-template.nuxt.dev/',
+        checked: true,
+        type: 'checkbox'
+      }, {
+        label: `SaaS`,
+        to: 'https://saas-template.nuxt.dev/'
+      }, {
+        label: `Dashboard`,
+        to: 'https://dashboard-template.nuxt.dev/'
+      }]"
+      :ui="{ content: 'w-(--reka-dropdown-menu-trigger-width) min-w-0' }"
+      size="xs"
+    >
+      <UButton
+        label="Docs"
+        variant="subtle"
+        trailing-icon="i-lucide-chevron-down"
+        size="xs"
+        class="-mb-[6px] font-semibold rounded-full truncate"
+        :class="[open && 'bg-[var(--ui-primary)]/15 ']"
+        :ui="{
+          trailingIcon: ['transition-transform duration-200', open ? 'rotate-180' : undefined].filter(Boolean).join(' ')
+        }"
+      />
+    </UDropdownMenu>
+  </div>
+</template>