From 11392e864e9bb0969d7a638148970b808e625ab7 Mon Sep 17 00:00:00 2001
From: Lance Edgar <lance@edbob.org>
Date: Wed, 6 Nov 2019 13:22:53 -0600
Subject: [PATCH] Add basic "menu" component, for typical use case

---
 src/components/index.js            |  2 +
 src/components/menu/ByjoveMenu.vue | 77 ++++++++++++++++++++++++++++++
 src/components/menu/index.js       |  3 ++
 3 files changed, 82 insertions(+)
 create mode 100644 src/components/menu/ByjoveMenu.vue
 create mode 100644 src/components/menu/index.js

diff --git a/src/components/index.js b/src/components/index.js
index ab2de1b..dc8c2fb 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -1,9 +1,11 @@
 import ByjoveApp from './app'
+import ByjoveMenu from './menu'
 import ByjoveLogo from './logo'
 import ByjoveFeedback from './feedback'
 
 export {
     ByjoveApp,
+    ByjoveMenu,
     ByjoveLogo,
     ByjoveFeedback,
 }
diff --git a/src/components/menu/ByjoveMenu.vue b/src/components/menu/ByjoveMenu.vue
new file mode 100644
index 0000000..6b80ddf
--- /dev/null
+++ b/src/components/menu/ByjoveMenu.vue
@@ -0,0 +1,77 @@
+<template>
+  <section>
+    <nav class="level is-mobile">
+      <div class="level-item">
+
+        <b-dropdown v-if="user"
+                    aria-role="list">
+          <button class="button is-primary"
+                  :class="{'is-danger': user.is_root}"
+                  slot="trigger">
+            <span>{{ user.short_name }}</span>
+            <!-- <b-icon icon="menu-down"></b-icon> -->
+          </button>
+
+          <b-dropdown-item aria-role="listitem" has-link>
+            <router-link to="/">Home</router-link>
+          </b-dropdown-item>
+
+          <slot></slot>
+
+          <b-dropdown-item aria-role="listitem" has-link>
+            <router-link to="/logout">Logout</router-link>
+          </b-dropdown-item>
+
+          <b-dropdown-item aria-role="listitem" has-link>
+            <router-link to="/about">About</router-link>
+          </b-dropdown-item>
+
+        </b-dropdown>
+
+        <b-button v-if="!user"
+                  type="is-primary"
+                  tag="router-link" to="/login">
+          Login
+        </b-button>
+      </div>
+
+      <div class="level-item">
+        {{ title }}
+      </div>
+
+      <div class="level-item">
+        <byjove-feedback :url="feedbackUrl"></byjove-feedback>
+      </div>
+    </nav>
+
+  </section>
+</template>
+
+<script>
+import ByjoveFeedback from '../feedback'
+export default {
+    name: 'ByjoveMenu',
+    props: {
+        appsettings: Object,
+        feedbackUrl: {
+            type: String,
+            default: '/api/feedback',
+        },
+    },
+    components: {
+        ByjoveFeedback,
+    },
+    computed: {
+        title: function() {
+            if (this.appsettings.production) {
+                return this.appsettings.systemTitle
+            } else {
+                return "[STAGE] " + this.appsettings.systemTitle
+            }
+        },
+        user: function() {
+            return this.$store.state.user
+        }
+    },
+}
+</script>
diff --git a/src/components/menu/index.js b/src/components/menu/index.js
new file mode 100644
index 0000000..a50a682
--- /dev/null
+++ b/src/components/menu/index.js
@@ -0,0 +1,3 @@
+import ByjoveMenu from './ByjoveMenu'
+
+export default ByjoveMenu