diff --git a/webui/src/App.vue b/webui/src/App.vue index 67813ed27bee647a2a0932e433d48047dd6c2344..900ba4f52f28723d4c3ba5e5770b9230de804b05 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'