ki-frontend/src/components/Navbar.vue

<!--
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>