emit visible navbar collaps out of navbar

frontend/src/components/Menu/Navbar.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="component-navbar">
+  <div class="component-navbar" style="background-color: #fff">
-    <b-navbar toggleable="lg" type="light" variant="trans">
+    <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>
-
+      <b-navbar-toggle
-      <div class="d-flex d-xl-none d-lg-none d-md-flex">
+        target=""
-        <b-collapse id="nav-collapse" is-nav>
+        @click="$emit('set-visible', (visibleCollapse = !visible))"
-          <b-navbar-nav>
+      ></b-navbar-toggle>
-            <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>
-    <b-collapse id="collapse-4" v-model="visible" class="p-3 b-collaps-gradido">
+    <b-collapse id="collapse-4" v-model="visibleCollapse" class="p-3 b-collaps-gradido">
-      <b-nav vertical @click="visible = false">
+      <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>

frontend/src/views/Layout/DashboardLayout_gdd.vue

@@ -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 class="ml-2 mr-2" style="width: 100%" @click="visible = false">
-        <div>
+        <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>