MyFavMirrors/owntone-server
1
0
Fork 0
mirror of https://github.com/owntone/owntone-server.git synced 2024-12-26 07:05:57 -05:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
chme 2019-07-06 15:21:29 +02:00
parent 5fff68bb13
commit 03c50ba81e
3 changed files with 51 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
web-src/src/components/NavbarItemLink.vue Normal file
View File

@ -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>

37
web-src/src/components/NavbarTop.vue
View File

@ -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>
<router-link to="/music" class="navbar-item" active-class="is-active">
</navbar-item-link>
<navbar-item-link to="/music" @click.native="close_burger_menu">
<span class="icon"><i class="mdi mdi-music"></i></span>
</router-link>
<router-link to="/podcasts" class="navbar-item" active-class="is-active" v-if="podcasts.tracks > 0">
</navbar-item-link>
<navbar-item-link to="/podcasts" v-if="podcasts.tracks > 0">
<span class="icon"><i class="mdi mdi-microphone"></i></span>
</router-link>
<router-link to="/audiobooks" class="navbar-item" active-class="is-active" v-if="audiobooks.tracks > 0">
</navbar-item-link>
<navbar-item-link to="/audiobooks" v-if="audiobooks.tracks > 0">
<span class="icon"><i class="mdi mdi-book-open-variant"></i></span>
</router-link>
<router-link to="/files" class="navbar-item" active-class="is-active">
</navbar-item-link>
<navbar-item-link to="/files">
<span class="icon"><i class="mdi mdi-folder-open"></i></span>
</router-link>
<router-link to="/search" class="navbar-item" active-class="is-active">
</navbar-item-link>
<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()

2
web-src/src/router/index.js
View File

@ -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)
})