improved: logs, search & bottom nav

NUXT/components/bottomNavigation.vue

@@ -0,0 +1,43 @@
+<template>
+
+  <v-bottom-navigation v-model="tabSelection" shift class="bottomNav py-4">
+    <v-btn v-for="(item, i) in tabs" :key="i" rounded class="navButton" :to="item.link">
+
+      <span v-text="item.name" />
+      <v-icon v-text="item.icon" :color="tabSelection == i ? 'primary' : 'grey'" />
+
+    </v-btn>
+  </v-bottom-navigation>
+
+</template>
+
+
+<script>
+export default {
+  data() {
+    return {
+      tabSelection: 0,
+      tabs: [
+        { name: "Home", icon: "mdi-home", link: "/" },
+        //{ name: "Shorts", icon: "mdi-lightning-bolt", link: "/shorts" },
+        //{ name: "Upload", icon: "mdi-plus", link: "/upload" },
+        { name: "Subscriptions", icon: "mdi-youtube-subscription", link: "/subs" },
+        { name: "Library", icon: "mdi-view-list", link: "/library" },
+      ],
+    }
+  }
+}
+</script>
+
+<style scoped>
+.bottomNav {
+  position: fixed;
+  bottom: 0;
+  padding: 0 !important;
+}
+.navButton {
+  width: 25vw !important;
+  font-size: .66rem !important;
+  border-radius: 2rem !important;
+}
+</style>

NUXT/layouts/default.vue

@@ -19,23 +19,15 @@
       </v-menu>
     </v-card>
 
-    <searchOverlay v-if="search" />
 
     <div class="accent" style="height: 100%">
       <div class="background" style="height: 100%; border-radius: 1rem 1rem 0 0;">
-
-        <nuxt />
+        <searchOverlay v-if="search" />
+        <nuxt v-if="!search" />
       </div>
     </div>
 
-    <v-bottom-navigation v-model="tabSelection" shift class="bottomNav py-4">
-      <v-btn v-for="(item, i) in tabs" :key="i" rounded class="navButton" :to="item.link">
-
-        <span v-text="item.name" />
-        <v-icon v-text="item.icon" :color="tabSelection == i ? 'primary' : 'grey'" />
-
-      </v-btn>
-    </v-bottom-navigation>
+    <bottomNavigation v-if="!search" />
 
 
   </v-app>
@@ -51,20 +43,9 @@
 .toolbarAction {
   min-width: 40px !important;
 }
-
 .topNav {
   padding: 1rem;
 }
-.bottomNav {
-  position: fixed;
-  bottom: 0;
-  padding: 0 !important;
-}
-.navButton {
-  width: 25vw !important;
-  font-size: .66rem !important;
-  border-radius: 2rem !important;
-}
 .topNavSearch {
   margin-bottom: -10em;
   margin-left: 2em;
@@ -80,14 +61,6 @@
     data: () => ({
       search: false,
 
-      tabSelection: 0,
-      tabs: [
-        { name: "Home", icon: "mdi-home", link: "/" },
-        //{ name: "Shorts", icon: "mdi-lightning-bolt", link: "/shorts" },
-        //{ name: "Upload", icon: "mdi-plus", link: "/upload" },
-        { name: "Subscriptions", icon: "mdi-youtube-subscription", link: "/subs" },
-        { name: "Library", icon: "mdi-view-list", link: "/library" },
-      ],
       dropdownMenu: [
         { title: "Settings", link: "/settings" },
         { title: "About", link: "/about" },

NUXT/pages/logs.vue

@@ -3,7 +3,10 @@
 
     <v-list-item v-for="(item, index) in logs" :key="index">
       <v-card class="card">
-        <v-card-title v-text="`${item.name} - ${new Date(item.time).toLocaleString()}`" />
+        <v-card-title>
+          {{ item.name }}
+          <span v-text="`${new Date(item.time).toLocaleString()}`" class="date" />
+        </v-card-title>
         <v-card-text v-text="item.data" />
       </v-card>
     </v-list-item>
@@ -16,6 +19,11 @@
   width: 100%;
   margin-top: 1em;
 }
+.date {
+  margin-left: 0.5em;
+  font-size: 0.75em;
+  transform: translateY(5%);
+}
 </style>
 
 <script>

NUXT/plugins/youtube.js

@@ -19,6 +19,10 @@ const module = {
       method: 'GET',
       url: 'https://suggestqueries-clients6.youtube.com/complete/search',
       params: { client: 'youtube', q: text }
+    })
+    .catch((err) => {
+      logger("autoComplete", err);
+      callback(err);
     });
     logger("autoComplete", res);
     callback(res);