sounds, better files

src/components/Files/FilesAside.vue

@@ -0,0 +1,100 @@
+
+
+<template>
+  <div class="files">
+    <div @click="openAside" style="cursor: pointer;">Files</div>
+    <div
+      popover
+      ref="popover"
+      class="files__aside"
+      :class="{ 'files__aside--dragging': dragging }"
+
+    >
+      <div
+        class="files__aside-content"
+        ref="content"
+        @dragstart="onDragStart"
+        @dragleave="onDragLeave"
+        @dragover.prevent
+      >
+        <FileManager />
+      </div>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import {onUnmounted, ref} from 'vue';
+import FileManager from '../FileManager/FileManager.vue';
+
+const popover = ref<HTMLDivElement>()
+const content = ref<HTMLDivElement>()
+function openAside(){
+  popover.value?.showPopover();
+}
+
+const dragging = ref(false);
+
+function onDragStart(){
+  console.log('dragstart');
+  dragging.value = true;
+}
+
+function onDragLeave(event) {
+  if (!content.value?.contains(event.relatedTarget)) {
+    popover.value?.hidePopover();
+  }
+}
+
+function onDragEnd(){
+  console.log('dragend');
+  dragging.value = false;
+}
+
+window.addEventListener('dragend', onDragEnd, {passive: true});
+
+onUnmounted(() => {
+  window.removeEventListener('dragend', onDragEnd);
+})
+</script>
+<style>
+
+.files__aside {
+  --animation-duration: 200ms;
+  position: fixed;
+  inset: auto;
+  height: auto;
+  left: 0;
+  top: 10px;
+  bottom: 10px;
+  width: 500px;
+  max-width: 100vw;
+  background: rgba(255, 255, 255, 0.5);
+  backdrop-filter: blur(10px);
+  transform: translateX(-100%);
+  border: none;
+  transition: all var(--animation-duration) allow-discrete;
+}
+
+.files__aside-content {
+  position: absolute;
+  inset: 0;
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
+.files__aside:popover-open {
+  transform: translateX(0);
+  transition-behavior: allow-discrete;
+}
+
+@starting-style {
+  .files__aside:popover-open {
+    transform: translateX(-100%);
+  }
+}
+
+.files__aside--dragging:popover-open {
+  transform: translateX(-25%);
+}
+
+</style>