switched back to js, added navbar with burger toggle

11 files changed, 81 insertions, 189 deletions

diff --git a/iridescence/src/App.vue b/iridescence/src/App.vue
index 0228dd3..aee2f10 100644
--- a/iridescence/src/App.vue
+++ b/iridescence/src/App.vue
@@ -1,32 +1,21 @@
 <template>
   <div id="app">
-    <div id="nav">
-      <router-link to="/">Home</router-link> |
-      <router-link to="/about">About</router-link>
-    </div>
+    <Navbar></Navbar>
     <router-view />
   </div>
 </template>
 
-<style lang="scss">
-#app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-}
-
-#nav {
-  padding: 30px;
-
-  a {
-    font-weight: bold;
-    color: #2c3e50;
+<script>
+import Navbar from "@/components/Navbar.vue";
 
-    &.router-link-exact-active {
-      color: #42b983;
-    }
+export default {
+  name: "App",
+  components: {
+    Navbar
   }
-}
+};
+</script>
+
+<style lang="scss">
+@import "../node_modules/bulma/bulma.sass";
 </style>
diff --git a/iridescence/src/assets/logo.png b/iridescence/src/assets/logo.png
index f3d2503..892376b 100644
--- a/iridescence/src/assets/logo.png
+++ b/iridescence/src/assets/logo.png
diff --git a/iridescence/src/assets/logo_sm.png b/iridescence/src/assets/logo_sm.png
new file mode 100644
index 0000000..b74ccfd
--- /dev/null
+++ b/iridescence/src/assets/logo_sm.png
diff --git a/iridescence/src/components/HelloWorld.vue b/iridescence/src/components/HelloWorld.vue
deleted file mode 100644
index 86668ba..0000000
--- a/iridescence/src/components/HelloWorld.vue
+++ /dev/null
@@ -1,138 +0,0 @@
-<template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-    <p>
-      For a guide and recipes on how to configure / customize this project,<br />
-      check out the
-      <a href="https://cli.vuejs.org" target="_blank" rel="noopener"
-        >vue-cli documentation</a
-      >.
-    </p>
-    <h3>Installed CLI Plugins</h3>
-    <ul>
-      <li>
-        <a
-          href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel"
-          target="_blank"
-          rel="noopener"
-          >babel</a
-        >
-      </li>
-      <li>
-        <a
-          href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-typescript"
-          target="_blank"
-          rel="noopener"
-          >typescript</a
-        >
-      </li>
-      <li>
-        <a
-          href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router"
-          target="_blank"
-          rel="noopener"
-          >router</a
-        >
-      </li>
-      <li>
-        <a
-          href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-vuex"
-          target="_blank"
-          rel="noopener"
-          >vuex</a
-        >
-      </li>
-      <li>
-        <a
-          href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint"
-          target="_blank"
-          rel="noopener"
-          >eslint</a
-        >
-      </li>
-    </ul>
-    <h3>Essential Links</h3>
-    <ul>
-      <li>
-        <a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a>
-      </li>
-      <li>
-        <a href="https://forum.vuejs.org" target="_blank" rel="noopener"
-          >Forum</a
-        >
-      </li>
-      <li>
-        <a href="https://chat.vuejs.org" target="_blank" rel="noopener"
-          >Community Chat</a
-        >
-      </li>
-      <li>
-        <a href="https://twitter.com/vuejs" target="_blank" rel="noopener"
-          >Twitter</a
-        >
-      </li>
-      <li>
-        <a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a>
-      </li>
-    </ul>
-    <h3>Ecosystem</h3>
-    <ul>
-      <li>
-        <a href="https://router.vuejs.org" target="_blank" rel="noopener"
-          >vue-router</a
-        >
-      </li>
-      <li>
-        <a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a>
-      </li>
-      <li>
-        <a
-          href="https://github.com/vuejs/vue-devtools#vue-devtools"
-          target="_blank"
-          rel="noopener"
-          >vue-devtools</a
-        >
-      </li>
-      <li>
-        <a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener"
-          >vue-loader</a
-        >
-      </li>
-      <li>
-        <a
-          href="https://github.com/vuejs/awesome-vue"
-          target="_blank"
-          rel="noopener"
-          >awesome-vue</a
-        >
-      </li>
-    </ul>
-  </div>
-</template>
-
-<script lang="ts">
-import { Component, Prop, Vue } from "vue-property-decorator";
-
-@Component
-export default class HelloWorld extends Vue {
-  @Prop() private msg!: string;
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped lang="scss">
-h3 {
-  margin: 40px 0 0;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>
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>
diff --git a/iridescence/src/main.ts b/iridescence/src/main.js
index 3a47006..3a47006 100644
--- a/iridescence/src/main.ts
+++ b/iridescence/src/main.js
diff --git a/iridescence/src/router/index.ts b/iridescence/src/router/index.js
index 8716a04..3d5155d 100644
--- a/iridescence/src/router/index.ts
+++ b/iridescence/src/router/index.js
@@ -1,10 +1,10 @@
 import Vue from "vue";
-import VueRouter, { RouteConfig } from "vue-router";
+import VueRouter from "vue-router";
 import Home from "../views/Home.vue";
 
 Vue.use(VueRouter);
 
-const routes: Array<RouteConfig> = [
+const routes = [
   {
     path: "/",
     name: "Home",
diff --git a/iridescence/src/shims-tsx.d.ts b/iridescence/src/shims-tsx.d.ts
deleted file mode 100644
index 2bcdf9f..0000000
--- a/iridescence/src/shims-tsx.d.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import Vue, { VNode } from "vue";
-
-declare global {
-  namespace JSX {
-    // tslint:disable no-empty-interface
-    interface Element extends VNode {}
-    // tslint:disable no-empty-interface
-    interface ElementClass extends Vue {}
-    interface IntrinsicElements {
-      [elem: string]: any;
-    }
-  }
-}
diff --git a/iridescence/src/shims-vue.d.ts b/iridescence/src/shims-vue.d.ts
deleted file mode 100644
index 0660bd6..0000000
--- a/iridescence/src/shims-vue.d.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-declare module "*.vue" {
-  import Vue from "vue";
-  export default Vue;
-}
diff --git a/iridescence/src/store/index.ts b/iridescence/src/store/index.js
index fb6015f..fb6015f 100644
--- a/iridescence/src/store/index.ts
+++ b/iridescence/src/store/index.js
diff --git a/iridescence/src/views/Home.vue b/iridescence/src/views/Home.vue
index 191049e..1197e75 100644
--- a/iridescence/src/views/Home.vue
+++ b/iridescence/src/views/Home.vue
@@ -1,18 +1,13 @@
 <template>
   <div class="home">
-    <img alt="Vue logo" src="../assets/logo.png" />
-    <HelloWorld msg="Welcome to Your Vue.js App" />
+    <figure class="image is-128x128">
+      <img alt="The Glassy Ladies" src="../assets/logo.png" />
+    </figure>
   </div>
 </template>
 
 <script>
-// @ is an alias to /src
-import HelloWorld from "@/components/HelloWorld.vue";
-
 export default {
-  name: "Home",
-  components: {
-    HelloWorld
-  }
+  name: "Home"
 };
 </script>