feat/encounter-adjustment: adjust menu

2025-11-26 18:06:32 +07:00
parent 3a4822d5cf
commit 9bc999afc7
4 changed files with 265 additions and 36 deletions
@@ -0,0 +1,86 @@
+<script setup lang="ts">
+const props = defineProps<{
+  height: 200
+  activeTab?: 1 | 2
+}>()
+
+const activeTab = ref(props.activeTab || 1)
+
+function handleClick(value: 1 | 2) {
+  activeTab.value = value
+}
+</script>
+
+<template>
+  <div class="content-switcher" :style="`height: ${height}px`">
+    <div :class="`${activeTab === 1 ? 'active' : 'inactive'}`">
+      <div class="content-wrapper">
+        <div>
+          <slot name="content1" />
+        </div>
+      </div>
+      <div class="content-nav">
+        <button @click="handleClick(1)">
+          <Icon name="i-lucide-chevron-right" />
+        </button>
+      </div>
+    </div>
+    <div :class="`${activeTab === 2 ? 'active' : 'inactive'}`">
+      <div class="content-nav">
+        <button @click="handleClick(2)">
+          <Icon name="i-lucide-chevron-left" />
+        </button>
+      </div>
+      <div class="content-wrapper">
+        <div>
+          <slot name="content2" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style>
+  .content-switcher {
+    @apply flex overflow-hidden gap-3
+  }
+  .content-switcher > * {
+    @apply border border-slate-300 rounded-md flex overflow-hidden
+  }
+
+  .content-wrapper {
+    @apply p-4 2xl:p-5 overflow-hidden
+  }
+  .inactive .content-wrapper {
+    @apply p-0 w-0
+  }
+
+  .content-nav {
+    @apply h-full flex flex-row items-center justify-center content-center !text-2xl overflow-hidden
+  }
+
+  .content-nav button {
+    @apply pt-2 px-2 h-full w-full
+  }
+
+  /* .content-switcher .inactive > .content-wrapper {
+    @apply w-0 p-0 opacity-0 transition-all duration-500 ease-in-out
+  } */
+  .content-switcher .inactive {
+    @apply w-16 transition-all duration-500 ease-in-out
+  }
+  .content-switcher .inactive > .content-nav {
+    @apply w-full transition-all duration-100 ease-in-out
+  }
+
+  .content-switcher .active {
+    @apply grow transition-all duration-500 ease-in-out
+  }
+  .content-switcher .active > .content-nav {
+    @apply w-0 transition-all duration-100 ease-in-out
+  }
+  /* .content-switcher .active > .content-wrapper {
+    @apply w-full delay-1000 transition-all duration-1000 ease-in-out
+  } */
+
+</style>