Basic Search Toggle (will work on more later)

This commit is contained in:
Kenny 2022-02-25 07:52:17 -05:00
parent 95309d5977
commit 78c55db831
4 changed files with 24 additions and 13 deletions

View File

@ -0,0 +1,8 @@
<template>
<div>
<v-text-field
label="Search"
outlined
/>
</div>
</template>

View File

@ -3,13 +3,13 @@
<v-card class="topNav rounded-0" style="display: flex;" color="accent white--text"> <v-card class="topNav rounded-0" style="display: flex;" color="accent white--text">
<h2 v-text="page" /> <h2 v-text="page" />
<v-spacer /> <v-spacer />
<v-btn text class="toolbarAction" color="white"><v-icon>mdi-magnify</v-icon></v-btn> <v-btn text class="toolbarAction" color="white" @click="search = !search"><v-icon>mdi-magnify</v-icon></v-btn>
<v-menu offset-y content-class="mt-4"> <v-menu offset-y content-class="mt-4">
<template v-slot:activator="{ on, attrs }"> <template v-slot:activator="{ on, attrs }">
<v-btn text class="toolbarAction" v-bind="attrs" v-on="on" color="white" style="padding-right: 0 !important;"><v-icon>mdi-dots-vertical</v-icon></v-btn> <v-btn text class="toolbarAction" v-bind="attrs" v-on="on" color="white"><v-icon>mdi-dots-vertical</v-icon></v-btn>
</template> </template>
<v-list> <v-list style="min-width: 150px;">
<v-list-item v-for="(item, index) in dropdownMenu" :key="index"> <v-list-item v-for="(item, index) in dropdownMenu" :key="index">
<nuxt-link :to="item.link" style="text-decoration: none;" class="info--text">{{ item.title }}</nuxt-link> <nuxt-link :to="item.link" style="text-decoration: none;" class="info--text">{{ item.title }}</nuxt-link>
</v-list-item> </v-list-item>
@ -17,6 +17,8 @@
</v-menu> </v-menu>
</v-card> </v-card>
<searchOverlay v-if="search" />
<div class="background" style="min-height: 100%"> <div class="background" style="min-height: 100%">
<nuxt /> <nuxt />
</div> </div>
@ -42,7 +44,7 @@
<style scoped> <style scoped>
.toolbarAction { .toolbarAction {
min-width: 50px !important; min-width: 40px !important;
} }
.topNav { .topNav {
@ -66,8 +68,12 @@
</style> </style>
<script> <script>
import search from '../pages/search.vue';
export default { export default {
components: { search },
data: () => ({ data: () => ({
search: false,
tabSelection: 0, tabSelection: 0,
tabs: [ tabs: [
{ name: "Home", icon: "mdi-home", link: "/" }, { name: "Home", icon: "mdi-home", link: "/" },
@ -82,7 +88,7 @@
] ]
}), }),
mounted() { mounted() {
}, },
computed: { computed: {
page: function () { page: function () {

View File

@ -4,7 +4,9 @@ export default {
//--- Bettertube Stuff ---// //--- Bettertube Stuff ---//
target: 'static', target: 'static',
buildDir: '../dist', build: {
buildDir: '../dist'
},
plugins: [ plugins: [
{ src: "~/plugins/youtubei", mode: "client" } { src: "~/plugins/youtubei", mode: "client" }
], ],
@ -61,9 +63,5 @@ export default {
} }
} }
} }
},
build: {
buildDir: '../dist'
} }
} }

View File

@ -4,8 +4,7 @@
"private": true, "private": true,
"scripts": { "scripts": {
"dev": "nuxt", "dev": "nuxt",
"build": "nuxt build", "build": "nuxt generate",
"start": "nuxt start",
"generate": "nuxt generate" "generate": "nuxt generate"
}, },
"dependencies": { "dependencies": {