apply navbar style #15

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 Footer from '@/components/Footer.vue'
-import Navbar from '@/views/partials/Navbar.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>

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="{
+        :class="{ show: showMobileNavbar }"
-          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>