调整移动端菜单

archive/SearchHistory.vue

@@ -27,7 +27,6 @@
                     size="xs"
                     long
                     :to="`/search/${item.c_id}`"
-                    @click="handleClickItem"
                 >
                     <div class="flex-grow truncate">{{ item.title }}</div>
                     <UButton
@@ -89,7 +88,6 @@
 <script setup>
 import { IConfirm } from '#components'
 const emits = defineEmits(['sign', 'clear'])
-const Layout = inject('Layout')
 const modal = useModal()
 const { $isSignIn } = storeToRefs(useUserStore())
 const { $searchHistory } = storeToRefs(useSearchStore())
@@ -135,10 +133,6 @@ function handleOpen () {
 function handleClose () {
     isOpenHistory.value = false
 }
-function handleClickItem () {
-    Layout.handleCloseAside()
-}
-
 nextTick(() => {
     $getSearchHistory()
 })

components/i/MenuSider.vue

+<template>
+    <div class="flex md:hidden">
+        <UButton
+            class="z-20"
+            :class="{ 'fixed top-2 left-2' : fixed }"
+            color="white"
+            trailing-icon="i-heroicons-bars-3-20-solid"
+            @click="handleToggleAside"
+        />
+        <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="handleToggleAside"
+            />
+            <IAside />
+        </USlideover>
+    </div>
+</template>
+<script setup>
+defineProps({
+    fixed: {
+        type: Boolean,
+        default: false
+    }
+})
+const isOpenAside = ref(false)
+function handleToggleAside () {
+    isOpenAside.value = !isOpenAside.value
+}
+</script>
\ No newline at end of file

components/i/Nav.vue

@@ -7,7 +7,6 @@
             size="md"
             label="首页"
             to="/"
-            @click="handleClickItem"
         />
         <UButton
             leading-icon="i-heroicons-rectangle-stack"
@@ -16,7 +15,6 @@
             size="md"
             label="主题"
             to="/library"
-            @click="handleClickItem"
         />
         <ISearchHistory @sign="$openSign" />
         <ClientOnly>
@@ -36,8 +34,4 @@
 <script setup>
 const { $isSignIn, $isOpenSign } = storeToRefs(useUserStore())
 const { $openSign, $closeSign } = useUserStore()
-const Layout = inject('Layout')
-function handleClickItem () {
-    Layout.handleCloseAside()
-}
 </script>

components/i/SearchHistory.vue

@@ -27,7 +27,6 @@
                         size="xs"
                         long
                         :to="`/search/${item.c_id}`"
-                        @click="handleClickItem"
                     >
                         <div class="flex-grow truncate" :title="item.title">{{ item.title }}</div>
                     </UButton>
@@ -38,7 +37,6 @@
 </template>
 <script setup>
 const emits = defineEmits(['sign', 'clear'])
-const Layout = inject('Layout')
 const modal = useModal()
 const { $searchHistory } = storeToRefs(useSearchStore())
 const { $clearSearchHistory } = useSearchStore()
@@ -46,7 +44,4 @@ const query = ref('')
 function handleClear () {
     $clearSearchHistory()
 }
-function handleClickItem () {
-    Layout.handleCloseAside()
-}
 </script>

components/i/library/Header.vue

@@ -3,6 +3,7 @@
         <div class="container max-w-screen-lg 2xl:max-w-screen-xl flex flex-col p-6">
             <div class="flex justify-between items-center">
                 <div class="flex gap-4">
+                    <IMenuSider />
                     <div class="flex items-center text-xl gap-2" v-if="!collect">
                         <UIcon name="i-heroicons-rectangle-stack-20-solid" />
                         <div>主题</div>

components/i/search/Header.vue

 <template>
     <header class="sticky top-0 z-10 bg-white dark:bg-black w-full flex flex-col">
         <div class="w-full p-2 justify-end sm:justify-between items-center flex">
+            <IMenuSider />
             <div class="hidden md:flex">
                 <div class="flex items-center gap-2" v-if="repo">
                     <UIcon name="i-simple-icons-github" />{{ repo }}

layouts/default.vue

@@ -7,41 +7,12 @@
             <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="handleToggleAside"
-        />
-        <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="handleToggleAside"
-            />
-            <IAside />
-        </USlideover>
-    </div>
     <ILibraryCreate />
     <ILibrarySelect @success="handleCollectSuccess" />
 </template>
 <script setup>
-const isOpenAside = ref(false)
 const selectCollectData = ref(null)
 const removeCollectData = ref(null)
-function handleToggleAside () {
-    isOpenAside.value = !isOpenAside.value
-}
-function handleCloseAside () {
-    isOpenAside.value = false
-}
 function handleCollectSuccess (data) {
     selectCollectData.value = data
 }
@@ -55,7 +26,6 @@ function handleClearRemoveCollectData () {
     removeCollectData.value = null
 }
 provide('Layout', {
-    handleCloseAside,
     selectCollectData,
     handleClearCollectData,
     removeCollectData,

pages/index.vue

@@ -18,6 +18,7 @@
             </template>
         </div>
     </div>
+    <IMenuSider fixed />
 </template>
 <script setup>
 const recommendQuestions = [