playing with filtering by category

2 files changed, 35 insertions, 6 deletions

diff --git a/iridescence/src/components/InventorySearch.vue b/iridescence/src/components/InventorySearch.vue
index e9da6f6..6145246 100644
--- a/iridescence/src/components/InventorySearch.vue
+++ b/iridescence/src/components/InventorySearch.vue
@@ -14,11 +14,12 @@
       <div class="control">
         <div class="select is-primary is-medium">
           <select>
-            <option>(Sort by...)</option>
-            <option>Age (Oldest to Newest)</option>
-            <option>Name</option>
-            <option>Price (Low to High)</option>
-            <option>Price (High to Low)</option>
+            <option>Featured</option>
+            <option>Name/A-Z</option>
+            <option>Newest to Oldest</option>
+            <option>Oldest to Newest</option>
+            <option>Low to High</option>
+            <option>High to Low</option>
           </select>
         </div>
       </div>
diff --git a/iridescence/src/components/Navbar.vue b/iridescence/src/components/Navbar.vue
index b83834a..8c2f0a6 100644
--- a/iridescence/src/components/Navbar.vue
+++ b/iridescence/src/components/Navbar.vue
@@ -1,6 +1,6 @@
 <template>
   <div id="navbar">
-    <nav class="navbar is-primary">
+    <nav class="navbar is-fixed-top is-transparent">
       <div class="navbar-brand">
         <div class="navbar-item">
           <img src="@/assets/logo.png" />
@@ -26,6 +26,24 @@
           </router-link>
         </div>
         <div class="navbar-end">
+          <div
+            class="navbar-item has-dropdown is-active"
+            v-for="category in categories.keys()"
+            :key="category"
+          >
+            <div class="navbar-link">
+              {{ category }}
+            </div>
+
+            <div
+              class="navbar-dropdown"
+              v-for="subcategory in categories.get(category)"
+              :key="subcategory"
+            >
+              {{ subcategory }}
+            </div>
+          </div>
+
           <div class="navbar-item">
             <div class="buttons">
               <button class="button">
@@ -43,6 +61,8 @@
 </template>
 
 <script>
+import Category from "~models/category.js";
+
 export default {
   name: "Navbar",
   data() {
@@ -57,6 +77,14 @@ export default {
       } else {
         return "navbar-menu";
       }
+    },
+    categories() {
+      const inventory = this.$store.getters.inventory;
+      console.log(inventory);
+      console.log(inventory.map(item => item.categories));
+
+      //console.log(cats);
+      return [];
     }
   },
   methods: {