initial

apps/client/components/sidebar.vue

@@ -0,0 +1,87 @@
+<template>
+  <VueFinalModal
+    :modal-id="modalId"
+    class="sidebar"
+    content-class="sidebar__content"
+    content-transition="sidebar"
+    hide-overlay
+    background="interactive"
+    :click-to-close="false"
+    :z-index-fn="({ index }) => 6000 + 2 * index"
+  >
+    <div class="sidebar__top">
+      <UiButton icon="arrow-left" type="outlined" color="secondary" @click="vfm.close(modalId)" />
+
+      <slot name="top" />
+    </div>
+
+    <div v-if="$slots.default" class="sidebar__middle">
+      <slot />
+    </div>
+
+    <div v-if="$slots.bottom" class="sidebar__bottom">
+      <slot name="bottom" />
+    </div>
+  </VueFinalModal>
+</template>
+
+<script setup>
+import { VueFinalModal, useVfm } from 'vue-final-modal'
+
+const props = defineProps({
+  id: {
+    type: String,
+  },
+})
+
+const vfm = useVfm()
+
+const modalId = computed(() => {
+  if (props.id)
+    return `sidebar-${props.id}`
+
+  return 'sidebar'
+})
+</script>
+
+<style lang="scss">
+.sidebar {
+  &__content {
+    width: 353px;
+    position: absolute;
+    right: 0;
+    display: flex;
+    flex-direction: column;
+    background-color: $clr-white;
+    height: 100%;
+    gap: 32px;
+    padding: 16px;
+  }
+
+  &__top {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+  }
+
+  &__middle {
+    flex: 1;
+    overflow-y: auto;
+  }
+
+  &-enter-active,
+  &-leave-active {
+    transition: transform .2s ease-in-out;
+  }
+
+  &-enter-to,
+  &-leave-from {
+    //transform: rotateZ(360deg);
+  }
+
+  &-enter-from,
+  &-leave-to {
+    transform: translateX(100%);
+  }
+}
+</style>