Makes improves to colors and menu

docs/auto-imports.d.ts

@@ -43,6 +43,7 @@ declare global {
   const inject: typeof import('vue')['inject']
   const isDark: typeof import('./src/composables/dark')['isDark']
   const isDefined: typeof import('@vueuse/core')['isDefined']
+  const isMobile: typeof import('./src/composables/mobile')['isMobile']
   const isProxy: typeof import('vue')['isProxy']
   const isReactive: typeof import('vue')['isReactive']
   const isReadonly: typeof import('vue')['isReadonly']
@@ -327,6 +328,7 @@ declare module 'vue' {
     readonly inject: UnwrapRef<typeof import('vue')['inject']>
     readonly isDark: UnwrapRef<typeof import('./src/composables/dark')['isDark']>
     readonly isDefined: UnwrapRef<typeof import('@vueuse/core')['isDefined']>
+    readonly isMobile: UnwrapRef<typeof import('./src/composables/mobile')['isMobile']>
     readonly isProxy: UnwrapRef<typeof import('vue')['isProxy']>
     readonly isReactive: UnwrapRef<typeof import('vue')['isReactive']>
     readonly isReadonly: UnwrapRef<typeof import('vue')['isReadonly']>

docs/src/composables/index.ts

@@ -1 +1,2 @@
 export * from './dark'
+export * from './mobile'

docs/src/composables/mobile.ts

@@ -0,0 +1 @@
+export const isMobile = useMediaQuery('(max-width: 1024px)')

docs/src/layouts/default.vue

@@ -7,7 +7,7 @@ useHead({
 
 <template>
   <header py-2 px-4 bg-light dark:bg-dark z-10>
-    <nav flex my-3 gap-x-4 justify-end>
+    <nav flex my-3 gap-x-4 justify-end class="text-[0.9em]">
       <router-link to="/guide/what-is-dozzle">
         Guide
       </router-link>

docs/src/layouts/docs.vue

@@ -1,5 +1,8 @@
 <script setup lang="ts">
 import { useHead } from '@vueuse/head'
+
+import { isMobile } from '~/composables'
+
 const menu = [
   {
     name: 'Introduction',
@@ -22,8 +25,9 @@ useHead({
 
 <template>
   <header py-2 px-4 bg-light dark:bg-dark z-10 container mx-auto sticky top-0>
-    <nav flex my-3 gap-x-4 justify-end>
-      <h1 font-playfair dark:text-brand mr-auto text-4xl>
+    <nav flex my-3 gap-x-4 justify-end items-center>
+      <a v-if="isMobile" text-2xl i-mdi-menu />
+      <h1 font-playfair mr-auto text-4xl dark:text-brand>
         <a href="/">Dozzle</a>
       </h1>
       <a
@@ -45,8 +49,8 @@ useHead({
       />
     </nav>
   </header>
-  <div flex container mx-auto px-4>
-    <aside>
+  <div flex container mx-auto px-4 gap-4>
+    <aside bg-light dark:bg-dark :class="{ fixed: isMobile }">
       <nav w-64>
         <ul>
           <li
@@ -58,7 +62,7 @@ useHead({
             </h2>
             <ul mt-4 space-y-4 border="l-2 dark-50/50">
               <li v-for="item in m.subMenu" :key="item.path" pl-3>
-                <router-link :to="item.path" active-class="text-teal-600">
+                <router-link :to="item.path" active-class="text-teal-600" hover:text-teal-600>
                   {{ item.name }}
                 </router-link>
               </li>

docs/src/styles/main.css

@@ -6,3 +6,11 @@ html:not(.dark) .shiki-dark {
   display: none;
 }
 
+
+a:not(header a):not(nav a) {
+  @apply decoration-underline hover:text-teal-600;
+}
+
+header a {
+  @apply  hover:text-teal-600;
+}

docs/unocss.config.ts

@@ -42,8 +42,8 @@ export default defineConfig({
   theme: {
     colors: {
       brand: 'hsl(44, 100%, 77%)',
-      bgLight: '#eff0eb',
-      bgDark: '#1e1e20',
+      light: '#eff0eb',
+      dark: '#1e1e20',
     },
   },
 })