80 lines
1.8 KiB
Vue
80 lines
1.8 KiB
Vue
<template>
|
|
<v-app>
|
|
<v-navigation-drawer
|
|
v-model="primaryDrawer.model"
|
|
:clipped="false"
|
|
:floating="false"
|
|
:mini-variant="false"
|
|
app
|
|
:expand-on-hover="true"
|
|
overflow
|
|
color="#070042"
|
|
>
|
|
<v-list>
|
|
<v-list-item
|
|
v-for="item in primaryDrawer.items"
|
|
:key="item.title"
|
|
link
|
|
:to="item.link"
|
|
>
|
|
<v-list-item-icon>
|
|
<v-icon >{{ item.icon }}</v-icon>
|
|
</v-list-item-icon>
|
|
|
|
<v-list-item-content >
|
|
<v-list-item-title>{{ item.title }}</v-list-item-title>
|
|
</v-list-item-content>
|
|
</v-list-item>
|
|
</v-list>
|
|
</v-navigation-drawer>
|
|
|
|
<v-app-bar :clipped-left="false" app color="#070042" >
|
|
<v-app-bar-nav-icon
|
|
@click.stop="primaryDrawer.model = !primaryDrawer.model"
|
|
></v-app-bar-nav-icon>
|
|
<v-toolbar-title >Onmyoji Deck Builder</v-toolbar-title>
|
|
</v-app-bar>
|
|
|
|
<v-main>
|
|
<router-view></router-view>
|
|
</v-main>
|
|
|
|
<v-footer :inset="false" color="#04002E" app>
|
|
<!-- <span class="px-4"
|
|
>© {{ new Date().getFullYear() }} Daniel Tomlinson</span
|
|
>
|
|
<v-spacer /> -->
|
|
<span class="px-2">
|
|
<v-icon>{{ icons.mdiGithub }}</v-icon> View on GitHub
|
|
</span>
|
|
</v-footer>
|
|
</v-app>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
mdiViewDashboard,
|
|
mdiCalculator,
|
|
mdiHelpBox,
|
|
mdiGithub,
|
|
} from "@mdi/js";
|
|
|
|
export default {
|
|
name: "App",
|
|
|
|
data: () => ({
|
|
primaryDrawer: {
|
|
model: true,
|
|
items: [
|
|
{ title: "Home", icon: mdiViewDashboard, link: "/" },
|
|
{ title: "Deck Builder", icon: mdiCalculator, link: "deck-builder" },
|
|
{ title: "Help", icon: mdiHelpBox, link: "help" },
|
|
],
|
|
},
|
|
icons: {
|
|
mdiGithub: mdiGithub,
|
|
},
|
|
}),
|
|
};
|
|
</script>
|