[web] Simplify the navigation bar

web-src/src/components/ControlLink.vue

@@ -1,5 +1,5 @@
 <template>
-  <a :href="href" @click.stop.prevent="open">
+  <a :href="$router.resolve(to).href" @click.stop.prevent="open">
     <slot />
   </a>
 </template>
@@ -12,25 +12,13 @@ export default {
   props: {
     to: { required: true, type: Object }
   },
-
   setup() {
     return { uiStore: useUIStore() }
   },
-
-  computed: {
-    href() {
-      return this.$router.resolve(this.to).href
-    }
-  },
-
   methods: {
     open() {
-      if (this.uiStore.show_burger_menu) {
       this.uiStore.show_burger_menu = false
-      }
-      if (this.uiStore.show_player_menu) {
       this.uiStore.show_player_menu = false
-      }
       this.$router.push(this.to)
     }
   }

web-src/src/components/NavbarTop.vue

@@ -1,54 +1,13 @@
 <template>
-  <nav class="navbar is-light is-fixed-top" :style="zindex">
+  <nav class="navbar is-fixed-top" :style="zindex">
     <div class="navbar-brand is-flex-grow-1">
       <control-link
-        v-if="settingsStore.show_menu_item_playlists"
+        v-for="menu in menus.filter((menu) => menu.show && menu.icon)"
+        :key="menu.name"
+        :to="{ name: menu.name }"
         class="navbar-item"
-        :to="{ name: 'playlists' }"
       >
-        <mdicon class="icon" name="music-box-multiple" size="16" />
+        <mdicon class="icon" :name="menu.icon" size="16" />
-      </control-link>
-      <control-link
-        v-if="settingsStore.show_menu_item_music"
-        class="navbar-item"
-        :to="{ name: 'music' }"
-      >
-        <mdicon class="icon" name="music" size="16" />
-      </control-link>
-      <control-link
-        v-if="settingsStore.show_menu_item_podcasts"
-        class="navbar-item"
-        :to="{ name: 'podcasts' }"
-      >
-        <mdicon class="icon" name="microphone" size="16" />
-      </control-link>
-      <control-link
-        v-if="settingsStore.show_menu_item_audiobooks"
-        class="navbar-item"
-        :to="{ name: 'audiobooks' }"
-      >
-        <mdicon class="icon" name="book-open-variant" size="16" />
-      </control-link>
-      <control-link
-        v-if="settingsStore.show_menu_item_radio"
-        class="navbar-item"
-        :to="{ name: 'radio' }"
-      >
-        <mdicon class="icon" name="radio" size="16" />
-      </control-link>
-      <control-link
-        v-if="settingsStore.show_menu_item_files"
-        class="navbar-item"
-        :to="{ name: 'files' }"
-      >
-        <mdicon class="icon" name="folder-open" size="16" />
-      </control-link>
-      <control-link
-        v-if="settingsStore.show_menu_item_search"
-        class="navbar-item"
-        :to="{ name: searchStore.search_source }"
-      >
-        <mdicon class="icon" name="magnify" size="16" />
       </control-link>
       <a
         class="navbar-item ml-auto"
@@ -65,92 +24,38 @@
       >
         <div class="dropdown-menu is-mobile">
           <div class="dropdown-content">
-            <control-link class="dropdown-item" :to="{ name: 'playlists' }">
+            <template
-              <span class="icon-text">
+              v-for="menu in menus.filter((menu) => menu.show)"
-                <mdicon class="icon" name="music-box-multiple" size="16" />
+              :key="menu.name"
-              </span>
-              <b v-text="$t('navigation.playlists')" />
-            </control-link>
-            <control-link class="dropdown-item" :to="{ name: 'music' }">
-              <span class="icon-text">
-                <mdicon class="icon" name="music" size="16" />
-              </span>
-              <b v-text="$t('navigation.music')" />
-            </control-link>
-            <control-link class="dropdown-item" :to="{ name: 'music-artists' }">
-              <span class="pl-5" v-text="$t('navigation.artists')" />
-            </control-link>
-            <control-link class="dropdown-item" :to="{ name: 'music-albums' }">
-              <span class="pl-5" v-text="$t('navigation.albums')" />
-            </control-link>
-            <control-link class="dropdown-item" :to="{ name: 'music-genres' }">
-              <span class="pl-5" v-text="$t('navigation.genres')" />
-            </control-link>
-            <control-link
-              v-if="spotify_enabled"
-              class="dropdown-item"
-              :to="{ name: 'music-spotify' }"
             >
-              <span class="pl-5" v-text="$t('navigation.spotify')" />
+              <hr v-if="menu.separator" class="my-3" />
-            </control-link>
-            <control-link class="dropdown-item" :to="{ name: 'podcasts' }">
-              <span class="icon-text">
-                <mdicon class="icon" name="microphone" size="16" />
-              </span>
-              <b v-text="$t('navigation.podcasts')" />
-            </control-link>
-            <control-link class="dropdown-item" :to="{ name: 'audiobooks' }">
-              <span class="icon-text">
-                <mdicon class="icon" name="book-open-variant" size="16" />
-              </span>
-              <b v-text="$t('navigation.audiobooks')" />
-            </control-link>
-            <control-link class="dropdown-item" :to="{ name: 'radio' }">
-              <span class="icon-text">
-                <mdicon class="icon" name="radio" size="16" />
-              </span>
-              <b v-text="$t('navigation.radio')" />
-            </control-link>
-            <control-link class="dropdown-item" :to="{ name: 'files' }">
-              <span class="icon-text">
-                <mdicon class="icon" name="folder-open" size="16" />
-              </span>
-              <b v-text="$t('navigation.files')" />
-            </control-link>
-            <control-link
-              class="dropdown-item"
-              :to="{ name: searchStore.search_source }"
-            >
-              <span class="icon-text">
-                <mdicon class="icon" name="magnify" size="16" />
-              </span>
-              <b v-text="$t('navigation.search')" />
-            </control-link>
-            <hr class="my-3" />
-            <control-link
-              class="dropdown-item"
-              :to="{ name: 'settings-webinterface' }"
-            >
-              {{ $t('navigation.settings') }}
-            </control-link>
               <a
+                v-else-if="menu.action"
                 class="dropdown-item"
-              @click.stop.prevent="open_update_dialog()"
+                @click.stop.prevent="menu.action"
-              v-text="$t('navigation.update-library')"
+                v-text="$t(menu.label)"
+              />
+              <control-link
+                v-else
+                :to="{ name: menu.name }"
+                class="dropdown-item"
+              >
+                <span v-if="menu.icon" class="icon-text">
+                  <mdicon class="icon" :name="menu.icon" size="16" />
+                </span>
+                <span
+                  :class="{
+                    'pl-5': menu.sub,
+                    'has-text-weight-semibold': menu.icon
+                  }"
+                  v-text="$t(menu.label)"
                 />
