2021-07-31 22:45:28 +00:00
|
|
|
<template>
|
2021-11-05 02:15:23 +00:00
|
|
|
<v-navigation-drawer class="d-flex flex-column d-print-none" :value="value" clipped app width="240px">
|
2021-08-02 03:24:47 +00:00
|
|
|
<!-- User Profile -->
|
|
|
|
<template v-if="$auth.user">
|
2021-08-31 22:39:02 +00:00
|
|
|
<v-list-item two-line to="/user/profile" exact>
|
2021-08-02 03:24:47 +00:00
|
|
|
<v-list-item-avatar color="accent" class="white--text">
|
|
|
|
<v-img :src="require(`~/static/account.png`)" />
|
|
|
|
</v-list-item-avatar>
|
|
|
|
|
|
|
|
<v-list-item-content>
|
|
|
|
<v-list-item-title> {{ $auth.user.fullName }}</v-list-item-title>
|
|
|
|
<v-list-item-subtitle> {{ $auth.user.admin ? $t("user.admin") : $t("user.user") }}</v-list-item-subtitle>
|
|
|
|
</v-list-item-content>
|
|
|
|
</v-list-item>
|
|
|
|
<v-divider></v-divider>
|
|
|
|
</template>
|
2021-08-07 00:28:12 +00:00
|
|
|
|
2021-10-02 19:37:04 +00:00
|
|
|
<slot></slot>
|
|
|
|
|
2021-08-02 03:24:47 +00:00
|
|
|
<!-- Primary Links -->
|
2021-08-23 20:24:38 +00:00
|
|
|
<template v-if="topLink">
|
|
|
|
<v-list nav dense>
|
|
|
|
<template v-for="nav in topLink">
|
|
|
|
<!-- Multi Items -->
|
|
|
|
<v-list-group
|
|
|
|
v-if="nav.children && ($auth.loggedIn || !nav.restricted)"
|
|
|
|
:key="nav.title + 'multi-item'"
|
|
|
|
v-model="dropDowns[nav.title]"
|
|
|
|
color="primary"
|
|
|
|
:prepend-icon="nav.icon"
|
|
|
|
>
|
|
|
|
<template #activator>
|
|
|
|
<v-list-item-title>{{ nav.title }}</v-list-item-title>
|
|
|
|
</template>
|
|
|
|
|
2021-08-31 22:39:02 +00:00
|
|
|
<v-list-item v-for="child in nav.children" :key="child.title" exact :to="child.to">
|
2021-08-23 20:24:38 +00:00
|
|
|
<v-list-item-icon>
|
|
|
|
<v-icon>{{ child.icon }}</v-icon>
|
|
|
|
</v-list-item-icon>
|
|
|
|
<v-list-item-title>{{ child.title }}</v-list-item-title>
|
|
|
|
</v-list-item>
|
|
|
|
<v-divider class="mb-4"></v-divider>
|
|
|
|
</v-list-group>
|
|
|
|
|
|
|
|
<!-- Single Item -->
|
|
|
|
<v-list-item-group
|
|
|
|
v-else-if="$auth.loggedIn || !nav.restricted"
|
|
|
|
:key="nav.title + 'single-item'"
|
|
|
|
v-model="secondarySelected"
|
|
|
|
color="primary"
|
|
|
|
>
|
2021-08-31 22:39:02 +00:00
|
|
|
<v-list-item exact link :to="nav.to">
|
2021-08-23 20:24:38 +00:00
|
|
|
<v-list-item-icon>
|
|
|
|
<v-icon>{{ nav.icon }}</v-icon>
|
|
|
|
</v-list-item-icon>
|
|
|
|
<v-list-item-title>{{ nav.title }}</v-list-item-title>
|
|
|
|
</v-list-item>
|
|
|
|
</v-list-item-group>
|
|
|
|
</template>
|
|
|
|
</v-list>
|
|
|
|
</template>
|
2021-08-02 03:24:47 +00:00
|
|
|
|
|
|
|
<!-- Secondary Links -->
|
|
|
|
<template v-if="secondaryLinks">
|
2021-08-07 00:28:12 +00:00
|
|
|
<v-subheader v-if="secondaryHeader" class="pb-0">{{ secondaryHeader }}</v-subheader>
|
2021-08-02 03:24:47 +00:00
|
|
|
<v-divider></v-divider>
|
2021-08-31 22:39:02 +00:00
|
|
|
<v-list nav dense exact>
|
2021-08-07 00:28:12 +00:00
|
|
|
<template v-for="nav in secondaryLinks">
|
|
|
|
<!-- Multi Items -->
|
|
|
|
<v-list-group
|
|
|
|
v-if="nav.children"
|
|
|
|
:key="nav.title + 'multi-item'"
|
|
|
|
v-model="dropDowns[nav.title]"
|
|
|
|
color="primary"
|
|
|
|
:prepend-icon="nav.icon"
|
|
|
|
>
|
|
|
|
<template #activator>
|
|
|
|
<v-list-item-title>{{ nav.title }}</v-list-item-title>
|
|
|
|
</template>
|
|
|
|
|
2021-08-31 22:39:02 +00:00
|
|
|
<v-list-item v-for="child in nav.children" :key="child.title" exact :to="child.to">
|
2021-08-07 00:28:12 +00:00
|
|
|
<v-list-item-icon>
|
|
|
|
<v-icon>{{ child.icon }}</v-icon>
|
|
|
|
</v-list-item-icon>
|
|
|
|
<v-list-item-title>{{ child.title }}</v-list-item-title>
|
|
|
|
</v-list-item>
|
2021-08-23 20:24:38 +00:00
|
|
|
<v-divider class="mb-4"></v-divider>
|
2021-08-07 00:28:12 +00:00
|
|
|
</v-list-group>
|
|
|
|
|
|
|
|
<!-- Single Item -->
|
|
|
|
<v-list-item-group v-else :key="nav.title + 'single-item'" v-model="secondarySelected" color="primary">
|
2021-08-31 22:39:02 +00:00
|
|
|
<v-list-item exact link :to="nav.to">
|
2021-08-07 00:28:12 +00:00
|
|
|
<v-list-item-icon>
|
|
|
|
<v-icon>{{ nav.icon }}</v-icon>
|
|
|
|
</v-list-item-icon>
|
|
|
|
<v-list-item-title>{{ nav.title }}</v-list-item-title>
|
|
|
|
</v-list-item>
|
|
|
|
</v-list-item-group>
|
|
|
|
</template>
|
2021-08-02 03:24:47 +00:00
|
|
|
</v-list>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<!-- Bottom Navigation Links -->
|
2021-10-30 23:46:44 +00:00
|
|
|
<template v-if="bottomLinks" #append>
|
|
|
|
<v-list nav dense>
|
2021-08-02 03:24:47 +00:00
|
|
|
<v-list-item-group v-model="bottomSelected" color="primary">
|
2021-09-02 19:24:17 +00:00
|
|
|
<template v-for="nav in bottomLinks">
|
|
|
|
<v-list-item
|
|
|
|
v-if="!nav.restricted || $auth.loggedIn"
|
|
|
|
:key="nav.title"
|
|
|
|
exact
|
|
|
|
link
|
|
|
|
:to="nav.to || null"
|
|
|
|
:href="nav.href || null"
|
|
|
|
:target="nav.href ? '_blank' : null"
|
|
|
|
>
|
|
|
|
<v-list-item-icon>
|
|
|
|
<v-icon>{{ nav.icon }}</v-icon>
|
|
|
|
</v-list-item-icon>
|
|
|
|
<v-list-item-title>{{ nav.title }}</v-list-item-title>
|
|
|
|
</v-list-item>
|
|
|
|
</template>
|
2021-08-02 03:24:47 +00:00
|
|
|
</v-list-item-group>
|
2021-10-05 04:16:37 +00:00
|
|
|
<slot name="bottom"></slot>
|
2021-08-02 03:24:47 +00:00
|
|
|
</v-list>
|
|
|
|
</template>
|
|
|
|
</v-navigation-drawer>
|
2021-07-31 22:45:28 +00:00
|
|
|
</template>
|
|
|
|
|
|
|
|
<script lang="ts">
|
2021-08-02 03:24:47 +00:00
|
|
|
import { defineComponent } from "@nuxtjs/composition-api";
|
|
|
|
import { SidebarLinks } from "~/types/application-types";
|
2021-07-31 22:45:28 +00:00
|
|
|
|
|
|
|
export default defineComponent({
|
2021-08-02 03:24:47 +00:00
|
|
|
props: {
|
|
|
|
value: {
|
|
|
|
type: Boolean,
|
|
|
|
default: null,
|
|
|
|
},
|
|
|
|
user: {
|
|
|
|
type: Object,
|
|
|
|
default: null,
|
|
|
|
},
|
|
|
|
topLink: {
|
|
|
|
type: Array as () => SidebarLinks,
|
|
|
|
required: true,
|
|
|
|
},
|
|
|
|
secondaryLinks: {
|
|
|
|
type: Array as () => SidebarLinks,
|
|
|
|
required: false,
|
|
|
|
default: null,
|
|
|
|
},
|
|
|
|
bottomLinks: {
|
|
|
|
type: Array as () => SidebarLinks,
|
|
|
|
required: false,
|
|
|
|
default: null,
|
|
|
|
},
|
2021-08-07 00:28:12 +00:00
|
|
|
secondaryHeader: {
|
|
|
|
type: String,
|
|
|
|
default: null,
|
|
|
|
},
|
2021-08-02 03:24:47 +00:00
|
|
|
},
|
2021-07-31 22:45:28 +00:00
|
|
|
setup() {
|
2021-08-02 03:24:47 +00:00
|
|
|
return {};
|
|
|
|
},
|
|
|
|
data() {
|
|
|
|
return {
|
2021-08-07 00:28:12 +00:00
|
|
|
dropDowns: {},
|
2021-08-02 03:24:47 +00:00
|
|
|
topSelected: null,
|
|
|
|
secondarySelected: null,
|
|
|
|
bottomSelected: null,
|
|
|
|
};
|
|
|
|
},
|
|
|
|
});
|
2021-07-31 22:45:28 +00:00
|
|
|
</script>
|
|
|
|
|
2021-08-02 03:24:47 +00:00
|
|
|
<style>
|
|
|
|
@media print {
|
|
|
|
.no-print {
|
|
|
|
display: none;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</style>
|