paadi/memberApp
1
0
Fork 0
Code Issues 6 Pull Requests Actions Packages Projects Releases Wiki Activity

make drawer size change for smaller screens

Browse Source
This commit is contained in:
Adrian Zürcher
2025-11-12 10:22:12 +01:00
parent 66bb7c1942
commit b12574994c
1 changed files with 12 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
src/layouts/MainLayout.vue
View File

@@ -10,7 +10,7 @@
/> />
<q-btn flat dense round icon="menu" aria-label="Menu" @click="toggleLeftDrawer" /> <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> <div>Version {{ version }}</div>
<q-btn dense icon="refresh" square class="q-px-md q-ml-md" @click="refresh" /> <q-btn dense icon="refresh" square class="q-px-md q-ml-md" @click="refresh" />
@@ -18,7 +18,7 @@
</q-toolbar> </q-toolbar>
</q-header> </q-header>
<q-drawer v-model="leftDrawerOpen" bordered> <q-drawer v-model="leftDrawerOpen" bordered :width="drawerWidth" :overlay="$q.screen.lt.sm">
<q-list> <q-list>
<q-item v-if="!autorized" to="/login" exact clickable v-ripple @click="closeDrawer"> <q-item v-if="!autorized" to="/login" exact clickable v-ripple @click="closeDrawer">
<q-item-section>{{ $t('login') }}</q-item-section> <q-item-section>{{ $t('login') }}</q-item-section>
@@ -63,12 +63,13 @@
<script setup lang="ts"> <script setup lang="ts">
import { computed, ref } from 'vue'; 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 LoginMenu from 'src/vueLib/login/LoginMenu.vue';
import { useUserStore } from 'src/vueLib/login/userStore'; 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 leftDrawerOpen = ref(false);
const user = useUserStore(); const user = useUserStore();
@@ -87,4 +88,10 @@ function closeDrawer() {
function refresh() { function refresh() {
window.location.reload(); 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> </script>