From e8be2f3d08c9a845dc5bd302273379a9f3e909e4 Mon Sep 17 00:00:00 2001
From: Aresn <admin@aresn.com>
Date: Wed, 15 May 2024 16:18:09 +0800
Subject: [PATCH] a

---
 components/i/Aside.vue | 24 ++++++++++++++++++
 layouts/default.vue    | 56 +++++++++++++++++++++++-------------------
 pages/search/[id].vue  |  2 +-
 3 files changed, 56 insertions(+), 26 deletions(-)
 create mode 100644 components/i/Aside.vue

diff --git a/components/i/Aside.vue b/components/i/Aside.vue
new file mode 100644
index 0000000..7b66207
--- /dev/null
+++ b/components/i/Aside.vue
@@ -0,0 +1,24 @@
+<template>
+    <div class="flex-grow bg-gray-100 dark:bg-gray-900">
+        <h1>GitBot</h1>
+    </div>
+    <div class="h-16 bg-gray-100 dark:bg-gray-900 flex items-center justify-center">
+        <UButton
+            :icon="isDark ? 'i-heroicons-moon-20-solid' : 'i-heroicons-sun-20-solid'"
+            color="white"
+            aria-label="Theme"
+            @click="isDark = !isDark"
+        />
+    </div>
+</template>
+<script setup lang="ts">
+const colorMode = useColorMode()
+const isDark = computed({
+    get () {
+        return colorMode.value === 'dark'
+    },
+    set () {
+        colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark'
+    }
+})
+</script>
diff --git a/layouts/default.vue b/layouts/default.vue
index 72a002a..d407df5 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -1,32 +1,38 @@
 <template>
     <div class="flex min-h-screen">
-        <div class="fixed top-0 bg-gray-100 dark:bg-gray-900 w-64 flex flex-col min-h-screen">
-            <div class="flex-grow">
-                <h1>GitBot</h1>
-            </div>
-            <div class="h-16 flex items-center justify-center">
-                <UButton
-                    :icon="isDark ? 'i-heroicons-moon-20-solid' : 'i-heroicons-sun-20-solid'"
-                    color="gray"
-                    variant="ghost"
-                    aria-label="Theme"
-                    @click="isDark = !isDark"
-                />
-            </div>
+        <div class="fixed top-0 w-64 hidden md:flex flex-col min-h-screen">
+            <IAside />
         </div>
-        <div class="ml-64 bg-white dark:bg-black flex flex-grow">
+        <div class="ml-0 md:ml-64 bg-white dark:bg-black flex flex-grow">
             <slot />
         </div>
     </div>
+    <div class="flex md:hidden">
+        <UButton
+            class="fixed top-2 left-2 z-20"
+            color="white"
+            trailing-icon="i-heroicons-bars-3-20-solid"
+            @click="handleToogleAside"
+        />
+        <USlideover
+            class="w-64"
+            v-model="isOpenAside"
+            side="left"
+            :overlay="false"
+        >
+            <UButton
+                class="absolute top-2 right-2 z-20"
+                color="white"
+                trailing-icon="i-heroicons-x-mark-20-solid"
+                @click="handleToogleAside"
+            />
+            <IAside />
+        </USlideover>
+    </div>
 </template>
-<script setup lang="ts">
-const colorMode = useColorMode()
-const isDark = computed({
-    get () {
-        return colorMode.value === 'dark'
-    },
-    set () {
-        colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark'
-    }
-})
-</script>
\ No newline at end of file
+<script setup>
+const isOpenAside = ref(false)
+const handleToogleAside = () => {
+    isOpenAside.value = !isOpenAside.value;
+}
+</script>
diff --git a/pages/search/[id].vue b/pages/search/[id].vue
index a3650f5..10ddd81 100644
--- a/pages/search/[id].vue
+++ b/pages/search/[id].vue
@@ -156,7 +156,7 @@ const handleShare = (hash) => {
     })
 }
 const handleCopyMD = (index) => {
-    
+
 }
 const handleReGenerate = (index) => {
 
-- 
GitLab