fix(Header): hide TemplateMenu when logo is set (#126)

Co-authored-by: Benjamin Canac <[email protected]>
Co-authored-by: Baptiste Leproux <[email protected]>

Author: 3 people

app/app.config.ts

@@ -17,6 +17,8 @@ export default defineAppConfig({
     siteName: 'Nuxt UI Pro - Docs template'
   },
   header: {
+    title: '',
+    to: '/',
     logo: {
       alt: '',
       light: '',

app/components/AppHeader.vue

@@ -7,7 +7,10 @@ const { header } = useAppConfig()
 </script>
 
 <template>
-  <UHeader :ui="{ center: 'flex-1' }">
+  <UHeader
+    :ui="{ center: 'flex-1' }"
+    :to="header?.to || '/'"
+  >
     <UContentSearchButton
       v-if="header?.search"
       label="Search..."
@@ -22,19 +25,29 @@ const { header } = useAppConfig()
       </template>
     </UContentSearchButton>
 
-    <template #left>
-      <NuxtLink to="/">
-        <UColorModeImage
-          v-if="header?.logo?.dark || header?.logo?.light"
-          :light="header?.logo?.light!"
-          :dark="header?.logo?.dark!"
-          :alt="header?.logo?.alt"
-          class="h-6 w-auto shrink-0"
-        />
-        <LogoPro
-          v-else
-          class="w-auto h-6 shrink-0"
-        />
+    <template
+      v-if="header?.logo?.dark || header?.logo?.light || header?.title"
+      #title
+    >
+      <UColorModeImage
+        v-if="header?.logo?.dark || header?.logo?.light"
+        :light="header?.logo?.light!"
+        :dark="header?.logo?.dark!"
+        :alt="header?.logo?.alt"
+        class="h-6 w-auto shrink-0"
+      />
+
+      <span v-else-if="header?.title">
+        {{ header.title }}
+      </span>
+    </template>
+
+    <template
+      v-else
+      #left
+    >
+      <NuxtLink :to="header?.to || '/'">
+        <LogoPro class="w-auto h-6 shrink-0" />
       </NuxtLink>
 
       <TemplateMenu />

nuxt.schema.ts

@@ -93,6 +93,20 @@ export default defineNuxtSchema({
       description: 'Header configuration.',
       icon: 'i-mdi-page-layout-header',
       fields: {
+        title: field({
+          type: 'string',
+          title: 'Title',
+          description: 'Title to display in the header.',
+          icon: 'i-mdi-format-title',
+          default: ''
+        }),
+        to: field({
+          type: 'string',
+          title: 'To',
+          description: 'URL to redirect to when the title is clicked.',
+          icon: 'i-mdi-link-variant',
+          default: ''
+        }),
         logo: group({
           title: 'Logo',
           description: 'Header logo configuration.',