From 57eaaf25f7ed0567cbea15dc65a8b8998ef26f78 Mon Sep 17 00:00:00 2001
From: John Cleaver <cleaver.john.k@gmail.com>
Date: Thu, 26 Apr 2018 22:53:52 -0400
Subject: [PATCH] Add navigvation for bundles.

---
 src/components/BundleNav.vue | 52 ++++++++++++++++++++++++++++++++++++
 1 file changed, 52 insertions(+)
 create mode 100644 src/components/BundleNav.vue

diff --git a/src/components/BundleNav.vue b/src/components/BundleNav.vue
new file mode 100644
index 0000000..381887d
--- /dev/null
+++ b/src/components/BundleNav.vue
@@ -0,0 +1,52 @@
+<template>
+  <section class="container">
+    <nav class="navbar">
+      <div class="navbar-brand">
+        <div class="navbar-burger burger"
+              v-bind:class="{ 'is-active': menu_active }"
+              @click="menu_active = !menu_active"
+        >
+          <span></span>
+          <span></span>
+          <span></span>
+        </div>
+      </div>
+
+      <div class="navbar-menu" v-bind:class="{ 'is-active': menu_active }">
+        <div class="navbar-start">
+          <div class="navbar-item has-dropdown is-hoverable" v-for="room in rooms" :key="room.id">
+            <a class="navbar-link">
+              {{room.name}}
+            </a>
+            <div class="navbar-dropdown">
+              <router-link
+                class="navbar-item"
+                v-for="bundle in room.bundles"
+                :key="bundle.id"
+                @click.native="menu_active = false"
+                :to="{ name: 'bundle-items', params: { id: bundle.id }}">
+                {{bundle.name}}
+              </router-link>
+            </div>
+          </div>
+        </div>
+      </div>
+    </nav>
+  </section>
+
+</template>
+
+<script>
+import { mapState } from 'vuex'
+export default {
+  name: 'bundle_nav',
+  data: function () {
+    return {
+      menu_active: false
+    }
+  },
+  computed: {
+    ...mapState(['rooms'])
+  }
+}
+</script>