top navbar in a separate component for convenience, searchbar UI improvements

NUXT/.gitignore

@@ -1,3 +1,5 @@
+#IDEs
+.vscode
 # Logs
 logs
 *.log

NUXT/components/bottomNavigation.vue

@@ -1,32 +1,47 @@
 <template>
-
   <v-bottom-navigation v-model="tabSelection" shift class="bottomNav py-4 accent2">
-    <v-btn v-for="(item, i) in tabs" :key="i" class="navButton" :to="item.link" plain v-ripple="false">
+    <v-btn
-
+      v-for="(item, i) in tabs"
+      :key="i"
+      class="navButton"
+      :to="item.link"
+      plain
+      v-ripple="false"
+    >
       <span v-text="item.name" />
-      <v-icon v-text="item.icon" :color="tabSelection == i ? 'primary' : 'grey'" :class="tabSelection == i ? 'tab primaryAlt' : ''" />
+      <v-icon
-
+        v-text="item.icon"
+        :color="tabSelection == i ? 'primary' : 'grey'"
+        :class="tabSelection == i ? 'tab primaryAlt' : ''"
+      />
     </v-btn>
+    <!-- <v-btn text class="navButton mr-2 fill-height" color="white" @click="searchBtn()"
+      ><v-icon>mdi-magnify</v-icon></v-btn
+    > -->
   </v-bottom-navigation>
-
 </template>
 
-
 <script>
 export default {
   data() {
     return {
       tabSelection: 0,
       tabs: [
+        // TODO: pull from Vuex & localStorage for customizations
         { name: "Home", icon: "mdi-home", link: "/home" },
         //{ name: "Shorts", icon: "mdi-lightning-bolt", link: "/shorts" },
         //{ name: "Upload", icon: "mdi-plus", link: "/upload" },
-        { name: "Subscriptions", icon: "mdi-youtube-subscription", link: "/subscriptions" },
+        {
+          name: "Subscriptions",
+          icon: "mdi-youtube-subscription",
+          link: "/subscriptions",
+        },
         { name: "Library", icon: "mdi-view-list", link: "/library" },
+        // { name: "Settings", icon: "mdi-menu", link: "/settings" },
       ],
-    }
+    };
-  }
+  },
-}
+};
 </script>
 
 <style scoped>
