From 82b0a77f3be653e0d8daf2cc69a72754a089ae9a Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Thu, 9 Dec 2021 14:59:39 +0100
Subject: [PATCH] Navbar remove is-nav menu, add collaps components

---
 frontend/src/components/Menu/Navbar.vue       | 31 ++++++++++++++++++-
 .../src/views/Layout/DashboardLayout_gdd.vue  |  2 +-
 2 files changed, 31 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/Menu/Navbar.vue b/frontend/src/components/Menu/Navbar.vue
index 3a48aa8b7..88a5f5af5 100644
--- a/frontend/src/components/Menu/Navbar.vue
+++ b/frontend/src/components/Menu/Navbar.vue
@@ -35,8 +35,36 @@
           </b-navbar-nav>
         </b-collapse>
       </div>
-      <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
+      <b-navbar-toggle @click="visible = !visible"></b-navbar-toggle>
     </b-navbar>
+    <b-collapse
+      id="collapse-4"
+      v-model="visible"
+      class="p-3"
+      style="position: absolute; z-index: 100000; background-color: #dfe0e3f5; width: 100%;     box-shadow: cadetblue 0px 13px 22px;"
+    >
+      <b-nav vertical @click="visible = false">
+        <b-nav-item to="/overview" class="mb-3">
+          {{ $t('overview') }}
+        </b-nav-item>
+        <b-nav-item to="/send" class="mb-3">{{ $t('send') }}</b-nav-item>
+        <b-nav-item to="/transactions" class="mb-3">
+          {{ $t('transactions') }}
+        </b-nav-item>
+        <b-nav-item to="/profile" class="mb-3">
+          {{ $t('site.navbar.my-profil') }}
+        </b-nav-item>
+        <br />
+        <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 class="mb-3" v-if="$store.state.isAdmin" @click="$emit('admin')">
+          {{ $t('admin_area') }}
+        </b-nav-item>
+        <b-nav-item class="mb-3" @click="$emit('logout')">{{ $t('logout') }}</b-nav-item>
+      </b-nav>
+    </b-collapse>
   </div>
 </template>
 <script>
@@ -50,6 +78,7 @@ export default {
   },
   data() {
     return {
+      visible: false,
       logo: 'img/brand/green.png',
     }
   },
diff --git a/frontend/src/views/Layout/DashboardLayout_gdd.vue b/frontend/src/views/Layout/DashboardLayout_gdd.vue
index d9ec8de24..f432dcdf2 100755
--- a/frontend/src/views/Layout/DashboardLayout_gdd.vue
+++ b/frontend/src/views/Layout/DashboardLayout_gdd.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <navbar :balance="balance" @get-elopage-link="getElopageLink" @admin="admin" @logout="logout" />
-    <div style="display: inline-flex; width: 100%">
+    <div style="display: inline-flex; width: 100%; height: 91%; position: absolute">
       <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" />
       </div>