2022-01-24 22:56:57 +00:00
|
|
|
<template>
|
2022-02-24 19:45:36 +00:00
|
|
|
<v-app>
|
2022-01-24 23:16:53 +00:00
|
|
|
|
2022-02-24 19:45:36 +00:00
|
|
|
<v-card class="topNav rounded-0" style="display: flex;" color="accent">
|
2022-02-24 19:55:29 +00:00
|
|
|
<h2 v-text="page" />
|
2022-01-25 02:45:23 +00:00
|
|
|
<v-spacer />
|
2022-02-24 19:45:36 +00:00
|
|
|
<v-btn text><v-icon>mdi-magnify</v-icon></v-btn>
|
|
|
|
<v-btn text><v-icon>mdi-dots-vertical</v-icon></v-btn>
|
2022-01-24 23:16:53 +00:00
|
|
|
</v-card>
|
|
|
|
|
|
|
|
|
2022-02-24 19:45:36 +00:00
|
|
|
<div>
|
2022-01-24 22:56:57 +00:00
|
|
|
<nuxt />
|
2022-02-24 19:45:36 +00:00
|
|
|
</div>
|
2022-01-24 22:56:57 +00:00
|
|
|
|
2022-01-25 02:45:23 +00:00
|
|
|
<v-bottom-navigation v-model="tabSelection" class="bottomNav rounded-0">
|
2022-02-24 19:45:36 +00:00
|
|
|
<v-btn v-for="(item, i) in tabs" :key="i" class="navButton" :to="item.link">
|
|
|
|
|
2022-01-24 22:56:57 +00:00
|
|
|
<span v-text="item.name" />
|
2022-02-24 19:45:36 +00:00
|
|
|
<v-icon v-text="item.icon" :color="tabSelection == i ? 'primary' : 'grey'" />
|
2022-01-24 22:56:57 +00:00
|
|
|
|
|
|
|
</v-btn>
|
|
|
|
</v-bottom-navigation>
|
|
|
|
|
|
|
|
|
|
|
|
</v-app>
|
|
|
|
</template>
|
|
|
|
|
2022-02-24 19:45:36 +00:00
|
|
|
<style>
|
|
|
|
* {
|
|
|
|
font-family: Arial, Helvetica, sans-serif !important;
|
|
|
|
}
|
|
|
|
</style>
|
|
|
|
|
2022-01-24 23:16:53 +00:00
|
|
|
<style scoped>
|
|
|
|
.topNav {
|
|
|
|
padding: 1em;
|
|
|
|
}
|
|
|
|
.bottomNav {
|
|
|
|
position: absolute;
|
|
|
|
bottom: 0;
|
|
|
|
}
|
2022-01-25 02:19:18 +00:00
|
|
|
.navButton {
|
|
|
|
width: 20vw !important;
|
|
|
|
}
|
2022-01-25 02:45:23 +00:00
|
|
|
.topNavSearch {
|
2022-01-25 03:10:51 +00:00
|
|
|
margin-bottom: -10em;
|
2022-01-25 02:45:23 +00:00
|
|
|
margin-left: 2em;
|
2022-01-25 03:10:51 +00:00
|
|
|
transform: translateY(-2.5%);
|
|
|
|
border-radius: 5px;
|
|
|
|
border-bottom-left-radius: 5px !important;
|
|
|
|
border-bottom-right-radius: 5px !important;
|
2022-01-25 02:45:23 +00:00
|
|
|
}
|
2022-01-24 23:16:53 +00:00
|
|
|
</style>
|
|
|
|
|
2022-01-24 22:56:57 +00:00
|
|
|
<script>
|
|
|
|
export default {
|
|
|
|
data: () => ({
|
2022-02-24 19:55:29 +00:00
|
|
|
page: null,
|
|
|
|
|
2022-01-25 02:45:23 +00:00
|
|
|
tabSelection: 0,
|
2022-01-24 22:56:57 +00:00
|
|
|
tabs: [
|
2022-01-25 03:10:51 +00:00
|
|
|
{ name: "Home", icon: "mdi-home", link: "/" },
|
2022-02-24 19:45:36 +00:00
|
|
|
//{ name: "Shorts", icon: "mdi-lightning-bolt", link: "/shorts" },
|
|
|
|
//{ name: "Upload", icon: "mdi-plus", link: "/upload" },
|
2022-01-25 03:10:51 +00:00
|
|
|
{ name: "Subscriptions", icon: "mdi-youtube-subscription", link: "/subs" },
|
|
|
|
{ name: "Library", icon: "mdi-view-list", link: "/library" },
|
2022-01-24 22:56:57 +00:00
|
|
|
]
|
|
|
|
}),
|
2022-02-24 19:55:29 +00:00
|
|
|
mounted() {
|
|
|
|
const pageName = this.$route.path.split("/")[1];
|
|
|
|
this.page = pageName.charAt(0).toUpperCase() + pageName.slice(1);
|
|
|
|
}
|
2022-01-24 22:56:57 +00:00
|
|
|
}
|
|
|
|
</script>
|