@@ -39,9 +54,7 @@ export default {
   z-index: 99999;
 }
 .navButton {
-  width: 25vw !important;
+  font-size: 0.66rem !important;
-  font-size: .66rem !important;
-  /*border-radius: 2rem !important;*/
 }
 .tab {
   padding: 0.1em 0.5em 0.1em 0.5em;

NUXT/components/topNavigation.vue

@@ -0,0 +1,86 @@
+<template>
+  <v-card
+    style="height: 4rem !important; display: flex; box-shadow: none !important"
+    color="accent white--text"
+    class="topNav rounded-0 py-3 px-2"
+  >
+    <h3 class="my-auto ml-4" v-text="page" v-show="!search" />
+
+    <v-btn
+      icon
+      v-if="search"
+      color="white"
+      class="mr-2 my-auto"
+      @click="$emit('close-search')"
+    >
+      <v-icon>mdi-close</v-icon>
+    </v-btn>
+
+    <v-text-field
+      solo
+      dense
+      flat
+      label="Search"
+      v-model="text"
+      @input="$emit('text-changed', text)"
+      class="searchBar"
+      color="white"
+      v-if="search"
+      v-on:keyup.enter="$emit('search-btn', text)"
+    />
+
+    <v-spacer v-if="!search" />
+
+    <v-btn
+      icon
+      tile
+      class="ml-2 my-auto fill-height"
+      style="border-radius: 0.25rem !important"
+      color="white"
+      @click="$emit('search-btn', text)"
+      ><v-icon>mdi-magnify</v-icon></v-btn
+    >
+    <v-btn
+      icon
+      tile
+      class="ml-4 mr-2 my-auto fill-height"
+      style="border-radius: 0.25rem !important"
+      color="white"
+      v-show="!search"
+      to="/settings"
+      ><v-icon>mdi-dots-vertical</v-icon></v-btn
+    >
+  </v-card>
+</template>
+
+<script>
+export default {
+  props: ["search", "page"],
+  events: ["searchBtn", "textChanged", "closeSearch"],
+  data: () => ({
+    text: "",
+  }),
+};
+</script>
+
+<style scoped>
+.topNav {
+  position: fixed;
+  width: 100%;
+  top: 0;
+  z-index: 999;
+  /*border-radius: 0 0 1em 1em !important;*/
+}
+.topNavSearch {
+  margin-bottom: -10em;
+  margin-left: 2em;
+  /*transform: translateY(-2.5%);*/
+}
+.searchBar {
+  margin: 0;
+}
+.searchButton {
+  width: 100%;
+  justify-content: left !important;
+}
+</style>

NUXT/layouts/default.vue

@@ -1,41 +1,13 @@
 <template>
   <v-app v-show="stateLoaded" style="background: black !important">
-    <v-card
+    <topNavigation
-      style="height: 4rem !important; display: flex; box-shadow: none !important"
+      @close-search="search = !search"
-      color="accent white--text"
+      @search-btn="searchBtn"
-      class="topNav rounded-0"
+      @text-changed="textChanged"
-    >
+      :search="search"
-      <h2 v-text="page" v-show="!search" />
+      :page="page"
-
-      <v-text-field
-        label="Search"
-        v-model="text"
-        @input="textChanged"
-        class="searchBar"
-        color="white"
-        v-if="search"
-        v-on:keyup.enter="searchBtn"
     />
 
-      <v-spacer />
-
-      <v-btn
-        text
-        class="toolbarAction mr-2 fill-height"
-        color="white"
-        @click="searchBtn()"
-        ><v-icon>mdi-magnify</v-icon></v-btn
-      >
-      <v-btn
-        text
-        class="toolbarAction fill-height"
-        color="white"
-        v-show="!search"
-        to="/settings"
-        ><v-icon>mdi-dots-vertical</v-icon></v-btn
-      >
-    </v-card>
-
     <div
       style="
         height: 100%;
@@ -44,6 +16,7 @@
       "
     >
       <div
+        v-show="!search"
         class="background"
         style="
           padding: 0;
@@ -60,6 +33,21 @@
         <!-- scrollbox below must be a standalone div -->
         <div class="scroll-y" style="height: 100%">
           <nuxt v-show="!search" />
+        </div>
+      </div>
+
+      <div
+        v-show="search"
+        class="background"
+        style="
+          padding: 0;
+          overflow: hidden;
+          height: calc(100vh - 4rem);
+          transition-duration: 0.3s;
+          transition-property: border-radius;
+        "
+      >
+        <div class="scroll-y" style="height: 100%">
           <div style="min-width: 180px" v-if="search">
             <v-list-item v-for="(item, index) in response" :key="index">
               <v-btn
@@ -107,35 +95,9 @@ div {
 </style>
 
 <style scoped>
-.toolbarAction {
-  min-width: 40px !important;
-}
-.topNav {
-  padding: 1rem;
-  position: fixed;
-  width: 100%;
-  top: 0;
-  z-index: 999;
-  /*border-radius: 0 0 1em 1em !important;*/
-}
-.topNavSearch {
-  margin-bottom: -10em;
-  margin-left: 2em;
-  /*transform: translateY(-2.5%);*/
-}
 .background {
   height: 100%;
-  padding: 4em 0 4em 0; /* Account for Top/Bottom Novigation */
+  padding: 4em 0 4em 0; /* Account for Top/Bottom Navigation */
-}
-.searchBar {
-  margin: 0;
-  position: absolute;
-  transform: translateY(-10%);
-  width: 75%;
-}
-.searchButton {
-  width: 100%;
-  justify-content: left !important;
 }
 </style>
 
@@ -145,17 +107,15 @@ import { mapState } from "vuex";
 export default {
   data: () => ({
     search: false,
-
-    text: null,
     response: [],
-    stateLoaded: false
+    stateLoaded: false,
   }),
   beforeCreate() {
     // initializes UI tweaks to the saved state
     this.$store.commit("tweaks/initTweaks");
   },
   mounted() {
-    this.stateLoaded = true
+    this.stateLoaded = true;
     //---   Back Button Listener   ---//
     CapacitorApp.addListener("backButton", ({ canGoBack }) => {
       //---   Back Closes Search   ---//
@@ -183,8 +143,8 @@ export default {
   },
 
   methods: {
-    textChanged() {
+    textChanged(text) {
-      this.$youtube.autoComplete(this.text, (res) => {
+      this.$youtube.autoComplete(text, (res) => {
         const data = res.replace(/^.*?\(/, "").replace(/\)$/, ""); //Format Response
         this.response = JSON.parse(data)[1];
       });
@@ -195,8 +155,8 @@ export default {
       this.search = false;
     },
 
-    searchBtn() {
+    searchBtn(text) {
-      const query = this.text;
+      const query = text;
 
       if (this.search === true) {
         if (query) {

NUXT/pages/mods/tweaks.vue

@@ -1,8 +1,13 @@
 <template>
   <div class="py-1">
+    <v-card class="px-8 py-6 ma-4">
+      <h3>Layout</h3>
+      <v-switch class="mt-6" disabled label="Dense Navbars" />
+      <v-switch disabled label="Disable Top Bar" />
+      <!-- <v-switch class="mt-6" disabled label="Reverse (disabled)" /> -->
+    </v-card>
     <v-card class="px-8 pt-6 ma-4">
       <h3>Rounded Corners</h3>
-      <!-- // TODO: add tweaks for other components -->
       <v-switch class="mt-6" disabled label="Reverse (disabled)" />
       <v-slider
         disabled