Fixed the custom dropdown menu, now I just need to style it.

17th Website/src/components/dropdown/Dropdown.vue

@@ -46,6 +46,7 @@ export default {
             </button>
 
         </slot>
+        
         <slot />
     </div>
 </template>

17th Website/src/components/dropdown/DropdownContent.vue

@@ -21,12 +21,9 @@ export default {
 <style scoped>
 div {
     display: block;
-    /* flex-direction: column; */
     width: 10%;
     position: absolute;
     background-color: var(--background-secondary);
     border-radius: 0px 0px 10px 10px;
-    /* padding: 10px; */
-
 }
 </style>

17th Website/src/components/dropdown/testDropdown.vue

@@ -0,0 +1,35 @@
+<template>
+    <Listbox v-model="selectedPerson">
+        <ListboxButton>{{ selectedPerson.name }}</ListboxButton>
+        <ListboxOptions>
+            <ListboxOption v-for="person in people" :key="person.id" :value="person" :disabled="person.unavailable">
+                {{ person.name }}
+            </ListboxOption>
+        </ListboxOptions>
+    </Listbox>
+</template>
+  
+<script setup>
+import { ref } from 'vue'
+import {
+    Listbox,
+    ListboxButton,
+    ListboxOptions,
+    ListboxOption,
+} from '@headlessui/vue'
+
+const people = [
+    { id: 1, name: 'Durward Reynolds', unavailable: false },
+    { id: 2, name: 'Kenton Towne', unavailable: false },
+    { id: 3, name: 'Therese Wunsch', unavailable: false },
+    { id: 4, name: 'Benedict Kessler', unavailable: true },
+    { id: 5, name: 'Katelyn Rohan', unavailable: false },
+]
+const selectedPerson = ref(people[0])
+</script>
+  
+<script>
+    export default {
+        name: 'testDropdown'
+    }
+</script>