From 94d2a98b961bdf2302fc4bb4b41b476b3feeb9aa Mon Sep 17 00:00:00 2001
From: Michael Weimann <mail@michael-weimann.eu>
Date: Sun, 19 Sep 2021 16:38:43 +0200
Subject: [PATCH] apply navbar style #15

---
 src/App.vue                                   | 15 +----
 src/{views/partials => components}/Footer.vue |  0
 src/{views/partials => components}/Navbar.vue | 56 ++++++++++++++++---
 3 files changed, 49 insertions(+), 22 deletions(-)
 rename src/{views/partials => components}/Footer.vue (100%)
 rename src/{views/partials => components}/Navbar.vue (66%)

diff --git a/src/App.vue b/src/App.vue
index 269650f..2727711 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -12,8 +12,8 @@ SPDX-License-Identifier: AGPL-3.0-or-later
   <Footer />
 </template>
 <script>
-import Footer from '@/views/partials/Footer.vue'
-import Navbar from '@/views/partials/Navbar.vue'
+import Footer from '@/components/Footer.vue'
+import Navbar from '@/components/Navbar.vue'
 
 export default {
   name: "App",
@@ -23,9 +23,7 @@ export default {
   },
   data() {
     return {
-      showMobileNavbar: false,
       memberId: null,
-      searchText: "",
     };
   },
   created() {
@@ -34,14 +32,5 @@ export default {
   updated() {
     this.memberId = localStorage.getItem("user_id");
   },
-  methods: {
-    logout() {
-      localStorage.clear();
-      this.$router.push({ path: "/" });
-    },
-    searchRedirect() {
-      this.$router.push({ path: `/s/search?text`, query: { query: this.searchText } } );
-    },
-  },
 };
 </script>
diff --git a/src/views/partials/Footer.vue b/src/components/Footer.vue
similarity index 100%
rename from src/views/partials/Footer.vue
rename to src/components/Footer.vue
diff --git a/src/views/partials/Navbar.vue b/src/components/Navbar.vue
similarity index 66%
rename from src/views/partials/Navbar.vue
rename to src/components/Navbar.vue
index 9acaf06..2356735 100644
--- a/src/views/partials/Navbar.vue
+++ b/src/components/Navbar.vue
@@ -5,15 +5,20 @@ SPDX-License-Identifier: AGPL-3.0-or-later
 -->
 
 <template>
-  <nav class="navbar navbar-expand-lg navbar-light bg-light">
+  <nav class="navbar navbar-expand-lg navbar-light bg-white">
     <div class="container-fluid">
-      <a class="navbar-brand" href="#">KI</a>
+      <router-link
+        class="navbar-brand"
+        :to="{ path:'/s/search' }"
+      >
+        <img class="wtf-logo wtf-logo--navbar" src="@/assets/img/wtf_logo.svg">
+        <span class="d-none d-sm-inline">Kompetenzinventar</span>
+        <span class="d-sm-none">KI</span>
+      </router-link>
       <button
         @click="showMobileNavbar = !showMobileNavbar"
         class="navbar-toggler"
         type="button"
-        data-bs-toggle="collapse"
-        data-bs-target="#navbarSupportedContent"
         aria-controls="navbarSupportedContent"
         aria-expanded="false"
         aria-label="Toggle navigation"
@@ -22,9 +27,7 @@ SPDX-License-Identifier: AGPL-3.0-or-later
       </button>
       <div
         class="collapse navbar-collapse"
-        :class="{
-          show: showMobileNavbar,
-        }"
+        :class="{ show: showMobileNavbar }"
         id="navbarSupportedContent"
       >
         <ul class="navbar-nav me-auto mb-2 mb-lg-0">
@@ -39,7 +42,7 @@ SPDX-License-Identifier: AGPL-3.0-or-later
           <li class="nav-item">
             <router-link
               class="nav-link"
-              :to="{ path: `/s/profile/${memberId}` }"
+              :to="{ path: `/s/profile/${$root.memberId}` }"
               active-class="active"
               >Mein Profil</router-link
             >
@@ -56,7 +59,6 @@ SPDX-License-Identifier: AGPL-3.0-or-later
             <button class="btn btn-outline-danger" @click="logout()">
               Logout
             </button>
-            <a class="nav-link active" aria-current="page" href="#"></a>
           </li>
         </ul>
         <form class="d-flex" @submit.prevent="searchRedirect()">
@@ -81,3 +83,39 @@ SPDX-License-Identifier: AGPL-3.0-or-later
     </div>
   </nav>
 </template>
+
+<script>
+
+import RequestMixin from "@/mixins/request.mixin"
+
+export default {
+  name: "Navbar",
+  mixins: [RequestMixin],
+  data() {
+    return {
+      showMobileNavbar: false,
+      searchText: ''
+    }
+  },
+  methods: {
+    logout() {
+      localStorage.clear();
+      this.$router.push({ path: "/" });
+    },
+    searchRedirect() {
+      this.$router.push({ path: `/s/search?text`, query: { query: this.searchText } } );
+    },
+  }
+}
+
+</script>
+
+<style>
+
+.wtf-logo--navbar {
+  height: 40px;
+  margin-bottom: -5px;
+  margin-top: -5px;
+}
+
+</style>