make drawer size change for smaller screens

src/layouts/MainLayout.vue

@@ -10,7 +10,7 @@
         />
         <q-btn flat dense round icon="menu" aria-label="Menu" @click="toggleLeftDrawer" />
 
-        <q-toolbar-title class="text-primary-text"> {{ productName }} </q-toolbar-title>
+        <q-toolbar-title class="text-primary-text"> {{ appName }} </q-toolbar-title>
 
         <div>Version {{ version }}</div>
         <q-btn dense icon="refresh" square class="q-px-md q-ml-md" @click="refresh" />
@@ -18,7 +18,7 @@
       </q-toolbar>
     </q-header>
 
-    <q-drawer v-model="leftDrawerOpen" bordered>
+    <q-drawer v-model="leftDrawerOpen" bordered :width="drawerWidth" :overlay="$q.screen.lt.sm">
       <q-list>
         <q-item v-if="!autorized" to="/login" exact clickable v-ripple @click="closeDrawer">
           <q-item-section>{{ $t('login') }}</q-item-section>
@@ -63,12 +63,13 @@
 
 <script setup lang="ts">
 import { computed, ref } from 'vue';
-import { version, productName } from '../../package.json';
+import { version } from '../../package.json';
 import LoginMenu from 'src/vueLib/login/LoginMenu.vue';
 import { useUserStore } from 'src/vueLib/login/userStore';
-import { Logo } from 'src/vueLib/models/logo';
+import { logo, appName } from 'src/vueLib/models/settings';
+import { useQuasar } from 'quasar';
 
-const localLogo = ref(Logo);
+const localLogo = ref(logo);
 
 const leftDrawerOpen = ref(false);
 const user = useUserStore();
@@ -87,4 +88,10 @@ function closeDrawer() {
 function refresh() {
   window.location.reload();
 }
+
+// Change width based on screen size
+const drawerWidth = computed(() => {
+  const $q = useQuasar();
+  return $q.screen.lt.sm ? 220 : 300; // phone: 220px, desktop: 300px
+});
 </script>