From 5f2420960bde02bc2bc871146f131f2c64012531 Mon Sep 17 00:00:00 2001
From: Amir Raminfar <findamir@gmail.com>
Date: Sun, 5 Mar 2023 14:24:43 -0800
Subject: [PATCH] Makes improves to colors and menu

---
 docs/auto-imports.d.ts         |  2 ++
 docs/src/composables/index.ts  |  1 +
 docs/src/composables/mobile.ts |  1 +
 docs/src/layouts/default.vue   |  2 +-
 docs/src/layouts/docs.vue      | 14 +++++++++-----
 docs/src/styles/main.css       |  8 ++++++++
 docs/unocss.config.ts          |  4 ++--
 7 files changed, 24 insertions(+), 8 deletions(-)
 create mode 100644 docs/src/composables/mobile.ts

diff --git a/docs/auto-imports.d.ts b/docs/auto-imports.d.ts
index 2b67c07f..38672ab6 100644
--- a/docs/auto-imports.d.ts
+++ b/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']>
diff --git a/docs/src/composables/index.ts b/docs/src/composables/index.ts
index e8d15660..097e92fe 100644
--- a/docs/src/composables/index.ts
+++ b/docs/src/composables/index.ts
@@ -1 +1,2 @@
 export * from './dark'
+export * from './mobile'
diff --git a/docs/src/composables/mobile.ts b/docs/src/composables/mobile.ts
new file mode 100644
index 00000000..597b58fe
--- /dev/null
+++ b/docs/src/composables/mobile.ts
@@ -0,0 +1 @@
+export const isMobile = useMediaQuery('(max-width: 1024px)')
diff --git a/docs/src/layouts/default.vue b/docs/src/layouts/default.vue
index 190b9b54..10e78ac3 100644
--- a/docs/src/layouts/default.vue
+++ b/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>
diff --git a/docs/src/layouts/docs.vue b/docs/src/layouts/docs.vue
index 19a728b1..6e2ffe0f 100644
--- a/docs/src/layouts/docs.vue
+++ b/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>
diff --git a/docs/src/styles/main.css b/docs/src/styles/main.css
index 6652c028..4688b88b 100755
--- a/docs/src/styles/main.css
+++ b/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;
+}
diff --git a/docs/unocss.config.ts b/docs/unocss.config.ts
index 865e5193..7d76e57a 100644
--- a/docs/unocss.config.ts
+++ b/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',
     },
   },
 })