fix: use sm-hidden

opensource-f2f · Mar 12, 2024 · 6977008 · 6977008
1 parent 43d59a4
commit 6977008
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 4 deletions.
diff --git a/src/components/app-navbar.vue b/src/components/app-navbar.vue
@@ -19,7 +19,7 @@ const toggleDark = useToggle(isDark)
 
       <div class="content" flex flex-grow-1 items-center flex-justify-end>
         <!-- menu -->
-        <NavMenu v-if="isLargeScreen" class="menu" />
+        <NavMenu v-if="isLargeScreen" />
 
         <!-- search -->
         <!-- <NavSearch /> -->
@@ -41,7 +41,7 @@ const toggleDark = useToggle(isDark)
         </a>
 
         <!-- collapsible menu -->
-        <NavHamburger v-if="!isLargeScreen" />
+        <NavHamburger />
       </div>
     </div>
   </div>

diff --git a/src/components/navbar/nav-hamburger.vue b/src/components/navbar/nav-hamburger.vue
@@ -6,12 +6,13 @@ import { isShowMenu, menuList } from '../../utils/store-data'
   <div
     ml-20px
     cursor-pointer
+    sm-hidden
     :i="isShowMenu ? 'carbon-close' : 'carbon-menu'"
     text=" 2xl"
     @click="isShowMenu = !isShowMenu"
   />
   <div
-    v-if="isShowMenu"
+    v-show="isShowMenu"
     style="background-color: var(--bg)"
     flex="~ col"
     fixed

diff --git a/src/utils/store-data.ts b/src/utils/store-data.ts
@@ -2,7 +2,7 @@
 export const menuList = ref([{ name: '🩷 Sponsors', href: '/sponsors' }])
 
 /** isLargeScreen info */
-export const isLargeScreen = useMediaQuery('(min-width: 600px)')
+export const isLargeScreen = useMediaQuery('(min-width: 768px))')
 
 /** isShowMenu */
 export const isShowMenu = ref(false)