feat: app logo

Projects/kompose/docs/app/components/AppHeader.vue

@@ -7,66 +7,41 @@ const { header } = useAppConfig()
 </script>
 
 <template>
-  <UHeader
-    :ui="{ center: 'flex-1' }"
-    :to="header?.to || '/'"
-  >
-    <UContentSearchButton
-      v-if="header?.search"
-      :collapsed="false"
-      class="w-full"
-    />
+  <UHeader :ui="{ center: 'flex-1' }" :to="header?.to || '/'">
+    <UContentSearchButton v-if="header?.search" :collapsed="false" class="w-full" />
 
-    <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"
-      />
+    <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 || '/'">
-        <AppLogo class="w-auto h-6 shrink-0" />
-      </NuxtLink>
+    <template v-else #left>
+      <div class="flex items-center gap-6">
+        <NuxtLink :to="header?.to || '/'" >
+          <AppLogo class="!text-2xl mt-1" />
+        </NuxtLink>
 
-      <TemplateMenu />
+        <TemplateMenu class="h-6" />
+      </div>
     </template>
 
     <template #right>
-      <UContentSearchButton
-        v-if="header?.search"
-        class="lg:hidden"
-      />
+      <UContentSearchButton v-if="header?.search" class="lg:hidden" />
 
       <UColorModeButton v-if="header?.colorMode" />
 
       <template v-if="header?.links">
-        <UButton
-          v-for="(link, index) of header.links"
-          :key="index"
-          v-bind="{ color: 'neutral', variant: 'ghost', ...link }"
-        />
+        <UButton v-for="(link, index) of header.links" :key="index"
+          v-bind="{ color: 'neutral', variant: 'ghost', ...link }" />
       </template>
     </template>
 
     <template #body>
-      <UContentNavigation
-        highlight
-        :navigation="navigation"
-      />
+      <UContentNavigation highlight :navigation="navigation" />
     </template>
   </UHeader>
 </template>