[web-src] Fix navbar links not working with burger menu visible

web-src/src/components/NavbarItemLink.vue

@@ -0,0 +1,32 @@
+<template>
+  <a class="navbar-item" :class="{ 'is-active': is_active }" @click="open_link()" :href="full_path()">
+    <slot></slot>
+  </a>
+</template>
+
+<script>
+import * as types from '@/store/mutation_types'
+
+export default {
+  name: 'NavbarItemLink',
+  props: [ 'to' ],
+
+  computed: {
+    is_active () {
+      return this.$route.path.startsWith(this.to)
+    }
+  },
+
+  methods: {
+    open_link: function () {
+      this.$store.commit(types.SHOW_BURGER_MENU, false)
+      this.$router.push({ path: this.to })
+    },
+
+    full_path: function () {
+      const resolved = this.$router.resolve(this.to)
+      return resolved.href
+    }
+  }
+}
+</script>

web-src/src/components/NavbarTop.vue

@@ -1,24 +1,24 @@
 <template>
   <nav class="navbar is-light is-fixed-top" role="navigation" aria-label="main navigation">
     <div class="navbar-brand">
-      <router-link to="/playlists" class="navbar-item" active-class="is-active">
+      <navbar-item-link to="/playlists">
         <span class="icon"><i class="mdi mdi-library-music"></i></span>
-      </router-link>
+      </navbar-item-link>
-      <router-link to="/music" class="navbar-item" active-class="is-active">
+      <navbar-item-link to="/music" @click.native="close_burger_menu">
         <span class="icon"><i class="mdi mdi-music"></i></span>
-      </router-link>
+      </navbar-item-link>
-      <router-link to="/podcasts" class="navbar-item" active-class="is-active" v-if="podcasts.tracks > 0">
+      <navbar-item-link to="/podcasts" v-if="podcasts.tracks > 0">
         <span class="icon"><i class="mdi mdi-microphone"></i></span>
-      </router-link>
+      </navbar-item-link>
-      <router-link to="/audiobooks" class="navbar-item" active-class="is-active" v-if="audiobooks.tracks > 0">
+      <navbar-item-link to="/audiobooks" v-if="audiobooks.tracks > 0">
         <span class="icon"><i class="mdi mdi-book-open-variant"></i></span>
-      </router-link>
+      </navbar-item-link>
-      <router-link to="/files" class="navbar-item" active-class="is-active">
+      <navbar-item-link to="/files">
         <span class="icon"><i class="mdi mdi-folder-open"></i></span>
-      </router-link>
+      </navbar-item-link>
-      <router-link to="/search" class="navbar-item" active-class="is-active">
+      <navbar-item-link to="/search">
         <span class="icon"><i class="mdi mdi-magnify"></i></span>
-      </router-link>
+      </navbar-item-link>
 
       <div class="navbar-burger" @click="update_show_burger_menu" :class="{ 'is-active': show_burger_menu }">
         <span></span>
@@ -116,12 +116,12 @@
           <div class="navbar-dropdown is-right">
             <a class="navbar-item" href="/admin.html">Admin</a>
             <hr class="navbar-divider">
-            <a class="navbar-item" v-on:click="open_about">
+            <navbar-item-link to="/about">
               <div>
                 <p class="title is-7">forked-daapd</p>
                 <p class="subtitle is-7">{{ config.version }}</p>
               </div>
-            </a>
+            </navbar-item-link>
           </div>
         </div>
       </div>
@@ -132,6 +132,7 @@
 <script>
 import webapi from '@/webapi'
 import _audio from '@/audio'
+import NavbarItemLink from './NavbarItemLink'
 import NavBarItemOutput from './NavBarItemOutput'
 import PlayerButtonPlayPause from './PlayerButtonPlayPause'
 import PlayerButtonNext from './PlayerButtonNext'
@@ -144,11 +145,10 @@ import * as types from '@/store/mutation_types'
 
 export default {
   name: 'NavbarTop',
-  components: { NavBarItemOutput, PlayerButtonPlayPause, PlayerButtonNext, PlayerButtonPrevious, PlayerButtonShuffle, PlayerButtonConsume, PlayerButtonRepeat, RangeSlider },
+  components: { NavbarItemLink, NavBarItemOutput, PlayerButtonPlayPause, PlayerButtonNext, PlayerButtonPrevious, PlayerButtonShuffle, PlayerButtonConsume, PlayerButtonRepeat, RangeSlider },
 
   data () {
     return {
-      search_query: '',
       old_volume: 0,
 
       playing: false,
@@ -204,11 +204,6 @@ export default {
       }
     },
 
-    open_about: function () {
-      this.$store.commit(types.SHOW_BURGER_MENU, false)
-      this.$router.push({ path: '/about' })
-    },
-
     setupAudio: function () {
       const a = _audio.setupAudio()
 

web-src/src/router/index.js

@@ -248,6 +248,8 @@ export const router = new VueRouter({
 
 router.beforeEach((to, from, next) => {
   const burgerMenuVisible = store.state.show_burger_menu
+  if (burgerMenuVisible) {
     store.commit(types.SHOW_BURGER_MENU, false)
+  }
   next(!burgerMenuVisible)
 })