178 lines
4.1 KiB
Vue
178 lines
4.1 KiB
Vue
<template>
|
|
<q-layout view="hHh lpr lFf">
|
|
<q-header elevated class="bg-primary text-white">
|
|
<q-toolbar>
|
|
<!-- Button um Navigationsleiset ein und auszublenden. Nötig bei Desktop? -->
|
|
<q-btn
|
|
dense
|
|
flat
|
|
round
|
|
icon="menu"
|
|
@click="leftDrawerOpen = !leftDrawerOpen"
|
|
v-if="!leftDrawerOpen"
|
|
/>
|
|
|
|
<q-toolbar-title>
|
|
<q-avatar>
|
|
<img src="logo.svg" />
|
|
</q-avatar>
|
|
<span class="gt-xs">
|
|
Flaschengeist
|
|
</span>
|
|
</q-toolbar-title>
|
|
|
|
<!-- Hier kommen die Shortlinks hin -->
|
|
<div>
|
|
<q-btn flat round dense icon="sim_card" />
|
|
<q-btn flat round dense icon="gamepad" />
|
|
</div>
|
|
<q-btn
|
|
flat
|
|
round
|
|
dense
|
|
icon="mdi-exit-to-app"
|
|
@click="$router.push({ name: 'login' })"
|
|
/>
|
|
</q-toolbar>
|
|
</q-header>
|
|
|
|
<q-drawer
|
|
show-if-above
|
|
v-model="leftDrawerOpen"
|
|
side="left"
|
|
bordered
|
|
:mini="leftDrawerMini"
|
|
@click.capture="leftDrawerClicker"
|
|
>
|
|
<!-- Plugins -->
|
|
<q-list>
|
|
<essential-link
|
|
v-for="(link, index) in $flaschengeistPluginsMainLinks"
|
|
:key="'plugin' + index"
|
|
:title="link.title"
|
|
:link="link.link"
|
|
:icon="link.icon"
|
|
/>
|
|
</q-list>
|
|
<q-separator />
|
|
|
|
<!-- Plugin functions -->
|
|
<!-- <router-view name="plugin-nav" /> -->
|
|
<q-list>
|
|
<essential-link
|
|
v-for="(link, index) in pluginChildLinks"
|
|
:key="'childPlugin' + index"
|
|
:title="link.title"
|
|
:link="link.link"
|
|
:icon="link.icon"
|
|
/>
|
|
</q-list>
|
|
|
|
<q-btn @click="showRoute" label="test"></q-btn>
|
|
|
|
<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="(link, index) in links"
|
|
:key="'main' + index"
|
|
:title="link.title"
|
|
:link="link.link"
|
|
:icon="link.icon"
|
|
/>
|
|
</q-drawer>
|
|
|
|
<q-page-container>
|
|
<router-view />
|
|
</q-page-container>
|
|
</q-layout>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import EssentialLink from 'components/navigation/EssentialLink.vue';
|
|
import { Screen } from 'quasar';
|
|
import { PluginMainLink } from 'boot/plugins';
|
|
import { defineComponent, ref, computed } from '@vue/composition-api';
|
|
|
|
const links = [
|
|
{
|
|
name: 'about',
|
|
title: 'Über Flaschengeist',
|
|
link: 'about',
|
|
icon: 'mdi-information'
|
|
}
|
|
];
|
|
|
|
declare module 'vue/types/vue' {
|
|
interface Vue {
|
|
$flaschengeistPluginsMainLinks: PluginMainLink[];
|
|
}
|
|
}
|
|
|
|
export default defineComponent({
|
|
name: 'MainLayout',
|
|
components: { EssentialLink },
|
|
setup(_, ctx) {
|
|
const leftDrawer = ref(false);
|
|
|
|
const leftDrawerOpen = ref(
|
|
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 pluginChildLinks = computed(() => {
|
|
const test:
|
|
| PluginMainLink
|
|
| undefined = ctx.root.$flaschengeistPluginsMainLinks.find(
|
|
(plugin: PluginMainLink) => {
|
|
if (ctx.root.$route.matched.length > 1) {
|
|
return plugin.name == ctx.root.$route.matched[1].name;
|
|
}
|
|
}
|
|
);
|
|
console.log(test);
|
|
console.log(typeof test);
|
|
if (test == undefined) {
|
|
return [];
|
|
} else {
|
|
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
//@ts-ignore
|
|
return test.children;
|
|
}
|
|
});
|
|
|
|
function showRoute() {
|
|
console.log(ctx.root.$route);
|
|
}
|
|
|
|
return {
|
|
leftDrawerOpen,
|
|
leftDrawerMini,
|
|
leftDrawerClicker,
|
|
links,
|
|
pluginChildLinks,
|
|
showRoute
|
|
};
|
|
}
|
|
});
|
|
</script>
|