fix(nuxt-admin): hide drawer on mobile only

starter/nuxt-admin/components/Admin/Sidebar.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import {breakpointsTailwind, useBreakpoints} from '@vueuse/core';
 import {Menu} from '../Aside/Menus.vue';
 
 const props =
@@ -10,9 +9,6 @@ const props =
 const appConfig = useAppConfig();
 const adminDrawer = useAdminDrawer();
 
-const $breakpoints = useBreakpoints(breakpointsTailwind);
-const isMobile = $breakpoints.smaller('sm'); // only smaller than lg
-
 watchEffect(() => {
   adminDrawer.value = !isMobile.value;
 });

starter/nuxt-admin/components/Aside/Account.vue

@@ -4,8 +4,6 @@ const {signOut, data: session} = useSession();
 function logout() {
   signOut();
 }
-
-const adminDrawer = useAdminDrawer();
 </script>
 
 <template>
@@ -26,7 +24,7 @@ const adminDrawer = useAdminDrawer();
         !rounded-md
         flex-1
       "
-      @click="adminDrawer = false"
+      @click="hideDrawerOnMobile"
     >
       <Avatar :src="session?.user?.image" />
       <div class="text-sm text-left w-8/12">

starter/nuxt-admin/components/Aside/Menus.vue

@@ -10,15 +10,13 @@ export type Menu = InstanceType<typeof VListItem>['$props'] & {
 defineProps<{
   menus: Menu[];
 }>();
-
-const adminDrawer = useAdminDrawer();
 </script>
 
 <template>
   <VList hover class="flex-1 px-2 mb-4 overflow-y-auto">
     <template v-for="{text, header, ...menu} in menus" :key="text">
       <VListItemHeader v-if="header">{{ header }}</VListItemHeader>
-      <VListItem v-else v-bind="menu" @click="adminDrawer = false">
+      <VListItem v-else v-bind="menu" @click="hideDrawerOnMobile">
         {{ text }}
       </VListItem>
     </template>

starter/nuxt-admin/composables/admin.ts

@@ -1 +1,13 @@
+import {breakpointsTailwind, useBreakpoints} from '@vueuse/core';
+
 export const useAdminDrawer = () => useState('admin-drawer', () => true);
+
+export const $breakpoints = useBreakpoints(breakpointsTailwind);
+
+export const isMobile = $breakpoints.smaller('sm'); // only smaller than lg
+
+export const hideDrawerOnMobile = () => {
+  if (isMobile.value) {
+    useAdminDrawer().value = false;
+  }
+};