From 6e787a89e0c40f42d51681c960a18818650646b7 Mon Sep 17 00:00:00 2001
From: Adam Carpenter <atc@53hor.net>
Date: Thu, 23 Apr 2020 08:07:35 -0400
Subject: switched back to js, added navbar with burger toggle

---
 iridescence/src/App.vue                   |  35 +++-----
 iridescence/src/assets/logo.png           | Bin 6849 -> 603239 bytes
 iridescence/src/assets/logo_sm.png        | Bin 0 -> 98670 bytes
 iridescence/src/components/HelloWorld.vue | 138 ------------------------------
 iridescence/src/components/Navbar.vue     |  63 ++++++++++++++
 iridescence/src/main.js                   |  12 +++
 iridescence/src/main.ts                   |  12 ---
 iridescence/src/router/index.js           |  30 +++++++
 iridescence/src/router/index.ts           |  30 -------
 iridescence/src/shims-tsx.d.ts            |  13 ---
 iridescence/src/shims-vue.d.ts            |   4 -
 iridescence/src/store/index.js            |  11 +++
 iridescence/src/store/index.ts            |  11 ---
 iridescence/src/views/Home.vue            |  13 +--
 14 files changed, 132 insertions(+), 240 deletions(-)
 create mode 100644 iridescence/src/assets/logo_sm.png
 delete mode 100644 iridescence/src/components/HelloWorld.vue
 create mode 100644 iridescence/src/components/Navbar.vue
 create mode 100644 iridescence/src/main.js
 delete mode 100644 iridescence/src/main.ts
 create mode 100644 iridescence/src/router/index.js
 delete mode 100644 iridescence/src/router/index.ts
 delete mode 100644 iridescence/src/shims-tsx.d.ts
 delete mode 100644 iridescence/src/shims-vue.d.ts
 create mode 100644 iridescence/src/store/index.js
 delete mode 100644 iridescence/src/store/index.ts

(limited to 'iridescence/src')

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
Binary files a/iridescence/src/assets/logo.png and b/iridescence/src/assets/logo.png differ
diff --git a/iridescence/src/assets/logo_sm.png b/iridescence/src/assets/logo_sm.png
new file mode 100644
index 0000000..b74ccfd
Binary files /dev/null and b/iridescence/src/assets/logo_sm.png differ
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.js b/iridescence/src/main.js
new file mode 100644
index 0000000..3a47006
--- /dev/null
+++ b/iridescence/src/main.js
@@ -0,0 +1,12 @@
+import Vue from "vue";
+import App from "./App.vue";
+import router from "./router";
+import store from "./store";
+
+Vue.config.productionTip = false;
+
+new Vue({
+  router,
+  store,
+  render: h => h(App)
+}).$mount("#app");
diff --git a/iridescence/src/main.ts b/iridescence/src/main.ts
deleted file mode 100644
index 3a47006..0000000
--- a/iridescence/src/main.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import Vue from "vue";
-import App from "./App.vue";
-import router from "./router";
-import store from "./store";
-
-Vue.config.productionTip = false;
-
-new Vue({
-  router,
-  store,
-  render: h => h(App)
-}).$mount("#app");
diff --git a/iridescence/src/router/index.js b/iridescence/src/router/index.js
new file mode 100644
index 0000000..3d5155d
--- /dev/null
+++ b/iridescence/src/router/index.js
@@ -0,0 +1,30 @@
+import Vue from "vue";
+import VueRouter from "vue-router";
+import Home from "../views/Home.vue";
+
+Vue.use(VueRouter);
+
+const routes = [
+  {
+    path: "/",
+    name: "Home",
+    component: Home
+  },
+  {
+    path: "/about",
+    name: "About",
+    // route level code-splitting
+    // this generates a separate chunk (about.[hash].js) for this route
+    // which is lazy-loaded when the route is visited.
+    component: () =>
+      import(/* webpackChunkName: "about" */ "../views/About.vue")
+  }
+];
+
+const router = new VueRouter({
+  mode: "history",
+  base: process.env.BASE_URL,
+  routes
+});
+
+export default router;
diff --git a/iridescence/src/router/index.ts b/iridescence/src/router/index.ts
deleted file mode 100644
index 8716a04..0000000
--- a/iridescence/src/router/index.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-import Vue from "vue";
-import VueRouter, { RouteConfig } from "vue-router";
-import Home from "../views/Home.vue";
-
-Vue.use(VueRouter);
-
-const routes: Array<RouteConfig> = [
-  {
-    path: "/",
-    name: "Home",
-    component: Home
-  },
-  {
-    path: "/about",
-    name: "About",
-    // route level code-splitting
-    // this generates a separate chunk (about.[hash].js) for this route
-    // which is lazy-loaded when the route is visited.
-    component: () =>
-      import(/* webpackChunkName: "about" */ "../views/About.vue")
-  }
-];
-
-const router = new VueRouter({
-  mode: "history",
-  base: process.env.BASE_URL,
-  routes
-});
-
-export default router;
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.js b/iridescence/src/store/index.js
new file mode 100644
index 0000000..fb6015f
--- /dev/null
+++ b/iridescence/src/store/index.js
@@ -0,0 +1,11 @@
+import Vue from "vue";
+import Vuex from "vuex";
+
+Vue.use(Vuex);
+
+export default new Vuex.Store({
+  state: {},
+  mutations: {},
+  actions: {},
+  modules: {}
+});
diff --git a/iridescence/src/store/index.ts b/iridescence/src/store/index.ts
deleted file mode 100644
index fb6015f..0000000
--- a/iridescence/src/store/index.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import Vue from "vue";
-import Vuex from "vuex";
-
-Vue.use(Vuex);
-
-export default new Vuex.Store({
-  state: {},
-  mutations: {},
-  actions: {},
-  modules: {}
-});
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>
-- 
cgit v1.2.3