Got the dropdown icon working (finally)

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

@@ -19,19 +19,25 @@ export default {
     methods: {
         toggle() {
             this.sharedState.active = !this.sharedState.active
+        },
+        away() {
+            this.sharedState.active = false
         }
     },
     components: {
         Icon
+    },
+    props: {
+        title: String
     }
 }
 </script>
 
 <template>
-    <div id="button" @click="toggle">
+    <div id="button" @click="toggle" v-click-away="away">
         <slot name="toggler">
             <button>
-                toggle
+                <p>{{ title }}</p>
                 <Icon icon="carbon:caret-down" />
             </button>
 
@@ -48,5 +54,12 @@ button {
     font-size: 15px;
     padding: 10px;
     color: var(--white);
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+}
+
+p {
+    margin: 0 10px 0 0px;
 }
 </style>

17th Website/src/views/users.vue

@@ -54,7 +54,7 @@ export default {
                     <option>RRC</option>
                 </select>
                 
-                <dropdown>
+                <dropdown title="hello">
                     <DropdownContent>
                         <DropdownItem>Item 1</DropdownItem>
                         <DropdownItem>Item 2</DropdownItem>