102 lines
2.5 KiB
Vue
102 lines
2.5 KiB
Vue
<template>
|
|
<div class="app-layout theme">
|
|
<div class="app-layout__aside bg-theme-500 contrast " style="grid-area: topAside;">
|
|
<FilesAside>
|
|
<template v-slot:handle>
|
|
<IconButton name="Files" >
|
|
<Directory />
|
|
</IconButton>
|
|
</template>
|
|
</FilesAside>
|
|
|
|
</div>
|
|
<div class="app-layout__aside bg-theme-500 contrast" style="grid-area: menu;">
|
|
<IconButton name="Map" @click="switchMain('map')">
|
|
<IconMap />
|
|
</IconButton>
|
|
<IconButton name="Sound" @click="switchMain('sounds')">
|
|
<IconMusic />
|
|
</IconButton>
|
|
<IconButton name="Devices" @click="switchMain('devices')">
|
|
<IconTv />
|
|
</IconButton>
|
|
<div style="flex: 1"></div>
|
|
<IconButton name="Settings" @click="switchMain('settings')">
|
|
<Cog />
|
|
</IconButton>
|
|
</div>
|
|
|
|
<div class="app-layout__overview bg-theme-800 contrast" style="grid-area: overview;">
|
|
<slot name="overview"></slot>
|
|
</div>
|
|
<div class="app-layout__main" style="grid-area: main;">
|
|
<div v-show="mainSection === 'devices'">
|
|
<slot name=devices></slot>
|
|
</div>
|
|
<div v-show="mainSection === 'sounds'">
|
|
<slot name=sounds></slot>
|
|
</div>
|
|
<div v-show="mainSection === 'map'">
|
|
<slot name=map></slot>
|
|
</div>
|
|
<div v-show="mainSection === 'settings'">
|
|
<slot name=settings></slot>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script lang="ts" setup>
|
|
import {onMounted, ref} from 'vue';
|
|
import FilesAside from '../Files/FilesAside.vue';
|
|
import Cog from '../Icons/Cog.vue';
|
|
import Directory from '../Icons/Directory.vue';
|
|
import IconMap from '../Icons/IconMap.vue';
|
|
import IconMusic from '../Icons/IconMusic.vue';
|
|
import IconTv from '../Icons/IconTv.vue';
|
|
import IconButton from './IconButton.vue';
|
|
|
|
const mainSection = ref('sounds');
|
|
|
|
function switchMain(section: string){
|
|
mainSection.value = section;
|
|
}
|
|
|
|
onMounted(() => {
|
|
//@ts-ignore
|
|
window.addEventListener('reveal-screen', (event: CustomEvent) => {
|
|
switchMain('map');
|
|
});
|
|
})
|
|
|
|
</script>
|
|
<style>
|
|
.app-layout {
|
|
display: grid;
|
|
grid-template-columns: 1fr 64px;
|
|
grid-template-rows: max-content 1fr;
|
|
grid-template-areas:
|
|
"overview topAside"
|
|
"main menu";
|
|
height: 100dvh;
|
|
--color-theme: var(--color-app-primary);
|
|
}
|
|
|
|
.app-layout__aside {
|
|
padding: 12px;
|
|
overflow:hidden;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.app-layout__overview {
|
|
padding: 1rem;
|
|
}
|
|
|
|
.app-layout__main {
|
|
padding: 1rem;
|
|
}
|
|
|
|
</style> |