Skirda/LiveAtlas
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Only allow one sidebar menu open at a time on small screens

Browse Source
This commit is contained in:
James Lyne 2020-12-20 15:29:40 +00:00
parent ee391773a2
commit 5b4a81617c
1 changed files with 40 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
src/components/Sidebar.vue
View File

@ -17,27 +17,27 @@
<template>
<aside class="sidebar">
<header class="sidebar__buttons">
<button v-if="mapCount > 1" :class="{'button--maps': true, 'active': mapsActive}"
@click="mapsActive = !mapsActive" title="Map list" aria-label="Map list">
<button v-if="mapCount > 1" :class="{'button--maps': true, 'active': menusActive.has('maps')}"
@click="toggleMenu('maps')" title="Map list" aria-label="Map list">
<SvgIcon name="maps"></SvgIcon>
</button>
<button :class="{'button--players': true, 'active': playersActive}"
@click="playersActive = !playersActive" title="Player list" aria-label="Player list">
<button :class="{'button--players': true, 'active': menusActive.has('players')}"
@click="toggleMenu('players')" title="Player list" aria-label="Player list">
<SvgIcon name="players"></SvgIcon>
</button>
<!-- <button :class="{'button&#45;&#45;settings': true, 'active': settingsActive}"-->
<!-- @click="settingsActive = !settingsActive" title="Settings" aria-label="Settings">-->
<!-- <button :class="{'button&#45;&#45;settings': true, 'active': menusActive.has('settings')}"-->
<!-- @click="toggleMenu('settings')" title="Settings" aria-label="Settings">-->
<!-- <SvgIcon name="settings"></SvgIcon>-->
<!-- </button>-->
</header>
<WorldList v-if="mapCount > 1" v-show="mapsActive"></WorldList>
<PlayerList v-show="playersActive"></PlayerList>
<WorldList v-if="mapCount > 1" v-show="menusActive.has('maps')"></WorldList>
<PlayerList v-show="menusActive.has('players')"></PlayerList>
<FollowTarget v-if="following" :target="following"></FollowTarget>
</aside>
</template>
<script lang="ts">
import {defineComponent, ref, computed} from "@vue/runtime-core";
import {defineComponent, ref, reactive, computed, onMounted, onUnmounted, watch} from "@vue/runtime-core";
import PlayerList from './sidebar/PlayerList.vue';
import WorldList from './sidebar/WorldList.vue';
import FollowTarget from './sidebar/FollowTarget.vue';
@ -53,18 +53,42 @@ export default defineComponent({
},
setup() {
const store = useStore();
let mapsActive = ref(false),
playersActive = ref(false),
settingsActive = ref(false),
const store = useStore(),
onResize = () => {
smallScreen.value = window.innerWidth < 480 || window.innerHeight < 500;
},
toggleMenu = (menu: string) => {
if(menusActive.has(menu)) {
menusActive.delete(menu);
} else {
if(smallScreen.value) {
menusActive.clear();
}
menusActive.add(menu);
}
};
let menusActive = reactive(new Set<string>()),
smallScreen = ref(false),
mapCount = computed(() => store.state.maps.size),
following = computed(() => store.state.followTarget);
onResize();
onMounted(() => window.addEventListener('resize', onResize));
onUnmounted(() => window.addEventListener('resize', onResize));
watch(smallScreen, (newValue) => {
if(newValue && menusActive.size > 1) {
menusActive.clear();
}
})
return {
mapCount,
mapsActive,
playersActive,
settingsActive,
menusActive,
toggleMenu,
following
}
}