Update:Abs icon font and navbar to use icons

assets/absicons.css

@@ -13,7 +13,6 @@
 .abs-icons {
   /* use !important to prevent issues with browser extensions that change fonts */
   font-family: 'absicons' !important;
-  speak: never;
   font-style: normal;
   font-weight: normal;
   font-variant: normal;
@@ -25,6 +24,18 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-list:before {
+  content: "\e907";
+}
+
+.icon-home:before {
+  content: "\e909";
+}
+
+.icon-authors:before {
+  content: "\e90a";
+}
+
 .icon-books-1:before {
   content: "\e905";
 }
@@ -53,6 +64,10 @@
   content: "\e901";
 }
 
+.icon-columns:before {
+  content: "\e90b";
+}
+
 .icon-headphones:before {
   content: "\e910";
 }

components/app/Appbar.vue

@@ -25,8 +25,8 @@
         <span class="material-icons text-2xl" :class="isCasting ? 'text-success' : ''" @click="castClick">cast</span>
       </div>
 
-      <nuxt-link v-if="user" class="h-7 mx-1.5" to="/search">
+      <nuxt-link v-if="user" class="h-7 mx-1.5" style="padding-top: 3px" to="/search">
-        <span class="material-icons" style="font-size: 1.75rem">search</span>
+        <span class="material-icons">search</span>
       </nuxt-link>
 
       <div class="h-7 mx-1.5">

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'">
+      <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>{{ item.text }}</p>
+        <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>

pages/bookshelf/authors.vue

@@ -0,0 +1,14 @@
+<template>
+  <div>Authors</div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {}
+  },
+  watch: {},
+  computed: {},
+  methods: {}
+}
+</script>

pages/bookshelf/latest.vue

@@ -0,0 +1,14 @@
+<template>
+  <div>Latest</div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {}
+  },
+  watch: {},
+  computed: {},
+  methods: {}
+}
+</script>

pages/bookshelf/playlists.vue

@@ -0,0 +1,14 @@
+<template>
+  <div>Playlists</div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {}
+  },
+  watch: {},
+  computed: {},
+  methods: {}
+}
+</script>

static/fonts/absicons/absicons.svg

