✨ new maps

src/components/Common/AppLayout.vue

@@ -8,28 +8,64 @@
           </IconButton>
         </template>
       </FilesAside>
-      <IconButton name="Settings">
-        <Cog  />
-      </IconButton>
+
     </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;">
-      This is 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(() => {
+  window.addEventListener('reveal-screen', (event: CustomEvent) => {
+    switchMain('map');
+  });
+})
 
 </script>
 <style>