UI updates

components/home/BookshelfNavBar.vue

@@ -1,17 +1,8 @@
 <template>
   <div class="w-full h-9 bg-bg relative">
     <div id="bookshelf-navbar" class="absolute z-10 top-0 left-0 w-full h-full flex bg-secondary text-gray-200">
-      <nuxt-link to="/bookshelf" class="w-1/4 h-full flex items-center justify-center" :class="routeName === 'bookshelf' ? 'bg-primary' : 'text-gray-400'">
-        <p>Home</p>
-      </nuxt-link>
-      <nuxt-link to="/bookshelf/library" class="w-1/4 h-full flex items-center justify-center" :class="routeName === 'bookshelf-library' ? 'bg-primary' : 'text-gray-400'">
-        <p>Library</p>
-      </nuxt-link>
-      <nuxt-link to="/bookshelf/series" class="w-1/4 h-full flex items-center justify-center" :class="routeName === 'bookshelf-series' ? 'bg-primary' : 'text-gray-400'">
-        <p>Series</p>
-      </nuxt-link>
-      <nuxt-link to="/bookshelf/collections" class="w-1/4 h-full flex items-center justify-center" :class="routeName === 'bookshelf-collections' ? 'bg-primary' : 'text-gray-400'">
-        <p>Collections</p>
+      <nuxt-link v-for="item in items" :key="item.to" :to="item.to" class="h-full flex items-center justify-center" :style="{ width: isPodcast ? '50%' : '25%' }" :class="routeName === item.routeName ? 'bg-primary' : 'text-gray-400'">
+        <p>{{ item.text }}</p>
       </nuxt-link>
     </div>
   </div>
@@ -23,8 +14,52 @@ export default {
     return {}
   },
   computed: {
+    items() {
+      if (this.isPodcast) {
+        return [
+          {
+            to: '/bookshelf',
+            routeName: 'bookshelf',
+            text: 'Home'
+          },
+          {
+            to: '/bookshelf/library',
+            routeName: 'bookshelf-library',
+            text: 'Library'
+          }
+        ]
+      }
+      return [
+        {
+          to: '/bookshelf',
+          routeName: 'bookshelf',
+          text: 'Home'
+        },
+        {
+          to: '/bookshelf/library',
+          routeName: 'bookshelf-library',
+          text: 'Library'
+        },
+        {
+          to: '/bookshelf/series',
+          routeName: 'bookshelf-series',
+          text: 'Series'
+        },
+        {
+          to: '/bookshelf/collections',
+          routeName: 'bookshelf-collections',
+          text: 'Collections'
+        }
+      ]
+    },
     routeName() {
       return this.$route.name
+    },
+    isPodcast() {
+      return this.libraryMediaType == 'podcast'
+    },
+    libraryMediaType() {
+      return this.$store.getters['libraries/getCurrentLibraryMediaType']
     }
   },
   methods: {},

components/home/BookshelfToolbar.vue

@@ -8,8 +8,8 @@
         <p v-show="!selectedSeriesName" class="font-book pt-1">{{ totalEntities }} {{ entityTitle }}</p>
         <p v-show="selectedSeriesName" class="ml-2 font-book pt-1">{{ selectedSeriesName }} ({{ totalEntities }})</p>
         <div class="flex-grow" />
+        <span v-if="page == 'library' || seriesBookPage" class="material-icons px-2" @click="bookshelfListView = !bookshelfListView">{{ bookshelfListView ? 'view_list' : 'grid_view' }}</span>
         <template v-if="page === 'library'">
-          <span class="material-icons px-2" @click="bookshelfListView = !bookshelfListView">{{ bookshelfListView ? 'view_list' : 'grid_view' }}</span>
           <div class="relative flex items-center px-2">
             <span class="material-icons" @click="showFilterModal = true">filter_alt</span>
             <div v-show="hasFilters" class="absolute top-0 right-2 w-2 h-2 rounded-full bg-success border border-green-300 shadow-sm z-10 pointer-events-none" />
@@ -51,6 +51,9 @@ export default {
       var routeName = this.$route.name || ''
       return routeName.split('-')[1]
     },
+    seriesBookPage() {
+      return this.$route.name == 'bookshelf-series-id'
+    },
     routeQuery() {
       return this.$route.query || {}
     },