From ff45cebd69e1ab288bf6b59e3a3da77d2502b549 Mon Sep 17 00:00:00 2001
From: Haris Razis <dev@xrazis.com>
Date: Tue, 5 Jan 2021 11:58:52 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9E=95=20Add=20Navbar.vue?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/assets/undraw_server_q2pb.svg |  1 +
 web/src/components/HelloWorld.vue     | 64 ---------------------------
 web/src/components/Navbar.vue         | 40 +++++++++++++++++
 3 files changed, 41 insertions(+), 64 deletions(-)
 create mode 100644 web/src/assets/undraw_server_q2pb.svg
 delete mode 100644 web/src/components/HelloWorld.vue
 create mode 100644 web/src/components/Navbar.vue

diff --git a/web/src/assets/undraw_server_q2pb.svg b/web/src/assets/undraw_server_q2pb.svg
new file mode 100644
index 0000000..0a4fe12
--- /dev/null
+++ b/web/src/assets/undraw_server_q2pb.svg
@@ -0,0 +1 @@
+<svg id="d208afe9-d246-44b1-9723-4e792280c828" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="904" height="754.77" viewBox="0 0 904 754.77"><defs><linearGradient id="d0586609-2d1f-4894-831f-bc1bf1cfe805" x1="205.5" y1="458.72" x2="205.5" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="gray" stop-opacity="0.25"/><stop offset="0.54" stop-color="gray" stop-opacity="0.12"/><stop offset="1" stop-color="gray" stop-opacity="0.1"/></linearGradient><linearGradient id="dc1a1433-8955-4fce-8d84-3a5c46e8d5cb" x1="347.94" y1="120.14" x2="347.94" y2="40.02" xlink:href="#d0586609-2d1f-4894-831f-bc1bf1cfe805"/><linearGradient id="6583b9bd-7f21-4a55-b428-c52c7257def0" x1="347.94" y1="269.14" x2="347.94" y2="189.02" xlink:href="#d0586609-2d1f-4894-831f-bc1bf1cfe805"/><linearGradient id="d5bb9150-ad00-4040-8c31-39c92932ad3e" x1="347.94" y1="417.14" x2="347.94" y2="337.02" xlink:href="#d0586609-2d1f-4894-831f-bc1bf1cfe805"/><linearGradient id="43ab44a3-beba-4304-ae82-955b08a7fed3" x1="660.91" y1="754.77" x2="660.91" y2="737.77" xlink:href="#d0586609-2d1f-4894-831f-bc1bf1cfe805"/><linearGradient id="e180fe82-c096-4b7f-a7fc-e0d67eafb4b3" x1="810" y1="732" x2="810" y2="417" xlink:href="#d0586609-2d1f-4894-831f-bc1bf1cfe805"/></defs><title>server</title><rect width="411" height="458.72" fill="url(#d0586609-2d1f-4894-831f-bc1bf1cfe805)"/><rect x="6.79" y="306.27" width="397.41" height="142.46" fill="#fff"/><rect x="39.41" y="340.06" width="15.4" height="73" fill="#64ffda"/><g opacity="0.7"><rect x="69.81" y="340.06" width="15.4" height="73" fill="#64ffda"/></g><g opacity="0.6"><rect x="100.22" y="340.06" width="15.4" height="73" fill="#64ffda"/></g><g opacity="0.5"><rect x="130.62" y="340.06" width="15.4" height="73" fill="#64ffda"/></g><g opacity="0.5"><rect x="161.02" y="340.06" width="15.4" height="73" fill="#64ffda"/></g><g opacity="0.4"><rect x="191.42" y="340.06" width="15.4" height="73" fill="#64ffda"/></g><g opacity="0.3"><rect x="221.83" y="340.06" width="15.4" height="73" fill="#64ffda"/></g><circle cx="347.94" cy="376.09" r="37.16" fill="#00d1b2"/><rect x="6.79" y="158.26" width="397.41" height="142.46" fill="#fff"/><rect x="39.41" y="192.05" width="15.4" height="73" fill="#64ffda"/><g opacity="0.7"><rect x="69.81" y="192.05" width="15.4" height="73" fill="#64ffda"/></g><g opacity="0.6"><rect x="100.22" y="192.05" width="15.4" height="73" fill="#64ffda"/></g><g opacity="0.5"><rect x="130.62" y="192.05" width="15.4" height="73" fill="#64ffda"/></g><g opacity="0.5"><rect x="161.02" y="192.05" width="15.4" height="73" fill="#64ffda"/></g><g opacity="0.4"><rect x="191.42" y="192.05" width="15.4" height="73" fill="#64ffda"/></g><g opacity="0.3"><rect x="221.83" y="192.05" width="15.4" height="73" fill="#64ffda"/></g><circle cx="347.94" cy="228.09" r="37.16" fill="#00d1b2"/><rect x="6.79" y="10.25" width="397.41" height="142.46" fill="#fff"/><rect x="39.41" y="44.05" width="15.4" height="73" fill="#64ffda"/><g opacity="0.7"><rect x="69.81" y="44.05" width="15.4" height="73" fill="#64ffda"/></g><g opacity="0.6"><rect x="100.22" y="44.05" width="15.4" height="73" fill="#64ffda"/></g><g opacity="0.5"><rect x="130.62" y="44.05" width="15.4" height="73" fill="#64ffda"/></g><g opacity="0.5"><rect x="161.02" y="44.05" width="15.4" height="73" fill="#64ffda"/></g><g opacity="0.4"><rect x="191.42" y="44.05" width="15.4" height="73" fill="#64ffda"/></g><g opacity="0.3"><rect x="221.83" y="44.05" width="15.4" height="73" fill="#64ffda"/></g><circle cx="347.94" cy="80.08" r="40.06" fill="url(#dc1a1433-8955-4fce-8d84-3a5c46e8d5cb)"/><circle cx="347.94" cy="229.08" r="40.06" fill="url(#6583b9bd-7f21-4a55-b428-c52c7257def0)"/><circle cx="347.94" cy="377.08" r="40.06" fill="url(#d5bb9150-ad00-4040-8c31-39c92932ad3e)"/><circle cx="347.94" cy="80.08" r="37.16" fill="#00d1b2"/><g opacity="0.7"><line x1="461" y1="158.67" x2="467" y2="158.67" fill="none" stroke="#00d1b2" stroke-linecap="round" stroke-linejoin="round" stroke-width="4"/><line x1="500.38" y1="158.67" x2="667.31" y2="158.67" fill="none" stroke="#00d1b2" stroke-linecap="round" stroke-linejoin="round" stroke-width="4" stroke-dasharray="12.52 33.38"/><polyline points="684 158.67 690 158.67 690 164.67" fill="none" stroke="#00d1b2" stroke-linecap="round" stroke-linejoin="round" stroke-width="4"/><line x1="690" y1="196.48" x2="690" y2="311.77" fill="none" stroke="#00d1b2" stroke-linecap="round" stroke-linejoin="round" stroke-width="4" stroke-dasharray="11.93 31.8"/><line x1="690" y1="327.67" x2="690" y2="333.67" fill="none" stroke="#00d1b2" stroke-linecap="round" stroke-linejoin="round" stroke-width="4"/></g><g opacity="0.7"><line x1="367.58" y1="611.67" x2="361.58" y2="611.64" fill="none" stroke="#00d1b2" stroke-linecap="round" stroke-linejoin="round" stroke-width="4"/><line x1="328.2" y1="611.48" x2="161.28" y2="610.68" fill="none" stroke="#00d1b2" stroke-linecap="round" stroke-linejoin="round" stroke-width="4" stroke-dasharray="12.52 33.38"/><polyline points="144.58 610.61 138.58 610.58 138.62 604.58" fill="none" stroke="#00d1b2" stroke-linecap="round" stroke-linejoin="round" stroke-width="4"/><line x1="138.82" y1="573.79" x2="139.28" y2="504.52" fill="none" stroke="#00d1b2" stroke-linecap="round" stroke-linejoin="round" stroke-width="4" stroke-dasharray="11.55 30.79"/><line x1="139.38" y1="489.12" x2="139.42" y2="483.12" fill="none" stroke="#00d1b2" stroke-linecap="round" stroke-linejoin="round" stroke-width="4"/></g><path d="M869.21,703.08s11.92,80.48,82.27,107.31h-285c70.35-26.83,82.27-107.31,82.27-107.31Z" transform="translate(-148 -72.62)" fill="#e0e0e0"/><rect x="517.09" y="737.77" width="287.65" height="17" fill="url(#43ab44a3-beba-4304-ae82-955b08a7fed3)"/><rect x="518.52" y="737.77" width="284.96" height="13.12" fill="#f5f5f5"/><path d="M1041.25,417H578.75A10.75,10.75,0,0,0,568,427.75V719.14A12.86,12.86,0,0,0,580.86,732h458.28A12.86,12.86,0,0,0,1052,719.14V427.75A10.75,10.75,0,0,0,1041.25,417Z" transform="translate(-148 -72.62)" fill="url(#e180fe82-c096-4b7f-a7fc-e0d67eafb4b3)"/><path d="M436.57,348.78H885.43a10.75,10.75,0,0,1,10.75,10.75V609a0,0,0,0,1,0,0H425.82a0,0,0,0,1,0,0V359.54A10.75,10.75,0,0,1,436.57,348.78Z" fill="#fff"/><path d="M1031.32,724.54H586.68a12.86,12.86,0,0,1-12.86-12.86V681.62h470.36v30.06A12.86,12.86,0,0,1,1031.32,724.54Z" transform="translate(-148 -72.62)" fill="#f5f5f5"/><rect x="449.07" y="369.86" width="425.65" height="210.06" fill="#00d1b2"/><polygon points="465.91 383.8 874.99 383.8 874.99 369.79 449.34 369.79 449.34 579.85 465.91 579.85 465.91 383.8" fill="#fff" opacity="0.2"/></svg>
\ No newline at end of file
diff --git a/web/src/components/HelloWorld.vue b/web/src/components/HelloWorld.vue
deleted file mode 100644
index 3590836..0000000
--- a/web/src/components/HelloWorld.vue
+++ /dev/null
@@ -1,64 +0,0 @@
-<template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-    <p>
-      For a guide and recipes on how to configure / customize this project,<br>
-      check out the
-      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
-    </p>
-    <h3>Installed CLI Plugins</h3>
-    <ul>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router" target="_blank" rel="noopener">router</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-vuex" target="_blank" rel="noopener">vuex</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-typescript" target="_blank" rel="noopener">typescript</a></li>
-    </ul>
-    <h3>Essential Links</h3>
-    <ul>
-      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
-      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
-      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
-      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
-      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
-    </ul>
-    <h3>Ecosystem</h3>
-    <ul>
-      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
-      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
-      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
-      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
-      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
-    </ul>
-  </div>
-</template>
-
-<script lang="ts">
-import { Options, Vue } from 'vue-class-component';
-
-@Options({
-  props: {
-    msg: String
-  }
-})
-export default class HelloWorld extends Vue {
-  msg!: string
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-h3 {
-  margin: 40px 0 0;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>
diff --git a/web/src/components/Navbar.vue b/web/src/components/Navbar.vue
new file mode 100644
index 0000000..d4cd1f8
--- /dev/null
+++ b/web/src/components/Navbar.vue
@@ -0,0 +1,40 @@
+<template>
+  <nav class="navbar is-dark" role="navigation" aria-label="main navigation">
+    <div class="navbar-brand">
+      <a class="navbar-item" href="/" >
+        <img src="../assets/undraw_server_q2pb.svg" width="60" height="150" />
+        <h3 class="is-size-4">Ichnaea</h3>
+      </a>
+
+      <a
+          role="button"
+          class="navbar-burger burger"
+          aria-label="menu"
+          aria-expanded="false"
+          data-target="navbarBasicExample"
+      >
+        <span aria-hidden="true"></span>
+        <span aria-hidden="true"></span>
+        <span aria-hidden="true"></span>
+      </a>
+    </div>
+
+    <div id="navbarBasicExample" class="navbar-menu">
+      <div class="navbar-end">
+        <a class="navbar-item" href="https://github.com/xrazis/ichnaea" target="_blank">
+          Documentation
+        </a>
+      </div>
+    </div>
+  </nav>
+</template>
+<script lang="ts">
+import {Vue} from "vue-class-component";
+
+export default class Navbar extends Vue {
+}
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file