control side menu

src/components/NavigationMenu.vue

@@ -6,6 +6,7 @@ interface Props {
 }
 
 const { isAuth } = defineProps<Props>()
+const open = defineModel<boolean>('open')
 
 const menu = ref([
   {
@@ -23,16 +24,11 @@ const menu = ref([
     value: 3,
     props: { prependIcon: 'mdi-calendar', to: '/calendar', requiresAuth: true },
   },
-  // {
-  //   title: 'Games',
-  //   value: 4,
-  //   props: { prependIcon: 'mdi-view-dashboard', to: '/games', requiresAuth: false },
-  // },
 ])
 </script>
 
 <template>
-  <v-navigation-drawer rounded="0" width="200" persistent permanent class="pt-4">
+  <v-navigation-drawer v-model="open" rounded="0" width="200" persistent permanent class="pt-4">
     <template v-for="item in menu" :key="item.value">
       <v-list-item
         density="compact"

src/layouts/DefaultLayout.vue

@@ -10,23 +10,34 @@ import NavigationMenu from '@/components/NavigationMenu.vue'
 import { usePushNotifications } from '@/composables/usePushNotifications.ts'
 import ProjectMenu from '@/components/ProjectMenu.vue'
 import NotificationsList from '@/components/NotificationsList.vue'
+import { useStorage } from '@vueuse/core'
+
+const title = 'Ulitka'
+const MENU_STATE_KEY = 'menuStateKey'
 
 const router = useRouter()
 const route = useRoute()
 const session = authClient.useSession()
 const { mode: themeMode, cycleThemeMode } = useThemeMode()
 const push = usePushNotifications()
-
-const title = 'Ulitka'
+const open = useStorage(MENU_STATE_KEY, true)
 
 const isAuth = computed(() => !!session.value.data)
 
+const menuIcon = computed(() => {
+  return open.value ? 'mdi-menu-open' : 'mdi-menu-close'
+})
+
 /** Shown in the avatar until the user uploads a picture */
 const initial = computed(() => {
   const user = session.value.data?.user
   return (user?.name.trim() || user?.email || '?').charAt(0).toUpperCase()
 })
 
+function changeMenuState() {
+  open.value = !open.value
+}
+
 function goToSignIn() {
   router.push({ path: '/sign-in' })
 }
@@ -63,6 +74,8 @@ const fluid = computed(() => {
 <template>
   <v-layout>
     <v-app-bar density="compact" elevation="0" border rounded="0">
+      <v-btn rounded="0" :icon="menuIcon" @click="changeMenuState" />
+
       <v-app-bar-title class="d-flex">
         <router-link class="text-decoration-none text-link font-weight-bold d-flex align-baseline ga-2" to="/">
           <v-icon icon="mdi-snail" />
@@ -117,7 +130,7 @@ const fluid = computed(() => {
       </div>
     </v-app-bar>
 
-    <navigation-menu :is-auth="isAuth" />
+    <navigation-menu v-model:open="open" :is-auth="isAuth" />
 
     <v-main>
       <v-container :fluid="fluid" class="layout-container">