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