IT4Change/gradido
3
0
Fork 0
mirror of https://github.com/IT4Change/gradido.git synced 2025-12-13 07:45:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

emit visible navbar collaps out of navbar

Browse Source
This commit is contained in:
ogerly 2021-12-10 07:07:54 +01:00
parent d43783c512
commit a6e7a897c7
2 changed files with 34 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
frontend/src/components/Menu/Navbar.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="component-navbar">
<b-navbar toggleable="lg" type="light" variant="trans">
<div class="component-navbar" style="background-color: #fff">
<b-navbar toggleable="lg" type="light" variant="faded">
<div class="navbar-brand">
<b-navbar-nav>
<b-nav-item to="/overview">
@ -9,36 +9,13 @@
</b-navbar-nav>
</div>
<b-nav-text center>{{ balance }} GDD</b-nav-text>
<div class="d-flex d-xl-none d-lg-none d-md-flex">
<b-collapse id="nav-collapse" is-nav>
<b-navbar-nav>
<b-nav-item to="/overview" class="test-overview">{{ $t('overview') }}</b-nav-item>
<b-nav-item to="/send">{{ $t('send') }}</b-nav-item>
<b-nav-item to="/transactions">{{ $t('transactions') }}</b-nav-item>
<b-nav-item to="/profile">{{ $t('site.navbar.my-profil') }}</b-nav-item>
<hr />
<b-nav-item class="mb-3" @click="$emit('get-elopage-link')">
{{ $t('members_area') }}
<b-badge v-if="!$store.state.hasElopage" pill variant="danger">!</b-badge>
</b-nav-item>
<b-nav-item
v-if="$store.state.isAdmin"
class="test-overview mb-3"
@click="$emit('admin')"
>
{{ $t('admin_area') }}
</b-nav-item>
<b-nav-item class="mb-3" @click="$emit('logout')">
{{ $t('logout') }}
</b-nav-item>
</b-navbar-nav>
</b-collapse>
</div>
<b-navbar-toggle @click="visible = !visible"></b-navbar-toggle>
<b-navbar-toggle
target=""
@click="$emit('set-visible', (visibleCollapse = !visible))"
></b-navbar-toggle>
</b-navbar>
<b-collapse id="collapse-4" v-model="visible" class="p-3 b-collaps-gradido">
<b-nav vertical @click="visible = false">
<b-collapse id="collapse-4" v-model="visibleCollapse" class="p-3 b-collaps-gradido">
<b-nav vertical @click="$emit('setVisible', false)">
<b-nav-item to="/overview" class="mb-3">
{{ $t('overview') }}
</b-nav-item>
@ -50,7 +27,7 @@
{{ $t('site.navbar.my-profil') }}
</b-nav-item>
<br />
<b-nav-item class="mb-3" @click="$emit('get-elopage-link')">
<b-nav-item class="mb-3" @click="$emit('getElopageLink')">
{{ $t('members_area') }}
<b-badge v-if="!$store.state.hasElopage" pill variant="danger">!</b-badge>
</b-nav-item>
@ -66,6 +43,10 @@
export default {
name: 'navbar',
props: {
visible: {
type: Boolean,
required: true,
},
balance: {
type: Number,
required: true,
@ -73,10 +54,15 @@ export default {
},
data() {
return {
visible: false,
logo: 'img/brand/green.png',
visibleCollapse: this.visible,
}
},
watch: {
visible() {
this.visibleCollapse = this.visible
},
},
}
</script>
<style>

19
frontend/src/views/Layout/DashboardLayout_gdd.vue
View File

@ -1,13 +1,20 @@
<template>
<div>
<navbar :balance="balance" @get-elopage-link="getElopageLink" @admin="admin" @logout="logout" />
<navbar
:balance="balance"
:visible="visible"
@set-visible="setVisible"
@get-elopage-link="getElopageLink"
@admin="admin"
@logout="logout"
/>
<div class="content-gradido">
<div class="d-none d-sm-none d-md-none d-lg-flex shadow-lg" style="width: 300px">
<sidebar @get-elopage-link="getElopageLink" @admin="admin" @logout="logout" />
<sidebar @getElopageLink="getElopageLink" @admin="admin" @logout="logout" />
</div>
<div class="ml-2 mr-2" style="width: 100%">
<div>
<div class="ml-2 mr-2" style="width: 100%" @click="visible = false">
<div class="main-content">
<fade-transition :duration="200" origin="center top" mode="out-in">
<router-view
ref="router-view"
@ -50,6 +57,7 @@ export default {
bookedBalance: 0,
transactionCount: 0,
pending: true,
visible: false,
}
},
methods: {
@ -112,6 +120,9 @@ export default {
: `https://elopage.com/s/gradido/basic-de/payment?locale=${this.$i18n.locale}&prid=111&pid=${pId}&firstName=${this.$store.state.firstName}&lastName=${this.$store.state.lastName}&email=${this.$store.state.email}`,
)
},
setVisible(bool) {
this.visible = bool
},
},
}
</script>