From dc31ba37cad32508d984ca0cbd84ac40d47f49d8 Mon Sep 17 00:00:00 2001
From: lesion <lesion@autistici.org>
Date: Fri, 25 Nov 2022 09:21:22 +0100
Subject: [PATCH] toggle collections / searchbar visibility based on page

---
 components/Appbar.vue    |  6 +-----
 components/NavSearch.vue | 16 ++++++++++++----
 2 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/components/Appbar.vue b/components/Appbar.vue
index 8861af60..abbe6427 100644
--- a/components/Appbar.vue
+++ b/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>
\ No newline at end of file
diff --git a/components/NavSearch.vue b/components/NavSearch.vue
index 40f12d3a..240647a1 100644
--- a/components/NavSearch.vue
+++ b/components/NavSearch.vue
@@ -1,9 +1,9 @@
 <template lang="pug">
-  #navsearch.mt-2.mt-sm-4
-    v-text-field.mx-2(outlined dense hide-details :placeholder='$t("common.search")' :append-icon='mdiMagnify' @input='search' clearable :clear-icon='mdiClose')
+  #navsearch.mt-2.mt-sm-4(v-if='showCollectionsBar || showSearchBar')
+    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)