ki-frontend/src/components/Navbar.vue

111 lines
2.6 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
2021-09-19 17:30:37 +02:00
@click="toggleMobileNav"
2021-09-19 15:56:48 +02:00
class="navbar-toggler"
type="button"
aria-controls="navbarSupportedContent"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div
2021-09-21 23:56:17 +02:00
class="collapse navbar-collapse d-lg-flex"
2021-09-19 17:30:37 +02:00
:class="{ show: showMobileNav }"
2021-09-19 15:56:48 +02:00
id="navbarSupportedContent"
>
2021-09-23 16:57:09 +02:00
<ul class="navbar-nav mb-2 mb-lg-0 me-auto">
2021-09-19 15:56:48 +02:00
<li class="nav-item">
<router-link
class="nav-link"
:to="{ path: `/s/search` }"
active-class="active"
2021-09-21 23:56:17 +02:00
>Suche</router-link
>
2021-09-19 15:56:48 +02:00
</li>
<li class="nav-item">
<router-link
class="nav-link"
2021-09-19 17:30:37 +02:00
:to="{ path: `/s/profile/${currentUserId}` }"
2021-09-19 15:56:48 +02:00
active-class="active"
2021-09-21 23:56:17 +02:00
>Mein Profil</router-link
>
2021-09-19 15:56:48 +02:00
</li>
<li class="nav-item">
<router-link
class="nav-link"
:to="{ path: `/s/profile-edit` }"
active-class="active"
2021-09-21 23:56:17 +02:00
>Bearbeiten</router-link
>
2021-09-19 15:56:48 +02:00
</li>
</ul>
2021-09-21 23:56:17 +02:00
<ul class="navbar-nav">
<li class="nav-item">
<button class="btn btn-danger w-100" @click="logout()">
<i class="bi bi-box-arrow-right"></i>
Logout
</button>
</li>
</ul>
2021-09-19 15:56:48 +02:00
</div>
</div>
</nav>
</template>
2021-09-19 16:38:43 +02:00
<script>
2021-09-19 17:30:37 +02:00
import { mapState } from 'vuex'
import RequestMixin from '@/mixins/request.mixin'
2021-09-19 16:38:43 +02:00
export default {
2021-09-19 17:30:37 +02:00
name: 'Navbar',
2021-09-19 16:38:43 +02:00
mixins: [RequestMixin],
data() {
return {
2021-09-19 17:30:37 +02:00
showMobileNav: false
2021-09-19 16:38:43 +02:00
}
},
2021-09-19 17:30:37 +02:00
computed: {
...mapState(['currentUserId'])
},
2021-09-19 16:38:43 +02:00
methods: {
2021-09-19 17:30:37 +02:00
toggleMobileNav() {
this.showMobileNav = !this.showMobileNav
},
2021-09-19 16:38:43 +02:00
logout() {
2021-09-19 17:30:37 +02:00
this.$store.dispatch('clear')
this.$router.push({ path: '/' });
2021-09-19 16:38:43 +02:00
},
}
}
</script>
<style>
.wtf-logo--navbar {
height: 40px;
margin-bottom: -5px;
margin-top: -5px;
}
</style>