Flaschengeist/flaschengeist-frontend
Flaschengeist
/
flaschengeist-frontend
7
0
Fork 1
Code Issues Pull Requests Projects Releases Activity

update behavior of left drawer

This commit is contained in:
Tim Gröger 2024-01-16 14:37:38 +01:00
parent 417689b725
commit fe9ec96ce1
1 changed files with 48 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

75
src/layouts/MainLayout.vue
View File

@ -2,7 +2,7 @@
<q-layout view="hHh Lpr lff"> <q-layout view="hHh Lpr lff">
<q-header elevated class="bg-primary text-white"> <q-header elevated class="bg-primary text-white">
<q-toolbar> <q-toolbar>
<q-btn dense flat round icon="mdi-menu" @click="openMenu" /> <q-btn dense flat round icon="mdi-menu" @click="openMenu(true)" />
<q-toolbar-title> <q-toolbar-title>
<router-link :to="{ name: 'dashboard' }" style="text-decoration: none; color: inherit"> <router-link :to="{ name: 'dashboard' }" style="text-decoration: none; color: inherit">
@ -56,32 +56,44 @@
side="left" side="left"
bordered bordered
:mini="leftDrawerMini" :mini="leftDrawerMini"
@click.capture="openMenu" @click.capture="openMenuMini"
> >
<!-- Plugins --> <!-- Plugins -->
<essential-expansion-link <q-scroll-area class="fit">
v-for="(entry, index) in mainLinks" <essential-expansion-link
:key="'plugin' + index" v-for="(entry, index) in mainLinks"
:entry="entry" :key="'plugin' + index"
@add-short-cut="addShortcut" :entry="entry"
/> @add-short-cut="addShortcut"
<q-separator /> />
<essential-link
v-for="(entry, index) in essentials"
:key="'essential' + index"
:entry="entry"
/>
<div v-if="platform.is.capacitor">
<q-separator /> <q-separator />
<q-item clickable tag="a" target="self" @click="logout"> <essential-link
<q-item-section avatar> v-for="(entry, index) in essentials"
<q-icon name="mdi-exit-to-app" /> :key="'essential' + index"
</q-item-section> :entry="entry"
/>
<div v-if="platform.is.capacitor">
<q-separator />
<q-item clickable tag="a" target="self" @click="logout">
<q-item-section avatar>
<q-icon name="mdi-exit-to-app" />
</q-item-section>
<q-item-section> <q-item-section>
<q-item-label>Logout</q-item-label> <q-item-label>Logout</q-item-label>
</q-item-section> </q-item-section>
</q-item> </q-item>
</div>
</q-scroll-area>
<div class="q-mini-drawer-hide absolute" style="top: 15px; right: -17px">
<q-btn
dense
round
unelevated
color="accent"
icon="mdi-chevron-left"
@click="openMenuMini(true)"
/>
</div> </div>
</q-drawer> </q-drawer>
<q-page-container> <q-page-container>
@ -125,7 +137,7 @@ export default defineComponent({
const mainStore = useMainStore(); const mainStore = useMainStore();
const flaschengeist = inject<FG_Plugin.Flaschengeist>('flaschengeist'); const flaschengeist = inject<FG_Plugin.Flaschengeist>('flaschengeist');
const leftDrawer = ref(!Platform.is.mobile); const leftDrawer = ref(!Platform.is.mobile);
const leftDrawerMini = ref(false); const leftDrawerMini = ref(true);
const mainLinks = flaschengeist?.menuLinks || []; const mainLinks = flaschengeist?.menuLinks || [];
const notifications = computed(() => mainStore.notifications.slice().reverse()); const notifications = computed(() => mainStore.notifications.slice().reverse());
const polling = ref(NaN); const polling = ref(NaN);
@ -138,9 +150,11 @@ export default defineComponent({
void mainStore.getShortcuts(); void mainStore.getShortcuts();
}); });
onBeforeUnmount(() => window.clearInterval(polling.value)); onBeforeUnmount(() => window.clearInterval(polling.value));
/*
function openMenu(event: { target: HTMLInputElement }) { function openMenu(event: { target: HTMLInputElement }) {
if (event.target.nodeName === 'DIV') leftDrawerMini.value = false; console.log(event.target.nodeName);
if (event.target.nodeName === 'DIV' || event.target.nodeName === 'I')
leftDrawerMini.value = false;
else { else {
if (!leftDrawer.value || leftDrawerMini.value) { if (!leftDrawer.value || leftDrawerMini.value) {
leftDrawer.value = true; leftDrawer.value = true;
@ -151,7 +165,13 @@ export default defineComponent({
} }
} }
} }
*/
function openMenu(value = !leftDrawer.value) {
leftDrawer.value = value;
}
function openMenuMini(value = !leftDrawerMini.value) {
leftDrawerMini.value = value;
}
function logout() { function logout() {
void router.push({ name: 'login', params: { logout: 'logout' } }); void router.push({ name: 'login', params: { logout: 'logout' } });
void mainStore.logout(); void mainStore.logout();
@ -214,6 +234,7 @@ export default defineComponent({
notifications, notifications,
noPermission, noPermission,
openMenu, openMenu,
openMenuMini,
remove, remove,
requestPermission, requestPermission,
useNative, useNative,