toggle collections / searchbar visibility based on page

components/Appbar.vue

@@ -9,7 +9,7 @@
       <div class='text-body-1 font-weight-light' v-text='settings.description' />
     </div>
 
-    <NavSearch :class='{ hide: $route.name !== "index" }'/>
+    <NavSearch />
 
     <NavBar />
 
@@ -47,8 +47,4 @@ nav {
   text-decoration: none;
 }
 
-.hide {
-  max-height: 0px !important;
-  visibility: hidden;
-}
 </style>

components/NavSearch.vue

@@ -1,9 +1,9 @@
 <template lang="pug">
-  #navsearch.mt-2.mt-sm-4
+  #navsearch.mt-2.mt-sm-4(v-if='showCollectionsBar || showSearchBar')
-    v-text-field.mx-2(outlined dense hide-details :placeholder='$t("common.search")' :append-icon='mdiMagnify' @input='search' clearable :clear-icon='mdiClose')
+    v-text-field.mx-2(v-if='showSearchBar' outlined dense hide-details :placeholder='$t("common.search")' :append-icon='mdiMagnify' @input='search' clearable :clear-icon='mdiClose')
       template(v-slot:prepend-inner)
         Calendar(v-if='!settings.hide_calendar')
-    v-btn.ml-2.mt-2.gap-2(small outlined v-for='collection in collections' color='primary' :key='collection.id' :to='`/collection/${encodeURIComponent(collection.name)}`') {{collection.name}}
+    v-btn.ml-2.mt-2.gap-2(v-if='showCollectionsBar' small outlined v-for='collection in collections' color='primary' :key='collection.id' :to='`/collection/${encodeURIComponent(collection.name)}`') {{collection.name}}
 </template>
 <script>
 import { mapState } from 'vuex'
@@ -19,7 +19,15 @@ export default {
     this.collections = await this.$axios.$get('collections').catch(_e => [])
   },
   components: { Calendar },
-  computed: mapState(['settings']),
+  computed: {
+    showSearchBar () {
+      return this.$route.name === 'index'
+    },
+    showCollectionsBar () {
+      return ['index', 'collection-collection'].includes(this.$route.name)
+    },
+    ...mapState(['settings'])
+  },
   methods: {
     search (ev) {
       this.$root.$emit('search', ev)