From 6be390c795dae70bfe2e1bddcac8bcf5c0dc0ac6 Mon Sep 17 00:00:00 2001
From: Antoine Caron <Slashgear@users.noreply.github.com>
Date: Mon, 12 Aug 2019 17:48:04 +0200
Subject: [PATCH] feat(webui): add doc and version in navbar

---
 webui/src/App.vue | 66 +++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 66 insertions(+)

diff --git a/webui/src/App.vue b/webui/src/App.vue
index 67813ed27..900ba4f52 100644
--- a/webui/src/App.vue
+++ b/webui/src/App.vue
@@ -10,12 +10,78 @@
             height="28"
           />
         </a>
+
+        <a
+          :class="{ 'is-active': isActive }"
+          role="button"
+          class="navbar-burger burger"
+          aria-label="menu"
+          aria-expanded="false"
+          data-target="navbarBasicExample"
+          @click="toggle"
+        >
+          <span aria-hidden="true"></span>
+          <span aria-hidden="true"></span>
+          <span aria-hidden="true"></span>
+        </a>
+      </div>
+
+      <div
+        :class="{ 'is-active': isActive }"
+        class="navbar-menu"
+        v-if="version.Version"
+      >
+        <div class="navbar-start">
+          <a class="navbar-item" :href="documentationUrl">
+            Documentation
+          </a>
+        </div>
+
+        <div class="navbar-end">
+          <div class="navbar-item">Version: {{ version.Version }}</div>
+        </div>
       </div>
     </nav>
     <router-view />
   </div>
 </template>
 
+<script>
+export default {
+  name: "App",
+  data: () => ({
+    version: {},
+    isActive: false
+  }),
+  computed: {
+    parsedVersion() {
+      if (this.version.Version === "dev") {
+        return "master";
+      } else {
+        const matches = this.version.Version.match(/^(v?\d+\.\d+)/);
+        return matches ? matches[1] : "master";
+      }
+    },
+    documentationUrl() {
+      return `https://docs.traefik.io/${this.parsedVersion}`;
+    }
+  },
+  created() {
+    this.fetchVersion();
+  },
+  methods: {
+    fetchVersion() {
+      return fetch("/api/version")
+        .then(response => response.json())
+        .then(response => (this.version = response));
+    },
+    toggle() {
+      this.isActive = !this.isActive;
+    }
+  }
+};
+</script>
+
 <style lang="sass">
 
 @import 'styles/typography'