✨ nicer filemanager and layout

src/components/Common/AppLayout.vue

@@ -0,0 +1,65 @@
+<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>
+      <IconButton name="Settings">
+        <Cog  />
+      </IconButton>
+    </div>
+    <div class="app-layout__aside bg-theme-500 contrast" style="grid-area: menu;">
+
+    </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>
+  </div>
+</template>
+<script lang="ts" setup>
+import FilesAside from '../Files/FilesAside.vue';
+import Cog from '../Icons/Cog.vue';
+import Directory from '../Icons/Directory.vue';
+import IconButton from './IconButton.vue';
+
+
+</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>