apply navbar style #15

src/components/Footer.vue

@@ -0,0 +1,47 @@
+<!--
+SPDX-FileCopyrightText: WTF Kooperative eG <https://wtf-eg.de/>
+
+SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+
+<template>
+<footer class="bg-dark py-5">
+  <div class="container">
+    <div class="row text-center text-sm-start">
+      <div class="col-sm-6 d-sm-flex justify-content-center mb-3 mb-sm-0">
+        <div class="d-inline-block">
+          <div class="fw-bold text-white mb-2">Kompetenzinventar</div>
+          <ul class="list-unstyled">
+            <li><a href="https://git.wtf-eg.de/kompetenzinventar">Quellcode</a></li>
+            <li><a href="https://git.wtf-eg.de/kompetenzinventar/ki-frontend/issues/new">Problem melden</a></li>
+          </ul>
+        </div>
+      </div>
+      <div class="col-sm-6 d-sm-flex justify-content-center">
+        <div class="d-inline-block">
+          <ul class="list-unstyled">
+            <li><a href="https://wtf-eg.de/impressum/">Impressum</a></li>
+            <li><a href="https://wtf-eg.de/datenschutz/">Datenschutzerklärung</a></li>
+          </ul>
+          <img class="wtf-logo wtf-logo--footer" src="@/assets/img/wtf_logo_white.svg">
+        </div>
+      </div>
+    </div>
+  </div>
+</footer>
+</template>
+<style scoped>
+a {
+  color: #fff;
+  text-decoration: none;
+}
+
+a:hover {
+  color: #fff;
+  text-decoration: underline;
+}
+
+.wtf-logo--footer {
+  max-width: 200px;
+}
+</style>

src/components/Navbar.vue

@@ -0,0 +1,121 @@
+<!--
+SPDX-FileCopyrightText: WTF Kooperative eG <https://wtf-eg.de/>
+
+SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+
+<template>
+  <nav class="navbar navbar-expand-lg navbar-light bg-white">
+    <div class="container-fluid">
+      <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"
+        aria-controls="navbarSupportedContent"
+        aria-expanded="false"
+        aria-label="Toggle navigation"
+      >
+        <span class="navbar-toggler-icon"></span>
+      </button>
+      <div
+        class="collapse navbar-collapse"
+        :class="{ show: showMobileNavbar }"
+        id="navbarSupportedContent"
+      >
+        <ul class="navbar-nav me-auto mb-2 mb-lg-0">
+          <li class="nav-item">
+            <router-link
+              class="nav-link"
+              :to="{ path: `/s/search` }"
+              active-class="active"
+              >Suche</router-link
+            >
+          </li>
+          <li class="nav-item">
+            <router-link
+              class="nav-link"
+              :to="{ path: `/s/profile/${$root.memberId}` }"
+              active-class="active"
+              >Mein Profil</router-link
+            >
+          </li>
+          <li class="nav-item">
+            <router-link
+              class="nav-link"
+              :to="{ path: `/s/profile-edit` }"
+              active-class="active"
+              >Bearbeiten</router-link
+            >
+          </li>
+          <li class="nav-item">
+            <button class="btn btn-outline-danger" @click="logout()">
+              Logout
+            </button>
+          </li>
+        </ul>
+        <form class="d-flex" @submit.prevent="searchRedirect()">
+          <input
+            class="form-control me-2"
+            v-model="searchText"
+            type="search"
+            placeholder="Profile durchsuchen"
+            aria-label="Search"
+          />
+          <button
+            class="btn btn-outline-primary"
+            type="submit"
+          >
+            <img
+              src="/img/bootstrap-icons-1.5.0/search.svg"
+              alt="Suche Icon"
+            />
+          </button>
+        </form>
+      </div>
+    </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>