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

17th Website/src/views/users.vue

@@ -1,7 +1,8 @@
 <script>
-import Dropdown from '../components/dropdown/Dropdown.vue'
-import DropdownContent from '../components/dropdown/DropdownContent.vue'
-import DropdownItem from '../components/dropdown/DropDownItem.vue'
+import { ref } from 'vue'
+import { Listbox, ListboxButton, ListboxOptions, ListboxOption } from '@headlessui/vue'
+import testDropdown from '../components/dropdown/testDropdown.vue'
+
 export default {
     data() {
         return {
@@ -10,7 +11,18 @@ export default {
             dropped: false,
             search: '',
             filter1: 'All Groups',
+
             filter2: 'All Roles',
+
+            unitFilters: [
+                { id: 1, name: 'All Groups', disabled: false },
+                { id: 2, name: 'Alpha', disabled: false },
+                { id: 3, name: 'Echo', disabled: false },
+                { id: 4, name: 'HHC', disabled: false },
+                { id: 5, name: 'Recruit', disabled: false },
+            ],
+
+            unitFilter: { id: 1, name: 'All Groups', disabled: false },
         }
     },
     methods: {
@@ -20,15 +32,22 @@ export default {
         resetFilters() {
             this.filter1 = 'All Groups'
             this.filter2 = 'All Roles'
-            this.search = ''            
+            this.search = ''
+            this.unitFilter.id = 1
+            this.unitFilter.name = 'All Groups'
         }
     },
     components: {
-        Dropdown,
-        DropdownContent,
-        DropdownItem
-    }
+        Listbox,
+        ListboxButton,
+        ListboxOption,
+        ListboxOptions,
+        testDropdown,
+    },
+
 }
+
+// const unitFilter = ref(unitFilters[1])
 </script>
 
 <template>
@@ -53,16 +72,18 @@ export default {
                     <option>Recruiter</option>
                     <option>RRC</option>
                 </select>
-                
-                <dropdown title="All Groups">
-                    <DropdownContent>
-                        <DropdownItem>All Groups</DropdownItem>
-                        <DropdownItem>Echo</DropdownItem>
-                        <DropdownItem>HHC</DropdownItem>
-                        <DropdownItem>Recruit</DropdownItem>
-                        <DropdownItem>Discharged</DropdownItem>
-                    </DropdownContent>
-                </dropdown>
+
+                <Listbox v-model="unitFilter">
+                    <ListboxButton class="lbButton">
+                        {{ unitFilter.name }}
+                        <Icon icon="carbon:caret-down" />
+                    </ListboxButton>
+                    <ListboxOptions class="lbOptions">
+                        <ListboxOption v-for="unit in unitFilters" :key="unit.id" :value="unit" :disabled="unit.disabled">
+                            {{ unit.name }}
+                        </ListboxOption>
+                    </ListboxOptions>
+                </Listbox>
 
                 <!-- This button needs to get finished -->
                 <button @click="resetFilters()">Clear Filters</button>
@@ -94,6 +115,19 @@ export default {
 <style>
 @import '../assets/base.css';
 
+
+.lbButton {
+    background-color: var(--background-secondary);
+    border: none;
+    border-radius: 5px;
+}
+
+.lbOptions {
+    background-color: var(--background-secondary);
+    display: block;
+    position: absolute;
+}
+
 button {
     transition: all 0.2s ease-out;
     cursor: pointer;
@@ -143,7 +177,8 @@ input {
     display: flex;
 }
 
-#searchRow select, button {
+#searchRow select,
+button {
     margin: 0 15px 0 0;
 }