@@ -13,12 +13,16 @@
 <glyph unicode="&#xe903;" glyph-name="radio" d="M989.6 866c25.4 7.4 40 34.2 32.6 59.6s-34.2 40-59.8 32.4l-859-251.8c-18.8-5.4-35.8-14.6-50.2-26.4-32.2-23.2-53.2-61-53.2-103.8v-512c0-70.6 57.4-128 128-128h768c70.6 0 128 57.4 128 128v512c0 70.6-57.4 128-128 128h-459l552.6 162zM736 160c-88.4 0-160 71.6-160 160s71.6 160 160 160 160-71.6 160-160-71.6-160-160-160zM160 448c0 17.6 14.4 32 32 32h192c17.6 0 32-14.4 32-32s-14.4-32-32-32h-192c-17.6 0-32 14.4-32 32zM128 320c0 17.6 14.4 32 32 32h256c17.6 0 32-14.4 32-32s-14.4-32-32-32h-256c-17.6 0-32 14.4-32 32zM160 192c0 17.6 14.4 32 32 32h192c17.6 0 32-14.4 32-32s-14.4-32-32-32h-192c-17.6 0-32 14.4-32 32z" />
 <glyph unicode="&#xe904;" glyph-name="podcast" horiz-adv-x="1043" d="M585.253 366.417v-430.408h-127.13v430.408c-41.76 22.603-70.128 66.8-70.128 117.637 0 73.822 59.863 133.685 133.693 133.685 73.822 0 133.693-59.863 133.693-133.685 0-50.837-28.369-95.033-70.128-117.637v0zM333.872 865.196c24.76 12.21 34.907 42.193 22.697 66.927-12.21 24.743-42.167 34.907-66.91 22.705-101.045-49.843-179.63-132.301-229.287-229.397-36.682-71.708-57.596-151.499-60.117-232.021-2.539-81.201 13.475-163.226 50.718-238.72 45.861-93.004 123.614-175.725 238.084-234.288 24.531-12.541 54.59-2.802 67.123 21.729 12.541 24.531 2.811 54.581-21.72 67.114-93.717 47.933-156.968 114.843-193.879 189.642-29.77 60.381-42.575 126.153-40.537 191.382 2.063 65.866 19.156 131.12 49.164 189.76 40.18 78.552 103.49 145.139 184.666 185.167v0zM753.718 954.837c-24.743 12.21-54.709 2.038-66.919-22.705s-2.055-54.726 22.705-66.927c81.184-40.036 144.494-106.615 184.657-185.175 29.999-58.631 47.1-123.886 49.155-189.76 2.038-65.229-10.767-131.002-40.528-191.382-36.911-74.799-100.162-141.709-193.879-189.642-24.531-12.541-34.253-42.592-21.72-67.114 12.533-24.531 42.592-34.262 67.123-21.729 114.461 58.555 192.223 141.284 238.084 234.288 37.242 75.495 53.257 157.52 50.718 238.72-2.522 80.522-23.436 160.313-60.109 232.021-49.665 97.096-128.242 179.554-229.287 229.406v0zM702.992 734.942c-18.638 13.425-44.63 9.187-58.054-9.451-13.416-18.638-9.187-44.63 9.451-58.054 7.515-5.409 14.885-11.48 22.111-18.12 42.21-38.915 67.241-90.804 72.498-145.708 5.315-55.396-9.434-114.096-46.854-166.019-6.351-8.822-13.671-17.764-21.95-26.747-15.581-16.914-14.503-43.288 2.437-58.861 16.931-15.573 43.296-14.477 58.869 2.437 10.020 10.86 19.411 22.425 28.148 34.576 49.775 69.11 69.339 147.746 62.172 222.443-7.201 75.172-41.36 146.116-98.905 199.177-9.052 8.347-19.029 16.464-29.923 24.327v0zM388.98 667.412c18.638 13.425 22.875 39.416 9.451 58.054s-39.416 22.875-58.054 9.459c-10.903-7.863-20.871-15.98-29.923-24.319-57.553-53.070-91.713-124.005-98.914-199.177-7.167-74.688 12.397-153.35 62.181-222.46 8.754-12.142 18.137-23.699 28.148-34.559 15.573-16.914 41.938-18.010 58.861-2.437 16.948 15.573 18.027 41.938 2.445 58.861-8.279 8.992-15.598 17.925-21.95 26.747-37.412 51.923-52.17 110.614-46.854 166.011 5.256 54.895 30.288 106.793 72.498 145.708 7.234 6.632 14.605 12.703 22.111 18.112v0z" />
 <glyph unicode="&#xe905;" glyph-name="books-1" d="M384 832v-640h128v640h-128zM512 746.667l170.667-554.667 128 42.667-170.667 554.667-128-42.667zM213.333 746.667v-554.667h128v554.667h-128zM128 149.333v-85.333h768v85.333h-768z" />
