cygnal/src/App.vue

80 lines
1.9 KiB
Vue
Raw Normal View History

2018-06-25 18:29:57 +02:00
<template>
<v-app>
<v-toolbar
app
>
<router-link :to="{ name: 'Map' }" class="noLinkDecoration">
<v-toolbar-title v-text="title" class="ma-0"></v-toolbar-title>
</router-link>
<v-spacer></v-spacer>
<v-menu offset-y class="menu">
<v-btn slot="activator" icon>
<v-icon>more_vert</v-icon>
</v-btn>
<v-list>
<v-list-tile @click="goToMap">
<v-list-tile-title>{{ $t("menu.Map") }}</v-list-tile-title>
</v-list-tile>
<v-list-tile @click="goToAbout">
<v-list-tile-title>{{ $t("menu.About") }}</v-list-tile-title>
</v-list-tile>
<v-list-tile @click="goToSettings">
<v-list-tile-title>{{ $t("menu.Settings") }}</v-list-tile-title>
2018-06-25 18:29:57 +02:00
</v-list-tile>
</v-list>
</v-menu>
</v-toolbar>
<v-content>
<router-view/>
</v-content>
</v-app>
</template>
<script>
export default {
data() {
return {
title: 'Cycl\'Assist',
};
},
name: 'App',
methods: {
goToAbout() {
this.$router.push({ name: 'About' });
},
goToMap() {
this.$router.push({ name: 'Map' });
},
goToSettings() {
this.$router.push({ name: 'Settings' });
},
2018-06-25 18:29:57 +02:00
},
};
</script>
<style scoped>
.menu {
z-index: 2000 !important;
}
.noLinkDecoration {
color: rgba(0, 0, 0, .87);
text-decoration: none;
}
</style>
2018-06-27 11:21:29 +02:00
<style>
body, html, .application {
height: 100%;
}
.application--wrap {
min-height: 100% !important;
}
2018-06-27 11:21:29 +02:00
.bottom-sheet.dialog {
webkit-transition: .1s cubic-bezier(.25, .8, .5, 1);
transition: .1s cubic-bezier(.25, .8, .5, 1);
}
</style>