[web] Make hover style of buttons identical everywhere

This commit is contained in:
Alain Nussbaumer 2024-04-27 21:13:13 +02:00
parent 4ae2903b4d
commit 7edce91474
3 changed files with 8 additions and 39 deletions

View File

@ -103,7 +103,7 @@
</div>
</div>
<div class="navbar-brand is-flex-grow-1">
<navbar-item-link :to="{ name: 'queue' }" exact class="mr-auto">
<navbar-item-link :to="{ name: 'queue' }" class="mr-auto">
<mdicon class="icon" name="playlist-play" size="24" />
</navbar-item-link>
<navbar-item-link

View File

@ -1,10 +1,5 @@
<template>
<a
class="navbar-item"
:class="{ 'is-active': is_active }"
:href="full_path()"
@click.stop.prevent="open_link()"
>
<a class="navbar-item" :href="href" @click.stop.prevent="open">
<slot />
</a>
</template>
@ -15,47 +10,21 @@ import * as types from '@/store/mutation_types'
export default {
name: 'NavbarItemLink',
props: {
exact: Boolean,
to: { required: true, type: Object }
},
computed: {
is_active() {
if (this.exact) {
return this.$route.path === this.to
}
return this.$route.path.startsWith(this.to)
},
show_burger_menu: {
get() {
return this.$store.state.show_burger_menu
},
set(value) {
this.$store.commit(types.SHOW_BURGER_MENU, value)
}
},
show_player_menu: {
get() {
return this.$store.state.show_player_menu
},
set(value) {
this.$store.commit(types.SHOW_PLAYER_MENU, value)
}
href() {
return this.$router.resolve(this.to).href
}
},
methods: {
full_path() {
const resolved = this.$router.resolve(this.to)
return resolved.href
},
open_link() {
if (this.show_burger_menu) {
open() {
if (this.$store.state.show_burger_menu) {
this.$store.commit(types.SHOW_BURGER_MENU, false)
}
if (this.show_player_menu) {
if (this.$store.state.show_player_menu) {
this.$store.commit(types.SHOW_PLAYER_MENU, false)
}
this.$router.push(this.to)

View File

@ -54,7 +54,7 @@
<mdicon class="icon" name="music-box-multiple" size="16" />
<b v-text="$t('navigation.playlists')" />
</navbar-item-link>
<navbar-item-link :to="{ name: 'music' }" exact>
<navbar-item-link :to="{ name: 'music' }">
<mdicon class="icon" name="music" size="16" />
<b v-text="$t('navigation.music')" />
</navbar-item-link>