feat : first commit

frontend/components/AppDrawer.vue

@@ -0,0 +1,56 @@
+<template>
+  <div v-if="modelValue" class="fixed inset-0 z-50">
+    <Transition name="drawer-backdrop">
+      <div class="absolute inset-0 bg-black/40" @click="close" />
+    </Transition>
+    <Transition name="drawer-panel">
+      <div class="absolute right-0 top-0 h-full w-full max-w-md bg-white shadow-xl">
+        <div class="flex items-center justify-between border-b border-neutral-200 bg-tertiary-500 px-6 py-4">
+          <h2 class="text-lg font-semibold text-neutral-900">
+            {{ title }}
+          </h2>
+          <button
+            type="button"
+            class="rounded-md p-2 text-neutral-500 hover:bg-neutral-100"
+            @click="close"
+          >
+            ✕
+          </button>
+        </div>
+        <div class="p-6">
+          <slot />
+        </div>
+      </div>
+    </Transition>
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{ modelValue: boolean; title?: string }>()
+const emit = defineEmits<{ (e: 'update:modelValue', value: boolean): void }>()
+
+const close = () => emit('update:modelValue', false)
+</script>
+
+<style scoped>
+.drawer-backdrop-enter-active,
+.drawer-backdrop-leave-active {
+  transition: opacity 0.2s ease;
+}
+
+.drawer-backdrop-enter-from,
+.drawer-backdrop-leave-to {
+  opacity: 0;
+}
+
+.drawer-panel-enter-active,
+.drawer-panel-leave-active {
+  transition: transform 0.2s ease, opacity 0.2s ease;
+}
+
+.drawer-panel-enter-from,
+.drawer-panel-leave-to {
+  transform: translateX(100%);
+  opacity: 0;
+}
+</style>