ki-frontend/src/App.vue

<!--
SPDX-FileCopyrightText: WTF Kooperative eG <https://wtf-eg.de/>

SPDX-License-Identifier: AGPL-3.0-or-later
-->

<template>
  <div class="alert alert-success text-center mb-0" role="alert">
    Willkommen beim Alpha-Test!
    <a target="_blank" href="https://git.wtf-eg.de/kompetenzinventar/ki-frontend/issues/new">Problem gefunden? Bitte hier ein Issue anlegen.</a>
  </div>
  <header v-if="this.$route.path.includes('/s/')">
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <div class="container-fluid">
        <a class="navbar-brand" href="#">KI</a>
        <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"
        >
          <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/${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>
              <a class="nav-link active" aria-current="page" href="#"></a>
            </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>
  </header>
  <router-view />
  <Footer />
</template>
<script>
import Footer from '@/views/partials/Footer.vue'

export default {
  name: "App",
  components: {
    Footer
  },
  data() {
    return {
      showMobileNavbar: false,
      memberId: null,
      searchText: "",
    };
  },
  created() {
    this.memberId = localStorage.getItem("user_id");
  },
  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>