Creates header

docs/components.d.ts

@@ -11,6 +11,7 @@ declare module '@vue/runtime-core' {
   export interface GlobalComponents {
     BrowserWindow: typeof import('./src/components/BrowserWindow.vue')['default']
     CodeBlock: typeof import('./src/components/CodeBlock.vue')['default']
+    copy: typeof import('./src/components/TheFooter copy.vue')['default']
     Features: typeof import('./src/components/Features.vue')['default']
     Hero: typeof import('./src/components/Hero.vue')['default']
     Installation: typeof import('./src/components/Installation.vue')['default']
@@ -19,5 +20,6 @@ declare module '@vue/runtime-core' {
     RouterView: typeof import('vue-router')['RouterView']
     SubSection: typeof import('./src/components/SubSection.vue')['default']
     TheFooter: typeof import('./src/components/TheFooter.vue')['default']
+    TheHeader: typeof import('./src/components/TheHeader.vue')['default']
   }
 }

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>
+  <the-header>
-    <nav flex my-3 gap-x-4 justify-end class="text-[0.9em]">
     <router-link to="/guide/what-is-dozzle">
       Guide
     </router-link>
-      <a
+  </the-header>
-        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>
   <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>
+  <the-header container sticky top-0 @menu-click="showMenu = true" />
-    <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>
   <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) {
+a:not(header *):not(nav *) {
-  @apply decoration-underline hover:text-teal-600;
+  @apply underline hover:text-teal-600;
 }
 
-header a {
+header > nav > a {
-  @apply  hover:text-teal-600;
+  @apply  hover:text-teal-600 transition duration-200 ease-in-out ;
 }

docs/unocss.config.ts

@@ -14,7 +14,8 @@ export default defineConfig({
   shortcuts: [
     ['btn', 'px-4 py-1 rounded inline-block bg-teal-600 text-white cursor-pointer hover:bg-teal-700 disabled:cursor-default disabled:bg-gray-600 disabled:opacity-50'],
     ['icon-btn', 'text-[0.9em] inline-block cursor-pointer select-none opacity-75 transition duration-200 ease-in-out hover:opacity-100 hover:text-teal-600 !outline-none'],
-    ['main-bg', 'bg-light dark:bg-dark'],
+    ['main-bg', 'bg-main-light dark:bg-main-dark'],
+    [/^circle-(\w+)$/, ([, c]) => `rounded-full bg-${c}500 w-3 h-3`],
   ],
   transformers: [
     transformerDirectives(),
@@ -42,8 +43,8 @@ export default defineConfig({
   theme: {
     colors: {
       brand: 'hsl(44, 100%, 77%)',
-      light: '#eff0eb',
+      mainLight: '#eff0eb',
-      dark: '#1e1e20',
+      mainDark: '#1e1e20',
     },
   },
 })