ki-frontend/src/components/Navbar.vue

122 lines
3.0 KiB
Vue
Raw Normal View History

2021-09-19 15:56:48 +02:00
<!--
SPDX-FileCopyrightText: WTF Kooperative eG <https://wtf-eg.de/>
SPDX-License-Identifier: AGPL-3.0-or-later
-->
<template>
2021-09-19 16:38:43 +02:00
<nav class="navbar navbar-expand-lg navbar-light bg-white">
2021-09-19 15:56:48 +02:00
<div class="container-fluid">
2021-09-19 16:38:43 +02:00
<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>
2021-09-19 15:56:48 +02:00
<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"
2021-09-19 16:38:43 +02:00
:class="{ show: showMobileNavbar }"
2021-09-19 15:56:48 +02:00
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"
2021-09-19 16:38:43 +02:00
:to="{ path: `/s/profile/${$root.memberId}` }"
2021-09-19 15:56:48 +02:00
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>
2021-09-19 16:38:43 +02:00
<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>