switched back to js, added navbar with burger toggle

1 files changed, 63 insertions, 0 deletions

diff --git a/iridescence/src/components/Navbar.vue b/iridescence/src/components/Navbar.vue
new file mode 100644
index 0000000..bf287b2
--- /dev/null
+++ b/iridescence/src/components/Navbar.vue
@@ -0,0 +1,63 @@
+<template>
+  <div id="navbar">
+    <nav class="navbar">
+      <div class="navbar-brand">
+        <div class="navbar-item">
+          <img src="@/assets/logo.png" />
+        </div>
+        <a class="navbar-burger burger" v-on:click="toggleNavMenu">
+          <span></span>
+          <span></span>
+          <span></span>
+        </a>
+      </div>
+      <div :class="navMenu">
+        <div class="navbar-start">
+          <a class="navbar-item">
+            <router-link to="/">Home</router-link>
+          </a>
+          <a class="navbar-item">
+            <router-link to="/about">About</router-link>
+          </a>
+        </div>
+        <div class="navbar-end">
+          <div class="navbar-item">
+            <div class="buttons">
+              <button class="button">
+                Cart (5)
+              </button>
+              <button class="button is-primary">
+                Checkout
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </nav>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Navbar",
+  data() {
+    return {
+      isMenuActive: false
+    };
+  },
+  computed: {
+    navMenu() {
+      if (this.isMenuActive) {
+        return "navbar-menu is-active";
+      } else {
+        return "navbar-menu";
+      }
+    }
+  },
+  methods: {
+    toggleNavMenu() {
+      this.isMenuActive = !this.isMenuActive;
+    }
+  }
+};
+</script>