Creates header

docs/src/components/TheHeader.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+const emit = defineEmits(['menu-click'])
+</script>
+
+<template>
+  <header py-2 lg:px-4 main-bg mx-auto>
+    <nav flex my-3 gap-x-4 justify-end items-center>
+      <a v-if="isMobile" cursor-pointer text-2xl i-mdi-menu @click="emit('menu-click')" />
+      <h1 font-playfair mr-auto text-4xl dark:text-brand>
+        <a href="/">Dozzle</a>
+      </h1>
+      <slot />
+
+      <a
+        icon-btn
+        i-mdi-docker
+        text-xl
+        target="_blank"
+        rel="noreferrer"
+        href="https://hub.docker.com/r/amir20/dozzle/"
+      />
+      <a
+        icon-btn
+        i-mdi-github
+        text-xl
+        rel="noreferrer"
+        href="https://github.com/amir20/dozzle"
+        target="_blank"
+        title="Dozzle GitHub"
+      />
+    </nav>
+  </header>
+</template>

docs/src/layouts/default.vue

@@ -6,29 +6,10 @@ useHead({
 </script>
 
 <template>
-  <header py-2 px-4 bg-light dark:bg-dark z-10>
-    <nav flex my-3 gap-x-4 justify-end class="text-[0.9em]">
-      <router-link to="/guide/what-is-dozzle">
-        Guide
-      </router-link>
-      <a
-        icon-btn
-        i-mdi-docker
-        text-xl
-        target="_blank"
-        rel="noreferrer"
-        href="https://hub.docker.com/r/amir20/dozzle/"
-      />
-      <a
-        icon-btn
-        i-mdi-github
-        text-xl
-        rel="noreferrer"
-        href="https://github.com/amir20/dozzle"
-        target="_blank"
-        title="Dozzle GitHub"
-      />
-    </nav>
-  </header>
+  <the-header>
+    <router-link to="/guide/what-is-dozzle">
+      Guide
+    </router-link>
+  </the-header>
   <RouterView />
 </template>

docs/src/layouts/docs.vue

@@ -1,8 +1,6 @@
 <script setup lang="ts">
 import { useHead } from '@vueuse/head'
 
-import { isMobile } from '~/composables'
-
 const menu = [
   {
     name: 'Introduction',
@@ -26,31 +24,7 @@ const showMenu = ref(false)
 </script>
 
 <template>
-  <header py-2 lg:px-4 bg-light dark:bg-dark container mx-auto sticky top-0>
-    <nav flex my-3 gap-x-4 justify-end items-center>
-      <a v-if="isMobile" cursor-pointer text-2xl i-mdi-menu @click="showMenu = !showMenu" />
-      <h1 font-playfair mr-auto text-4xl dark:text-brand>
-        <a href="/">Dozzle</a>
-      </h1>
-      <a
-        icon-btn
-        i-mdi-docker
-        text-xl
-        target="_blank"
-        rel="noreferrer"
-        href="https://hub.docker.com/r/amir20/dozzle/"
-      />
-      <a
-        icon-btn
-        i-mdi-github
-        text-xl
-        rel="noreferrer"
-        href="https://github.com/amir20/dozzle"
-        target="_blank"
-        title="Dozzle GitHub"
-      />
-    </nav>
-  </header>
+  <the-header container sticky top-0 @menu-click="showMenu = true" />
   <div flex container mx-auto px-4 gap-4>
     <Teleport to="body" :disabled="!isMobile">
       <div v-if="showMenu" backdrop-blur-sm inset-0 fixed @click="showMenu = false" />

docs/src/styles/main.css

@@ -7,10 +7,10 @@ html:not(.dark) .shiki-dark {
 }
 
 
-a:not(header a):not(nav a) {
-  @apply decoration-underline hover:text-teal-600;
+a:not(header *):not(nav *) {
+  @apply underline hover:text-teal-600;
 }
 
-header a {
-  @apply  hover:text-teal-600;
+header > nav > a {
+  @apply  hover:text-teal-600 transition duration-200 ease-in-out ;
 }