-<glyph unicode="&#xe906;" glyph-name="database-2" horiz-adv-x="876" d="M437.75 960c240.583 0 435.583-91.333 435.583-203.833 0-112.583-195.083-203.833-435.583-203.833s-435.583 91.333-435.583 203.833c0 112.5 195.083 203.833 435.583 203.833v0zM2.167 278.083v-156.5c77.5-275.25 843.167-222.083 871.25 14.083v156.333c-38.25-259.25-810-277.917-871.25-13.917v0 0zM0 685.5v-152.833c77.5-268.833 847.417-232.5 875.583-1.917v152.75c-38.333-253.25-814.333-255.833-875.583 2v0zM0 488v-156.5c77.5-275.25 847.417-238.083 875.583-1.917v156.333c-38.333-259.25-814.333-261.917-875.583 2.083v0z" />
+<glyph unicode="&#xe906;" glyph-name="database" horiz-adv-x="876" d="M437.75 960c240.583 0 435.583-91.333 435.583-203.833 0-112.583-195.083-203.833-435.583-203.833s-435.583 91.333-435.583 203.833c0 112.5 195.083 203.833 435.583 203.833v0zM2.167 278.083v-156.5c77.5-275.25 843.167-222.083 871.25 14.083v156.333c-38.25-259.25-810-277.917-871.25-13.917v0 0zM0 685.5v-152.833c77.5-268.833 847.417-232.5 875.583-1.917v152.75c-38.333-253.25-814.333-255.833-875.583 2v0zM0 488v-156.5c77.5-275.25 847.417-238.083 875.583-1.917v156.333c-38.333-259.25-814.333-261.917-875.583 2.083v0z" />
+<glyph unicode="&#xe907;" glyph-name="list" d="M384 724.667h512v-170h-512v170zM384 128.667v170h512v-170h-512zM384 340.667v172h512v-172h-512zM170 554.667v170h172v-170h-172zM170 128.667v170h172v-170h-172zM170 340.667v172h172v-172h-172z" />
+<glyph unicode="&#xe909;" glyph-name="home" d="M949.845 492.032c-144.64 121.771-407.296 348.629-409.899 350.933l-27.947 24.021-27.819-24.021c-2.645-2.261-265.429-229.035-412.16-351.915-18.688-16.811-29.355-40.32-29.355-64.384 0-47.104 38.229-85.333 85.333-85.333h42.667v-256c0-47.104 38.229-85.333 85.333-85.333h512c47.104 0 85.333 38.229 85.333 85.333v256h42.667c47.104 0 85.333 38.229 85.333 85.333 0 25.515-11.733 49.536-31.488 65.365zM597.333 85.334h-170.667v213.333h170.667v-213.333zM768 426.667l0.085-341.333c-0.085 0-128.085 0-128.085 0v256h-256v-256h-128v341.333h-128.043c117.973 98.645 312.107 265.685 384.043 327.68 71.936-61.995 265.984-228.992 384-327.723 0 0-128 0-128 0.043z" />
+<glyph unicode="&#xe90a;" glyph-name="authors" d="M512 725.333c82.475 0 149.333-66.859 149.333-149.333v0c0-82.475-66.859-149.333-149.333-149.333v0c-82.475 0-149.333 66.859-149.333 149.333v0c0 82.475 66.859 149.333 149.333 149.333v0zM213.333 618.667c23.893 0 46.080-6.4 65.28-17.92-6.4-61.013 11.52-121.6 48.213-168.96-21.333-40.96-64-69.12-113.493-69.12-70.692 0-128 57.308-128 128v0c0 70.692 57.308 128 128 128v0zM810.667 618.667c70.692 0 128-57.308 128-128v0c0-70.692-57.308-128-128-128v0c-49.493 0-92.16 28.16-113.493 69.12 36.693 47.36 54.613 107.947 48.213 168.96 19.2 11.52 41.387 17.92 65.28 17.92zM234.667 181.333c0 88.32 124.16 160 277.333 160s277.333-71.68 277.333-160v-74.667h-554.667v74.667zM0 106.667v64c0 59.307 80.64 109.227 189.867 123.733-25.173-29.013-40.533-69.12-40.533-113.067v-74.667h-149.333zM1024 106.667h-149.333v74.667c0 43.947-15.36 84.053-40.533 113.067 109.227-14.507 189.867-64.427 189.867-123.733v-64z" />
+<glyph unicode="&#xe90b;" glyph-name="columns" d="M614.4 768h-204.8v-614.4h204.8v614.4zM716.8 768v-614.4h204.8v614.4h-204.8zM307.2 768h-204.8v-614.4h204.8v614.4zM0 870.4h1024v-819.2h-1024v819.2z" />
 <glyph unicode="&#xe910;" glyph-name="headphones" d="M288 384h-64v-448h64c17.6 0 32 14.4 32 32v384c0 17.6-14.4 32-32 32zM736 384c-17.602 0-32-14.4-32-32v-384c0-17.6 14.398-32 32-32h64v448h-64zM1024 448c0 282.77-229.23 512-512 512s-512-229.23-512-512c0-61.412 10.83-120.29 30.656-174.848-19.478-33.206-30.656-71.87-30.656-113.152 0-112.846 83.448-206.188 192-221.716v443.418c-31.914-4.566-61.664-15.842-87.754-32.378-5.392 26.718-8.246 54.364-8.246 82.676 0 229.75 186.25 416 416 416s416-186.25 416-416c0-28.314-2.83-55.968-8.22-82.696-26.1 16.546-55.854 27.848-87.78 32.418v-443.44c108.548 15.532 192 108.874 192 221.714 0 41.274-11.178 79.934-30.648 113.138 19.828 54.566 30.648 113.452 30.648 174.866z" />
 <glyph unicode="&#xe911;" glyph-name="music" d="M960 960h64v-736c0-88.366-100.29-160-224-160s-224 71.634-224 160c0 88.368 100.29 160 224 160 62.684 0 119.342-18.4 160-48.040v368.040l-512-113.778v-494.222c0-88.366-100.288-160-224-160s-224 71.634-224 160c0 88.368 100.288 160 224 160 62.684 0 119.342-18.4 160-48.040v624.040l576 128z" />
 <glyph unicode="&#xe914;" glyph-name="video" d="M384 672c0 88.366 71.634 160 160 160s160-71.634 160-160c0-88.366-71.634-160-160-160s-160 71.634-160 160zM0 672c0 88.366 71.634 160 160 160s160-71.634 160-160c0-88.366-71.634-160-160-160s-160 71.634-160 160zM768 352v96c0 35.2-28.8 64-64 64h-640c-35.2 0-64-28.8-64-64v-320c0-35.2 28.8-64 64-64h640c35.2 0 64 28.8 64 64v96l256-160v448l-256-160zM640 192h-512v192h512v-192z" />
 <glyph unicode="&#xe91e;" glyph-name="microphone-3" d="M480 256c88.366 0 160 71.634 160 160v384c0 88.366-71.634 160-160 160s-160-71.634-160-160v-384c0-88.366 71.636-160 160-160zM704 512v-96c0-123.71-100.29-224-224-224-123.712 0-224 100.29-224 224v96h-64v-96c0-148.238 112.004-270.3 256-286.22v-129.78h-128v-64h320v64h-128v129.78c143.994 15.92 256 137.982 256 286.22v96h-64z" />
