147 lines
3.8 KiB
Vue
147 lines
3.8 KiB
Vue
<template>
|
|
<q-layout view="hHh lpr lFf">
|
|
<q-header elevated class="bg-primary text-white">
|
|
<q-toolbar>
|
|
<q-btn
|
|
v-if="!leftDrawerOpen"
|
|
dense
|
|
flat
|
|
round
|
|
icon="menu"
|
|
@click="leftDrawerOpen = !leftDrawerOpen"
|
|
/>
|
|
|
|
<q-toolbar-title>
|
|
<router-link :to="{ name: 'dashboard' }" style="text-decoration: none; color: inherit">
|
|
<q-avatar rounded>
|
|
<img src="flaschengeist-logo-white.svg" />
|
|
</q-avatar>
|
|
<span class="gt-xs"> Flaschengeist </span>
|
|
</router-link>
|
|
</q-toolbar-title>
|
|
|
|
<!-- Hier kommen die Shortlinks hin -->
|
|
<shortcut-link
|
|
v-for="(shortcut, index) in shortcuts"
|
|
:key="'shortcut' + index"
|
|
:shortcut="shortcut"
|
|
/>
|
|
<q-btn flat round dense icon="mdi-exit-to-app" @click="logout()" />
|
|
</q-toolbar>
|
|
</q-header>
|
|
|
|
<q-drawer
|
|
v-model="leftDrawerOpen"
|
|
show-if-above
|
|
side="left"
|
|
bordered
|
|
:mini="leftDrawerMini"
|
|
@click.capture="leftDrawerClicker"
|
|
>
|
|
<!-- Plugins -->
|
|
<q-list>
|
|
<essential-link
|
|
v-for="(entry, index) in mainLinks"
|
|
:key="'plugin' + index"
|
|
:entry="entry"
|
|
/>
|
|
<q-separator />
|
|
<!-- Plugin functions -->
|
|
|
|
<essential-link
|
|
v-for="(entry, index) in subLinks"
|
|
:key="'childPlugin' + index"
|
|
:entry="entry"
|
|
/>
|
|
</q-list>
|
|
|
|
<div class="q-mini-drawer-hide absolute" style="top: 15px; right: -11px">
|
|
<q-btn
|
|
size="sm"
|
|
dense
|
|
round
|
|
unelevated
|
|
color="secondary"
|
|
icon="chevron_left"
|
|
@click="leftDrawerMini = true"
|
|
/>
|
|
</div>
|
|
|
|
<q-separator />
|
|
|
|
<essential-link
|
|
v-for="(entry, index) in essentials"
|
|
:key="'essential' + index"
|
|
:entry="entry"
|
|
/>
|
|
</q-drawer>
|
|
<q-page-container>
|
|
<router-view />
|
|
</q-page-container>
|
|
</q-layout>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import EssentialLink from 'src/components/navigation/EssentialLink.vue';
|
|
import ShortcutLink from 'src/components/navigation/ShortcutLink.vue';
|
|
import { Screen } from 'quasar';
|
|
import { defineComponent, ref, inject, computed } from 'vue';
|
|
import { useMainStore } from 'src/store';
|
|
import { FG_Plugin } from 'src/plugins';
|
|
import { useRouter } from 'vue-router';
|
|
|
|
const essentials: FG_Plugin.MenuLink[] = [
|
|
{
|
|
title: 'Über Flaschengeist',
|
|
link: 'about',
|
|
icon: 'mdi-information',
|
|
},
|
|
];
|
|
|
|
export default defineComponent({
|
|
name: 'MainLayout',
|
|
components: { EssentialLink, ShortcutLink },
|
|
setup() {
|
|
const router = useRouter();
|
|
const mainStore = useMainStore();
|
|
const flaschengeist = inject<FG_Plugin.Flaschengeist>('flaschengeist');
|
|
const leftDrawer = ref(false);
|
|
const shortcuts = flaschengeist?.shortcuts;
|
|
const mainLinks = flaschengeist?.menuLinks;
|
|
|
|
const leftDrawerOpen = computed({
|
|
get: () => (leftDrawer.value || Screen.gt.sm ? true : false),
|
|
set: (val: boolean) => (leftDrawer.value = val),
|
|
});
|
|
const leftDrawerMini = ref(false);
|
|
|
|
function leftDrawerClicker() {
|
|
if (leftDrawerMini.value) {
|
|
leftDrawerMini.value = false;
|
|
}
|
|
}
|
|
|
|
const subLinks = computed(() => {
|
|
const matched = router.currentRoute.value.matched[1];
|
|
return flaschengeist?.menuLinks.find((link) => matched.name == link.link)?.children;
|
|
});
|
|
|
|
function logout() {
|
|
void router.push({ name: 'login', params: { logout: 'logout' } });
|
|
void mainStore.logout();
|
|
}
|
|
|
|
return {
|
|
essentials,
|
|
leftDrawerOpen,
|
|
leftDrawerMini,
|
|
leftDrawerClicker,
|
|
logout,
|
|
mainLinks,
|
|
shortcuts,
|
|
subLinks,
|
|
};
|
|
},
|
|
});
|
|
</script>
|