a

components/i/Aside.vue

+<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>

layouts/default.vue

 <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 class="fixed top-0 w-64 hidden md:flex flex-col min-h-screen">
+            <IAside />
         </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>
-        <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 setup>
+const isOpenAside = ref(false)
+const handleToogleAside = () => {
+    isOpenAside.value = !isOpenAside.value;
+}
 </script>