-            <control-link class="dropdown-item" :to="{ name: 'about' }">
-              {{ $t('navigation.about') }}
               </control-link>
+            </template>
           </div>
         </div>
       </div>
     </div>
-
-    <div
-      v-show="show_settings_menu"
-      class="is-overlay"
-      @click="show_settings_menu = false"
-    />
   </nav>
 </template>
 
@@ -164,7 +69,6 @@ import { useUIStore } from '@/stores/ui'
 export default {
   name: 'NavbarTop',
   components: { ControlLink },
-
   setup() {
     return {
       searchStore: useSearchStore(),
@@ -173,16 +77,88 @@ export default {
       uiStore: useUIStore()
     }
   },
-
-  data() {
-    return {
-      show_settings_menu: false
-    }
-  },
-
   computed: {
-    spotify_enabled() {
+    menus() {
-      return this.servicesStore.spotify.webapi_token_valid
+      return [
+        {
+          name: 'playlists',
+          label: 'navigation.playlists',
+          icon: 'music-box-multiple',
+          show: this.settingsStore.show_menu_item_playlists
+        },
+        {
+          name: 'music',
+          label: 'navigation.music',
+          icon: 'music',
+          show: this.settingsStore.show_menu_item_music
+        },
+        {
+          name: 'music-artists',
+          label: 'navigation.artists',
+          show: true,
+          sub: true
+        },
+        {
+          name: 'music-albums',
+          label: 'navigation.albums',
+          show: true,
+          sub: true
+        },
+        {
+          name: 'music-genres',
+          label: 'navigation.genres',
+          show: true,
+          sub: true
+        },
+        {
+          name: 'music-spotify',
+          label: 'navigation.spotify',
+          show: this.servicesStore.spotify.webapi_token_valid,
+          sub: true
+        },
+        {
+          name: 'podcasts',
+          label: 'navigation.podcasts',
+          icon: 'microphone',
+          show: this.settingsStore.show_menu_item_podcasts
+        },
+        {
+          name: 'audiobooks',
+          label: 'navigation.audiobooks',
+          icon: 'book-open-variant',
+          show: this.settingsStore.show_menu_item_audiobooks
+        },
+        {
+          name: 'radio',
+          label: 'navigation.radio',
+          icon: 'radio',
+          show: this.settingsStore.show_menu_item_radio
+        },
+        {
+          name: 'files',
+          label: 'navigation.files',
+          icon: 'folder-open',
+          show: this.settingsStore.show_menu_item_files
+        },
+        {
+          name: this.searchStore.search_source,
+          label: 'navigation.search',
+          icon: 'magnify',
+          show: this.settingsStore.show_menu_item_search
+        },
+        { separator: true, show: true },
+        {
+          name: 'settings-webinterface',
+          label: 'navigation.settings',
+          show: true
+        },
+        {
+          label: 'navigation.update-library',
+          action: this.open_update_dialog,
+          show: true
+        },
+        { name: 'about', label: 'navigation.about', show: true }
+      ]
     },
     zindex() {
       if (this.uiStore.show_player_menu) {
@@ -191,20 +167,9 @@ export default {
       return ''
     }
   },
-
-  watch: {
-    $route(to, from) {
-      this.show_settings_menu = false
-    }
-  },
-
   methods: {
-    on_click_outside_settings() {
-      this.show_settings_menu = !this.show_settings_menu
-    },
     open_update_dialog() {
       this.uiStore.show_update_dialog = true
-      this.show_settings_menu = false
       this.uiStore.show_burger_menu = false
     }
   }