Update:Abs icon font and navbar to use icons

components/home/BookshelfNavBar.vue

@@ -1,8 +1,10 @@
 <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 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 v-for="item in items" :key="item.to" :to="item.to" class="h-full flex-grow flex items-center justify-center" :class="routeName === item.routeName ? 'bg-primary' : 'text-gray-400'">
+        <p v-if="routeName === item.routeName" class="text-sm font-semibold">{{ item.text }}</p>
+        <span v-else-if="item.iconPack === 'abs-icons'" class="abs-icons" :class="`icon-${item.icon} ${item.iconClass || ''}`"></span>
+        <span v-else :class="`${item.iconPack} ${item.iconClass || ''}`">{{ item.icon }}</span>
       </nuxt-link>
     </div>
   </div>
@@ -14,17 +16,37 @@ export default {
     return {}
   },
   computed: {
+    currentLibrary() {
+      return this.$store.getters['libraries/getCurrentLibrary']
+    },
+    currentLibraryIcon() {
+      return this.currentLibrary ? this.currentLibrary.icon : 'database'
+    },
     items() {
       if (this.isPodcast) {
         return [
           {
             to: '/bookshelf',
             routeName: 'bookshelf',
+            iconPack: 'abs-icons',
+            icon: 'home',
+            iconClass: 'text-xl',
             text: 'Home'
           },
+          {
+            to: '/bookshelf/latest',
+            routeName: 'bookshelf-latest',
+            iconPack: 'abs-icons',
+            icon: 'list',
+            iconClass: 'text-xl',
+            text: 'Latest'
+          },
           {
             to: '/bookshelf/library',
             routeName: 'bookshelf-library',
+            iconPack: 'abs-icons',
+            icon: this.currentLibraryIcon,
+            iconClass: 'text-lg',
             text: 'Library'
           }
         ]
@@ -33,22 +55,49 @@ export default {
         {
           to: '/bookshelf',
           routeName: 'bookshelf',
+          iconPack: 'abs-icons',
+          icon: 'home',
+          iconClass: 'text-xl',
           text: 'Home'
         },
         {
           to: '/bookshelf/library',
           routeName: 'bookshelf-library',
+          iconPack: 'abs-icons',
+          icon: this.currentLibraryIcon,
+          iconClass: 'text-lg',
           text: 'Library'
         },
         {
           to: '/bookshelf/series',
           routeName: 'bookshelf-series',
+          iconPack: 'abs-icons',
+          icon: 'columns',
+          iconClass: 'text-lg pt-px',
           text: 'Series'
         },
         {
           to: '/bookshelf/collections',
           routeName: 'bookshelf-collections',
+          iconPack: 'material-icons-outlined',
+          icon: 'collections_bookmark',
+          iconClass: 'text-xl',
           text: 'Collections'
+        },
+        {
+          to: '/bookshelf/authors',
+          routeName: 'bookshelf-authors',
+          iconPack: 'abs-icons',
+          icon: 'authors',
+          iconClass: 'text-2xl pb-px',
+          text: 'Authors'
+        },
+        {
+          to: '/bookshelf/playlists',
+          routeName: 'bookshelf-playlists',
+          iconPack: 'material-icons',
+          icon: 'queue_music',
+          text: 'Playlists'
         }
       ]
     },
@@ -62,7 +111,9 @@ export default {
       return this.$store.getters['libraries/getCurrentLibraryMediaType']
     }
   },
-  methods: {},
+  methods: {
+    isSelected(item) {}
+  },
   mounted() {}
 }
 </script>