1  <script setup lang="ts">
 2  import { useLayoutStore } from '@/renderer/store/layout'
 3  
 4  import { useDisplay } from 'vuetify'
 5  
 6  const mobileBreakpoint = 600
 7  const { mobile } = useDisplay({ mobileBreakpoint: mobileBreakpoint })
 8  
 9  const layoutStore = useLayoutStore()
10  
11  function handleDrawerClick() {
12    if (mobile.value) {
13      layoutStore.sidebar = false
14    }
15  }
16  </script>
17  <template>
18    <v-navigation-drawer
19      v-model="layoutStore.sidebar"
20      :permanent="!mobile"
21      :width="mobile ? mobileBreakpoint : 273"
22      @click="handleDrawerClick"
23    >
24      <slot />
25      <template #append>
26        <slot name="append" />
27      </template>
28    </v-navigation-drawer>
29  </template>