IT4Change/gradido
3
0
Fork 0
mirror of https://github.com/IT4Change/gradido.git synced 2026-02-06 09:56:05 +00:00
Code Issues Packages Projects Releases Wiki Activity

rework navbar

Browse Source
This commit is contained in:
Kamila 2024-07-19 14:20:31 +02:00
parent b29230bc79
commit b10037ae99
1 changed files with 37 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
admin/src/components/NavBar.vue
View File

@ -1,11 +1,11 @@
<template>
<div class="component-nabvar">
<BNavbar toggleable="lg" type="dark" class="bg-dark">
<BNavbar toggleable="lg" variant="dark" v-b-color-mode="'light'">
<BNavbarBrand class="mb-2" to="/">
<img src="img/brand/gradido_logo_w.png" class="navbar-brand-img pl-2" alt="..." />
</BNavbarBrand>
<BNavbarToggle target="nav-collapse"></BNavbarToggle>
<BNavbarToggle target="navbar-toggle-collapse" />
<BCollapse id="nav-collapse" is-nav>
<BNavbarNav>
@ -13,7 +13,7 @@
<BNavItem class="bg-color-creation" to="/creation-confirm">
{{ $t('creation') }}
<BBadge v-show="$store.state.openCreations > 0" variant="danger">
{{ $store.state.openCreations }}
{{ openCreations.value }}
</BBadge>
</BNavItem>
<BNavItem to="/contribution-links">
@ -23,38 +23,50 @@
{{ $t('navbar.instances') }}
</BNavItem>
<BNavItem to="/statistic">{{ $t('navbar.statistic') }}</BNavItem>
<BNavItem @click="wallet">{{ $t('navbar.my-account') }}</BNavItem>
<BNavItem @click="logout">{{ $t('navbar.logout') }}</BNavItem>
<BNavItem @click="handleWallet">{{ $t('navbar.my-account') }}</BNavItem>
<BNavItem @click="handleLogout">{{ $t('navbar.logout') }}</BNavItem>
</BNavbarNav>
</BCollapse>
</BNavbar>
</div>
</template>
<script>
<script setup>
import CONFIG from '../config'
import { useStore } from 'vuex'
import { computed } from 'vue'
import { useMutation } from '@vue/apollo-composable'
import { logout } from '../graphql/logout'
import { BNavbar, BCollapse, BNavbarNav, BNavItem, BNavbarBrand, BBadge } from 'bootstrap-vue-next'
export default {
name: 'navbar',
components: { BNavbar, BCollapse, BNavbarNav, BNavItem, BNavbarBrand, BBadge },
methods: {
async logout() {
window.location.assign(CONFIG.WALLET_LOGIN_URL)
// window.location = CONFIG.WALLET_LOGIN_URL
this.$store.dispatch('logout')
await this.$apollo.mutate({
mutation: logout,
})
},
wallet() {
window.location = CONFIG.WALLET_AUTH_URL.replace('{token}', this.$store.state.token)
this.$store.dispatch('logout') // logout without redirect
},
},
import {
BNavbar,
BCollapse,
BNavbarNav,
BNavItem,
BNavbarBrand,
BBadge,
BNavbarToggle,
} from 'bootstrap-vue-next'
const store = useStore()
const openCreations = computed(() => store.state.openCreations)
const { mutate: executeLogout } = useMutation(logout)
const handleLogout = async () => {
window.location.assign(CONFIG.WALLET_LOGIN_URL)
// window.location = CONFIG.WALLET_LOGIN_URL
store.dispatch('logout')
await executeLogout()
}
const handleWallet = () => {
window.location = CONFIG.WALLET_AUTH_URL.replace('{token}', store.state.token)
store.dispatch('logout') // logout without redirect
}
</script>
<style>
<style lang="scss" scoped>
.navbar-brand-img {
height: 2rem;
padding-left: 10px;
}
</style>