Only show map list button if there are multiple maps defined

This commit is contained in:
James Lyne 2020-12-14 15:48:15 +00:00
parent 76fe40d92a
commit 6ede9adf2f

View File

@ -1,7 +1,7 @@
<template> <template>
<aside class="sidebar"> <aside class="sidebar">
<header class="sidebar__buttons"> <header class="sidebar__buttons">
<button :class="{'button--maps': true, 'active': mapsActive}" <button v-if="mapCount > 1" :class="{'button--maps': true, 'active': mapsActive}"
@click="mapsActive = !mapsActive" title="Map list" aria-label="Map list"> @click="mapsActive = !mapsActive" title="Map list" aria-label="Map list">
<SvgIcon name="maps"></SvgIcon> <SvgIcon name="maps"></SvgIcon>
</button> </button>
@ -14,7 +14,7 @@
<SvgIcon name="settings"></SvgIcon> <SvgIcon name="settings"></SvgIcon>
</button> </button>
</header> </header>
<WorldList v-show="mapsActive"></WorldList> <WorldList v-if="mapCount > 1" v-show="mapsActive"></WorldList>
<PlayerList v-show="playersActive"></PlayerList> <PlayerList v-show="playersActive"></PlayerList>
<FollowTarget v-if="following" :target="following"></FollowTarget> <FollowTarget v-if="following" :target="following"></FollowTarget>
</aside> </aside>
@ -41,9 +41,11 @@ export default defineComponent({
let mapsActive = ref(false), let mapsActive = ref(false),
playersActive = ref(false), playersActive = ref(false),
settingsActive = ref(false), settingsActive = ref(false),
mapCount = computed(() => store.state.maps.size),
following = computed(() => store.state.following); following = computed(() => store.state.following);
return { return {
mapCount,
mapsActive, mapsActive,
playersActive, playersActive,
settingsActive, settingsActive,