-<glyph unicode="&#xe91f;" glyph-name="book" d="M896 832v-832h-672c-53.026 0-96 42.98-96 96s42.974 96 96 96h608v768h-640c-70.398 0-128-57.6-128-128v-768c0-70.4 57.602-128 128-128h768v896h-64zM224.056 128v0c-0.018-0.002-0.038 0-0.056 0-17.672 0-32-14.326-32-32s14.328-32 32-32c0.018 0 0.038 0.002 0.056 0.002v-0.002h607.89v64h-607.89z" />
+<glyph unicode="&#xe91f;" glyph-name="book-1" d="M896 832v-832h-672c-53.026 0-96 42.98-96 96s42.974 96 96 96h608v768h-640c-70.398 0-128-57.6-128-128v-768c0-70.4 57.602-128 128-128h768v896h-64zM224.056 128v0c-0.018-0.002-0.038 0-0.056 0-17.672 0-32-14.326-32-32s14.328-32 32-32c0.018 0 0.038 0.002 0.056 0.002v-0.002h607.89v64h-607.89z" />
 <glyph unicode="&#xe920;" glyph-name="books-2" horiz-adv-x="1152" d="M224 832h-192c-17.6 0-32-14.4-32-32v-704c0-17.6 14.4-32 32-32h192c17.6 0 32 14.4 32 32v704c0 17.6-14.4 32-32 32zM192 640h-128v64h128v-64zM544 832h-192c-17.6 0-32-14.4-32-32v-704c0-17.6 14.4-32 32-32h192c17.6 0 32 14.4 32 32v704c0 17.6-14.4 32-32 32zM512 640h-128v64h128v-64zM765.088 782.52l-171.464-86.394c-15.716-7.918-22.096-27.258-14.178-42.976l287.978-571.548c7.918-15.718 27.258-22.098 42.976-14.178l171.464 86.392c15.716 7.92 22.096 27.26 14.178 42.974l-287.978 571.55c-7.92 15.718-27.26 22.1-42.976 14.18z" />
 <glyph unicode="&#xe927;" glyph-name="file-picture" d="M832 64h-640v128l192 320 263-320 185 128v-256zM832 480c0-53.020-42.98-96-96-96-53.022 0-96 42.98-96 96s42.978 96 96 96c53.020 0 96-42.98 96-96zM917.806 730.924c-22.212 30.292-53.174 65.7-87.178 99.704s-69.412 64.964-99.704 87.178c-51.574 37.82-76.592 42.194-90.924 42.194h-496c-44.112 0-80-35.888-80-80v-864c0-44.112 35.888-80 80-80h736c44.112 0 80 35.888 80 80v624c0 14.332-4.372 39.35-42.194 90.924zM785.374 785.374c30.7-30.7 54.8-58.398 72.58-81.374h-153.954v153.946c22.984-17.78 50.678-41.878 81.374-72.572zM896 16c0-8.672-7.328-16-16-16h-736c-8.672 0-16 7.328-16 16v864c0 8.672 7.328 16 16 16 0 0 495.956 0.002 496 0v-224c0-17.672 14.326-32 32-32h224v-624z" />
 <glyph unicode="&#xe964;" glyph-name="database-1" d="M512 960c-282.77 0-512-71.634-512-160v-128c0-88.366 229.23-160 512-160s512 71.634 512 160v128c0 88.366-229.23 160-512 160zM512 416c-282.77 0-512 71.634-512 160v-192c0-88.366 229.23-160 512-160s512 71.634 512 160v192c0-88.366-229.23-160-512-160zM512 128c-282.77 0-512 71.634-512 160v-192c0-88.366 229.23-160 512-160s512 71.634 512 160v192c0-88.366-229.23-160-512-160z" />