Build system integration using vue-cli.

[github/bastienwirtz/homer.git] / src / components / Navbar.vue

diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue
new file mode 100644 (file)
index 0000000..a64ff3b
--- /dev/null
+++ b/src/components/Navbar.vue
@@ -0,0 +1,66 @@
+<template>
+  <div v-cloak v-if="links" class="container-fluid">
+    <nav class="navbar" role="navigation" aria-label="main navigation">
+      <div class="container">
+        <div class="navbar-brand">
+          <a
+            role="button"
+            aria-label="menu"
+            aria-expanded="false"
+            class="navbar-burger"
+            :class="{ 'is-active': showMenu }"
+            v-on:click="$emit('navbar:toggle')"
+          >
+            <span aria-hidden="true"></span>
+            <span aria-hidden="true"></span>
+            <span aria-hidden="true"></span>
+          </a>
+        </div>
+        <div class="navbar-menu" :class="{ 'is-active': showMenu }">
+          <div class="navbar-start">
+            <a
+              class="navbar-item"
+              v-for="link in links"
+              :key="link.url"
+              :href="link.url"
+              :target="link.target"
+            >
+              <i
+                v-if="link.icon"
+                style="margin-right: 6px;"
+                :class="link.icon"
+              ></i>
+              {{ link.name }}
+            </a>
+          </div>
+          <div class="navbar-end">
+            <slot></slot>
+          </div>
+        </div>
+      </div>
+    </nav>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Navbar",
+  props: {
+    open: {
+      type: Boolean,
+      default: false,
+    },
+    links: Array,
+  },
+  computed: {
+    showMenu: function () {
+      return this.open && this.isSmallScreen();
+    },
+  },
+  methods: {
+    isSmallScreen: function () {
+      return window.matchMedia("screen and (max-width: 1023px)").matches;
+    },
+  },
+};
+</script>