Did some work on encapsulating style sheets.

Coninued working on custom dropdowns. Still work to go but getting there.

17th Website/src/components/ProfilePage/profileHeader.vue

@@ -31,6 +31,7 @@ export default {
     flex-direction: column-reverse;
     margin-top: 50px;
     max-width: 400px;
+    min-width: 260px;
     padding-right: 120px;
     border-right: solid;
     border-color: var(--background-secondary);

17th Website/src/components/ProfilePage/profileSubNav.vue

@@ -6,6 +6,7 @@ import { RouterLink } from 'vue-router'
     name: 'subnav',
     props: {
         link: String,
+        content: String,
         active: Boolean
     }
  }
@@ -13,6 +14,6 @@ import { RouterLink } from 'vue-router'
 
 <template>
     <RouterLink :to="link">
-        <p>{{ content }}</p>
+        <p :class="{active: active}">{{ content }}</p>
     </RouterLink>
 </template>

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

@@ -9,7 +9,7 @@ export default {
             sharedState: this.sharedState
         }
     },
-    data () {
+    data() {
         return {
             sharedState: {
                 active: false
@@ -20,22 +20,27 @@ export default {
         toggle() {
             this.sharedState.active = !this.sharedState.active
         }
+    },
+    components: {
+        Icon
     }
 }
 </script>
 
 <template>
-    <div @click="toggle">
+    <div id="button" @click="toggle">
         <slot name="toggler">
-            <button>toggle <a href="#">hello</a></button>
+            <button>
-            <Icon icon="carbon:caret-down"/>
+                toggle
+                <Icon icon="carbon:caret-down" />
+            </button>
+
         </slot>
-        <slot/>
+        <slot />
     </div>
 </template>
 
-<style>
+<style scoped>
-
 button {
     background-color: var(--background-secondary);
     border: none;
@@ -44,5 +49,4 @@ button {
     padding: 10px;
     color: var(--white);
 }
-
 </style>

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

@@ -17,3 +17,14 @@ export default {
         <slot />
     </div>
 </template>
+
+<style scoped>
+div {
+    display: flex;
+    flex-direction: column;
+    position: absolute;
+    background-color: var(--background-secondary);
+    border-radius: 0px 0px 10px 10px;
+    padding: 10px;
+}
+</style>

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

@@ -1,5 +1,20 @@
+<script>
+export default {
+    name: 'dropdownItem'
+}
+</script>
+
 <template>
     <div>
-        test
+        <slot></slot>
     </div>
 </template>
+
+<style scoped>
+div {
+    background-color: aliceblue;
+}
+h1 {
+    color: black !important;
+}
+</style>

17th Website/src/components/navigation/Navbar.vue

@@ -33,7 +33,7 @@ export default {
     </div>
 </template>
 
-<style>
+<style scoped>
 /* 
 COLOR PALLETE
 BLACK #1C1C21

17th Website/src/components/navigation/navitem.vue

@@ -41,7 +41,7 @@ export default {
 </template>
 
 
-<style>
+<style scoped>
 .button {
     color: var(--white);
     font-size: 30px;

17th Website/src/views/users.vue

@@ -56,10 +56,14 @@ export default {
                 
                 <dropdown>
                     <DropdownContent>
-                        <DropDownItem>Test1</DropDownItem>
+                        <DropdownItem>Item 1</DropdownItem>
+                        <DropdownItem>Item 2</DropdownItem>
+                        <DropdownItem>Item 3</DropdownItem>
                     </DropdownContent>
                 </dropdown>
 
+                <Icon icon="carbon:caret-down" />
+
                 <!-- This button needs to get finished -->
                 <button @click="resetFilters()">Clear Filters</button>
             </div>