Add a new dashboard page.

webui/src/components/_commons/NavBar.vue

@@ -0,0 +1,97 @@
+<template>
+  <q-header class="shadow-1">
+    <section class="app-section bg-primary text-white">
+      <div class="app-section-wrap app-boxed app-boxed-xl">
+        <q-toolbar class="row no-wrap items-center">
+          <div class="q-pr-md logo">
+            <img alt="logo" src="~assets/logo.svg">
+          </div>
+          <q-tabs align="left" inline-label indicator-color="transparent" active-color="white" stretch>
+            <q-route-tab to="/" icon="eva-home-outline" no-caps label="Dashboard" />
+          </q-tabs>
+          <q-space />
+          <q-btn type="a" :href="`https://docs.traefik.io/${parsedVersion}`" target="_blank" stretch flat no-caps label="Documentation" class="btn-menu" />
+          <q-btn v-if="version" type="a" href="https://github.com/containous/traefik/" target="_blank" stretch flat no-caps :label="`${name} ${version}`" class="btn-menu" />
+        </q-toolbar>
+      </div>
+    </section>
+
+    <section class="app-section bg-white text-black">
+      <div class="app-section-wrap app-boxed app-boxed-xl">
+        <slot />
+      </div>
+    </section>
+  </q-header>
+</template>
+
+<script>
+import config from '../../../package'
+import { mapActions, mapGetters } from 'vuex'
+
+export default {
+  name: 'NavBar',
+  data () {
+    return {
+    }
+  },
+  computed: {
+    ...mapGetters('core', { coreVersion: 'version' }),
+    version () {
+      return this.coreVersion.Version
+    },
+    parsedVersion () {
+      if (this.version === undefined) {
+        return 'master'
+      }
+      if (this.version === 'dev') {
+        return 'master'
+      }
+      const matches = this.version.match(/^(v?\d+\.\d+)/)
+      return matches ? 'v' + matches[1] : 'master'
+    },
+    name () {
+      return config.productName
+    }
+  },
+  methods: {
+    ...mapActions('core', { getVersion: 'getVersion' })
+  },
+  created () {
+    this.getVersion()
+  }
+}
+</script>
+
+<style scoped lang="scss">
+  @import "../../css/sass/variables";
+
+  .q-toolbar {
+    min-height: 64px;
+  }
+
+  .logo {
+    display: inline-block;
+    img {
+      height: 24px;
+    }
+  }
+
+  .q-tabs {
+    color: rgba( $app-text-white, .4 );
+    /deep/ .q-tabs__content {
+      .q-tab__content{
+        min-width: 100%;
+        .q-tab__label {
+          font-size: 16px;
+          font-weight: 600;
+        }
+      }
+    }
+  }
+
+  .btn-menu{
+    color: rgba( $app-text-white, .4 );
+    font-size: 16px;
+    font-weight: 600;
+  }
+</style>