Solving issue #16 feat: add dropdown menu component

package.json

@@ -118,5 +118,6 @@
       "types": "./dist/src/helpers/index.d.ts"
     }
   },
-  "types": "./dist/index.d.ts"
+  "types": "./dist/index.d.ts",
+  "packageManager": "pnpm@9.5.0+sha256.dbdf5961c32909fb030595a9daa1dae720162e658609a8f92f2fa99835510ca5"
 }

src/components/Dropdown.vue

@@ -0,0 +1,78 @@
+<template>
+  <div class="dropdown-container" :class="{ open: isOpen }">
+    <div class="dropdown-trigger" @click="toggleDropdown">
+      <slot name="button">
+        <button>{{ title }}</button>
+        <span class="dropdown-arrow">▼</span>
+      </slot>
+    </div>
+    <div v-if="isOpen" class="dropdown-content">
+      <slot name="content">
+        <p>Dropdown content</p>
+      </slot>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue"
+
+defineProps({
+  title: {
+    type: String,
+    default: "Dropdown menu",
+  },
+})
+
+const isOpen = ref(false)
+
+const toggleDropdown = () => {
+  isOpen.value = !isOpen.value
+}
+</script>
+
+<style scoped>
+.dropdown-container {
+  position: relative;
+  display: 100%;
+}
+
+.dropdown-trigger {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px;
+  color: #fff;
+  cursor: pointer;
+  background-color: #333;
+}
+
+.dropdown-arrow {
+  transition: transform 0.3s;
+}
+
+.open .dropdown-arrow {
+  transform: rotate(180deg);
+}
+
+.dropdown-content {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  margin-top: 10px;
+  padding: 10px;
+  background-color: #1e1e1e;
+  border: 1px solid #333;
+  animation: fadeIn 0.3s ease-in-out;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+</style>

src/components/index.ts

@@ -2,3 +2,4 @@ export * from "./button"
 export * from "./smart"
 export * from "./modal"
 export * from "./toast"
+export { default as HoppDropdown } from "./Dropdown.vue"

src/stories/Dropdown.story.vue

@@ -0,0 +1,20 @@
+<template>
+  <Story title="Dropdown">
+    <Variant>
+      <HoppDropdown>
+        <template #button>
+          <button>Dropdown menu</button>
+        </template>
+        <template #content>
+          <div style="min-width: 300px">
+            <p>Dropdown content</p>
+          </div>
+        </template>
+      </HoppDropdown>
+    </Variant>
+  </Story>
+</template>
+
+<script setup lang="ts">
+import { HoppDropdown } from "../components"
+</script>