From 73006ede996604a09e7642b3b0c1a9e3756fa5b3 Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Tue, 7 Dec 2021 10:34:24 +0100
Subject: [PATCH 01/51] insert b-navbar from bootstrap

---
 .../src/views/Layout/DashboardLayout_gdd.vue  | 49 +++++++++++++++++++
 1 file changed, 49 insertions(+)

diff --git a/frontend/src/views/Layout/DashboardLayout_gdd.vue b/frontend/src/views/Layout/DashboardLayout_gdd.vue
index 8273685bd..16847f39f 100755
--- a/frontend/src/views/Layout/DashboardLayout_gdd.vue
+++ b/frontend/src/views/Layout/DashboardLayout_gdd.vue
@@ -1,5 +1,46 @@
 <template>
   <div>
+    <b-navbar toggleable="lg" type="dark" variant="info">
+      <div class="navbar-brand">
+        <img :src="logo" class="navbar-brand-img" alt="..." />
+      </div>
+      <b-nav-text>{{ balance }} GDD</b-nav-text>
+      <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
+
+      <b-collapse id="nav-collapse" is-nav>
+        <b-navbar-nav>
+          <b-nav-item href="/overview">{{ $t('overview') }}</b-nav-item>
+          <b-nav-item href="/send">{{ $t('send') }}</b-nav-item>
+          <b-nav-item href="/transactions">{{ $t('transactions') }}</b-nav-item>
+          <b-nav-item href="/profile">{{ $t('site.navbar.my-profil') }}</b-nav-item>
+        </b-navbar-nav>
+
+        <!-- Right aligned nav items -->
+        <b-navbar-nav class="ml-auto">
+          <b-nav-form>
+            <b-form-input size="sm" class="mr-sm-2" placeholder="Search"></b-form-input>
+            <b-button size="sm" class="my-2 my-sm-0" type="submit">Search</b-button>
+          </b-nav-form>
+
+          <b-nav-item-dropdown text="Lang" right>
+            <b-dropdown-item href="#">EN</b-dropdown-item>
+            <b-dropdown-item href="#">ES</b-dropdown-item>
+            <b-dropdown-item href="#">RU</b-dropdown-item>
+            <b-dropdown-item href="#">FA</b-dropdown-item>
+          </b-nav-item-dropdown>
+
+          <b-nav-item-dropdown right>
+            <!-- Using 'button-content' slot -->
+            <template #button-content>
+              <em>User</em>
+            </template>
+            <b-dropdown-item href="#">Profile</b-dropdown-item>
+            <b-dropdown-item href="#">Sign Out</b-dropdown-item>
+          </b-nav-item-dropdown>
+        </b-navbar-nav>
+      </b-collapse>
+    </b-navbar>
+
     <side-bar @logout="logout" :balance="balance" :pending="pending">
       <template slot="links">
         <sidebar-item
@@ -28,6 +69,7 @@
         ></sidebar-item>
       </template>
     </side-bar>
+
     <div class="main-content" style="max-width: 1000px">
       <div class="d-none d-md-block">
         <b-navbar>
@@ -84,6 +126,7 @@ export default {
   },
   data() {
     return {
+      logo: 'img/brand/green.png',
       balance: 0,
       GdtBalance: 0,
       transactions: [],
@@ -143,3 +186,9 @@ export default {
   },
 }
 </script>
+<style>
+.navbar-brand-img {
+  height: 2rem;
+  padding-left: 10px;
+}
+</style>

From b257575a9592b2d3421d076279fca1f153c490e3 Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Tue, 7 Dec 2021 11:03:01 +0100
Subject: [PATCH 02/51] all function from old menu to new navbar menu

---
 .../src/views/Layout/DashboardLayout_gdd.vue  | 78 ++++++++++---------
 1 file changed, 40 insertions(+), 38 deletions(-)

diff --git a/frontend/src/views/Layout/DashboardLayout_gdd.vue b/frontend/src/views/Layout/DashboardLayout_gdd.vue
index 16847f39f..e1704fe56 100755
--- a/frontend/src/views/Layout/DashboardLayout_gdd.vue
+++ b/frontend/src/views/Layout/DashboardLayout_gdd.vue
@@ -4,23 +4,22 @@
       <div class="navbar-brand">
         <img :src="logo" class="navbar-brand-img" alt="..." />
       </div>
-      <b-nav-text>{{ balance }} GDD</b-nav-text>
+      <b-nav-text center>{{ balance }} GDD</b-nav-text>
       <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
 
       <b-collapse id="nav-collapse" is-nav>
         <b-navbar-nav>
-          <b-nav-item href="/overview">{{ $t('overview') }}</b-nav-item>
-          <b-nav-item href="/send">{{ $t('send') }}</b-nav-item>
-          <b-nav-item href="/transactions">{{ $t('transactions') }}</b-nav-item>
-          <b-nav-item href="/profile">{{ $t('site.navbar.my-profil') }}</b-nav-item>
+          <b-nav-item to="/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-navbar-nav>
 
         <!-- Right aligned nav items -->
         <b-navbar-nav class="ml-auto">
-          <b-nav-form>
+          <!--<b-nav-form>
             <b-form-input size="sm" class="mr-sm-2" placeholder="Search"></b-form-input>
             <b-button size="sm" class="my-2 my-sm-0" type="submit">Search</b-button>
-          </b-nav-form>
+          </b-nav-form> 
 
           <b-nav-item-dropdown text="Lang" right>
             <b-dropdown-item href="#">EN</b-dropdown-item>
@@ -28,47 +27,35 @@
             <b-dropdown-item href="#">RU</b-dropdown-item>
             <b-dropdown-item href="#">FA</b-dropdown-item>
           </b-nav-item-dropdown>
+          -->
 
           <b-nav-item-dropdown right>
             <!-- Using 'button-content' slot -->
             <template #button-content>
-              <em>User</em>
+              <em> {{ $store.state.email }} 
+             
+                  <span class="avatar">
+                    <vue-qrcode
+                      v-if="$store.state.email"
+                      :value="$store.state.email"
+                      type="image/png"
+                    ></vue-qrcode>
+                  </span>
+               
+              </em>
             </template>
-            <b-dropdown-item href="#">Profile</b-dropdown-item>
-            <b-dropdown-item href="#">Sign Out</b-dropdown-item>
+            <b-dropdown-item to="/profile">{{ $t('site.navbar.my-profil') }}</b-dropdown-item>
+            <b-dropdown-item  @click="getElopageLink" target="_blank">
+              {{ $t('members_area') }}
+            </b-dropdown-item>
+            <b-dropdown-item   target="_blank" @click="admin">{{ $t('admin_area') }}</b-dropdown-item>
+            <b-dropdown-item href="/#" @click="logout">{{ $t('logout') }}</b-dropdown-item>
           </b-nav-item-dropdown>
         </b-navbar-nav>
       </b-collapse>
     </b-navbar>
 
-    <side-bar @logout="logout" :balance="balance" :pending="pending">
-      <template slot="links">
-        <sidebar-item
-          :link="{
-            name: $t('overview'),
-            path: '/overview',
-          }"
-        ></sidebar-item>
-        <sidebar-item
-          :link="{
-            name: $t('send'),
-            path: '/send',
-          }"
-        ></sidebar-item>
-        <sidebar-item
-          :link="{
-            name: $t('transactions'),
-            path: '/transactions',
-          }"
-        ></sidebar-item>
-        <sidebar-item
-          :link="{
-            name: $t('site.navbar.my-profil'),
-            path: '/profile',
-          }"
-        ></sidebar-item>
-      </template>
-    </side-bar>
+   
 
     <div class="main-content" style="max-width: 1000px">
       <div class="d-none d-md-block">
@@ -117,6 +104,7 @@ import { logout, transactionsQuery } from '../../graphql/queries'
 import ContentFooter from './ContentFooter.vue'
 import { FadeTransition } from 'vue2-transitions'
 import VueQrcode from 'vue-qrcode'
+import CONFIG from '../../config'
 
 export default {
   components: {
@@ -183,6 +171,20 @@ export default {
     updateBalance(ammount) {
       this.balance -= ammount
     },
+    admin() {
+      window.location.assign(CONFIG.ADMIN_AUTH_URL.replace('$1', this.$store.state.token))
+      this.$store.dispatch('logout') // logout without redirect
+    },
+    getElopageLink() {
+      const pId = this.$store.state.publisherId
+        ? this.$store.state.publisherId
+        : CONFIG.DEFAULT_PUBLISHER_ID
+      return encodeURI(
+        this.$store.state.hasElopage
+          ? `https://elopage.com/s/gradido/sign_in?locale=${this.$i18n.locale}`
+          : `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}`,
+      )
+    },
   },
 }
 </script>

From 93136e5a75ffa8b2dfc4cdb82986716b9a1bddff Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Tue, 7 Dec 2021 11:06:16 +0100
Subject: [PATCH 03/51] =?UTF-8?q?remove=20old=20sidebar=20and=20navbar=20m?=
 =?UTF-8?q?en=C3=BC=20from=20DashboardLayout=5Fgdd.vue?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/views/Layout/DashboardLayout_gdd.vue  | 49 +++++--------------
 1 file changed, 12 insertions(+), 37 deletions(-)

diff --git a/frontend/src/views/Layout/DashboardLayout_gdd.vue b/frontend/src/views/Layout/DashboardLayout_gdd.vue
index e1704fe56..cddb576a5 100755
--- a/frontend/src/views/Layout/DashboardLayout_gdd.vue
+++ b/frontend/src/views/Layout/DashboardLayout_gdd.vue
@@ -32,55 +32,30 @@
           <b-nav-item-dropdown right>
             <!-- Using 'button-content' slot -->
             <template #button-content>
-              <em> {{ $store.state.email }} 
-             
-                  <span class="avatar">
-                    <vue-qrcode
-                      v-if="$store.state.email"
-                      :value="$store.state.email"
-                      type="image/png"
-                    ></vue-qrcode>
-                  </span>
-               
+              <em>
+                {{ $store.state.email }}
+
+                <span class="avatar">
+                  <vue-qrcode
+                    v-if="$store.state.email"
+                    :value="$store.state.email"
+                    type="image/png"
+                  ></vue-qrcode>
+                </span>
               </em>
             </template>
             <b-dropdown-item to="/profile">{{ $t('site.navbar.my-profil') }}</b-dropdown-item>
-            <b-dropdown-item  @click="getElopageLink" target="_blank">
+            <b-dropdown-item @click="getElopageLink" target="_blank">
               {{ $t('members_area') }}
             </b-dropdown-item>
-            <b-dropdown-item   target="_blank" @click="admin">{{ $t('admin_area') }}</b-dropdown-item>
+            <b-dropdown-item target="_blank" @click="admin">{{ $t('admin_area') }}</b-dropdown-item>
             <b-dropdown-item href="/#" @click="logout">{{ $t('logout') }}</b-dropdown-item>
           </b-nav-item-dropdown>
         </b-navbar-nav>
       </b-collapse>
     </b-navbar>
 
-   
-
     <div class="main-content" style="max-width: 1000px">
-      <div class="d-none d-md-block">
-        <b-navbar>
-          <b-navbar-nav class="ml-auto">
-            <b-nav-item>
-              <b-media no-body class="align-items-center">
-                <span class="pb-2 text-lg font-weight-bold">
-                  {{ $store.state.email }}
-                </span>
-                <b-media-body class="ml-2">
-                  <span class="avatar">
-                    <vue-qrcode
-                      v-if="$store.state.email"
-                      :value="$store.state.email"
-                      type="image/png"
-                    ></vue-qrcode>
-                  </span>
-                </b-media-body>
-              </b-media>
-            </b-nav-item>
-          </b-navbar-nav>
-        </b-navbar>
-      </div>
-
       <div @click="$sidebar.displaySidebar(false)">
         <fade-transition :duration="200" origin="center top" mode="out-in">
           <router-view

From 11069ee5e79fcf0208d165e63ec5699c00275c4e Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Tue, 7 Dec 2021 11:14:31 +0100
Subject: [PATCH 04/51] add class container an main-content in
 DashboardLayout_gdd.vue

---
 frontend/src/views/Layout/DashboardLayout_gdd.vue | 15 +--------------
 1 file changed, 1 insertion(+), 14 deletions(-)

diff --git a/frontend/src/views/Layout/DashboardLayout_gdd.vue b/frontend/src/views/Layout/DashboardLayout_gdd.vue
index cddb576a5..bff92ecd7 100755
--- a/frontend/src/views/Layout/DashboardLayout_gdd.vue
+++ b/frontend/src/views/Layout/DashboardLayout_gdd.vue
@@ -16,19 +16,6 @@
 
         <!-- Right aligned nav items -->
         <b-navbar-nav class="ml-auto">
-          <!--<b-nav-form>
-            <b-form-input size="sm" class="mr-sm-2" placeholder="Search"></b-form-input>
-            <b-button size="sm" class="my-2 my-sm-0" type="submit">Search</b-button>
-          </b-nav-form> 
-
-          <b-nav-item-dropdown text="Lang" right>
-            <b-dropdown-item href="#">EN</b-dropdown-item>
-            <b-dropdown-item href="#">ES</b-dropdown-item>
-            <b-dropdown-item href="#">RU</b-dropdown-item>
-            <b-dropdown-item href="#">FA</b-dropdown-item>
-          </b-nav-item-dropdown>
-          -->
-
           <b-nav-item-dropdown right>
             <!-- Using 'button-content' slot -->
             <template #button-content>
@@ -55,7 +42,7 @@
       </b-collapse>
     </b-navbar>
 
-    <div class="main-content" style="max-width: 1000px">
+    <div class="container main-content" style="max-width: 1000px">
       <div @click="$sidebar.displaySidebar(false)">
         <fade-transition :duration="200" origin="center top" mode="out-in">
           <router-view

From 274fd6e21e8c6f669dbce8a7c536eafed2362402 Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Wed, 8 Dec 2021 10:30:56 +0100
Subject: [PATCH 05/51] grid system, display sidebar if large

---
 frontend/src/App.vue                          |  2 +-
 .../src/views/Layout/DashboardLayout_gdd.vue  | 67 +++++++++++--------
 2 files changed, 40 insertions(+), 29 deletions(-)

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 981917c54..25b0eadc5 100755
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -1,6 +1,6 @@
 <template>
   <div id="app" class="font-sans text-gray-800">
-    <div class="">
+    <div>
       <particles-bg v-if="$store.state.coinanimation" type="custom" :config="config" :bg="true" />
       <component :is="$route.meta.requiresAuth ? 'DashboardLayout' : 'AuthLayoutGDD'" />
     </div>
diff --git a/frontend/src/views/Layout/DashboardLayout_gdd.vue b/frontend/src/views/Layout/DashboardLayout_gdd.vue
index bff92ecd7..5280b13cd 100755
--- a/frontend/src/views/Layout/DashboardLayout_gdd.vue
+++ b/frontend/src/views/Layout/DashboardLayout_gdd.vue
@@ -8,7 +8,7 @@
       <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
 
       <b-collapse id="nav-collapse" is-nav>
-        <b-navbar-nav>
+        <b-navbar-nav class="d-none d-md-flex d-sm-flex">
           <b-nav-item to="/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>
@@ -21,14 +21,6 @@
             <template #button-content>
               <em>
                 {{ $store.state.email }}
-
-                <span class="avatar">
-                  <vue-qrcode
-                    v-if="$store.state.email"
-                    :value="$store.state.email"
-                    type="image/png"
-                  ></vue-qrcode>
-                </span>
               </em>
             </template>
             <b-dropdown-item to="/profile">{{ $t('site.navbar.my-profil') }}</b-dropdown-item>
@@ -41,37 +33,56 @@
         </b-navbar-nav>
       </b-collapse>
     </b-navbar>
+<div >
+     <div   class="d-none d-lg-flex shadow-lg" style="width: 300px; float:left" >
+          <b-sidebar id="sidebar-1" visible no-header-close  bg-variant="white"  >
+            <div class="px-3 py-2">
+              <p>
+                Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac
+                facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac,
+                vestibulum at eros.
+              </p>
+              <b-img src="https://picsum.photos/500/500/?image=54" fluid thumbnail></b-img>
+            </div>
+           
+          </b-sidebar>
+        </div>
+        <div>
+          
+           <div>
+            <div @click="$sidebar.displaySidebar(false)">
+              <fade-transition :duration="200" origin="center top" mode="out-in">
+                <router-view
+                  ref="router-view"
+                  :balance="balance"
+                  :gdt-balance="GdtBalance"
+                  :transactions="transactions"
+                  :transactionCount="transactionCount"
+                  :pending="pending"
+                  @update-balance="updateBalance"
+                  @update-transactions="updateTransactions"
+                ></router-view>
+              </fade-transition>
+            </div>
+            <content-footer v-if="!$route.meta.hideFooter"></content-footer>
+          </div>
 
-    <div class="container main-content" style="max-width: 1000px">
-      <div @click="$sidebar.displaySidebar(false)">
-        <fade-transition :duration="200" origin="center top" mode="out-in">
-          <router-view
-            ref="router-view"
-            :balance="balance"
-            :gdt-balance="GdtBalance"
-            :transactions="transactions"
-            :transactionCount="transactionCount"
-            :pending="pending"
-            @update-balance="updateBalance"
-            @update-transactions="updateTransactions"
-          ></router-view>
-        </fade-transition>
-      </div>
-      <content-footer v-if="!$route.meta.hideFooter"></content-footer>
-    </div>
+
+        </div>
+</div>
+
+     
   </div>
 </template>
 <script>
 import { logout, transactionsQuery } from '../../graphql/queries'
 import ContentFooter from './ContentFooter.vue'
 import { FadeTransition } from 'vue2-transitions'
-import VueQrcode from 'vue-qrcode'
 import CONFIG from '../../config'
 
 export default {
   components: {
     ContentFooter,
-    VueQrcode,
     FadeTransition,
   },
   data() {

From cbda7f81f3489976f725a286d3b3462d10e2c14a Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Wed, 8 Dec 2021 10:38:56 +0100
Subject: [PATCH 06/51] delete creative tim src/components/Navbar and
 Sidebarplugin

---
 .../components/Navbar/NavbarToggleButton.vue  |  21 --
 .../src/components/NavbarToggleButton.vue     |  32 ---
 .../components/SidebarPlugin/SideBar.spec.js  | 197 ------------------
 .../src/components/SidebarPlugin/SideBar.vue  | 145 -------------
 .../components/SidebarPlugin/SidebarItem.vue  | 189 -----------------
 .../src/components/SidebarPlugin/index.js     |  41 ----
 frontend/src/components/index.js              |   5 -
 frontend/src/plugins/dashboard-plugin.js      |   2 -
 frontend/test/testSetup.js                    |   2 -
 9 files changed, 634 deletions(-)
 delete mode 100644 frontend/src/components/Navbar/NavbarToggleButton.vue
 delete mode 100755 frontend/src/components/NavbarToggleButton.vue
 delete mode 100644 frontend/src/components/SidebarPlugin/SideBar.spec.js
 delete mode 100755 frontend/src/components/SidebarPlugin/SideBar.vue
 delete mode 100755 frontend/src/components/SidebarPlugin/SidebarItem.vue
 delete mode 100755 frontend/src/components/SidebarPlugin/index.js
 delete mode 100755 frontend/src/components/index.js

diff --git a/frontend/src/components/Navbar/NavbarToggleButton.vue b/frontend/src/components/Navbar/NavbarToggleButton.vue
deleted file mode 100644
index 5e6ab56b3..000000000
--- a/frontend/src/components/Navbar/NavbarToggleButton.vue
+++ /dev/null
@@ -1,21 +0,0 @@
-<template>
-  <button
-    type="button"
-    class="navbar-toggler collapsed"
-    data-toggle="collapse"
-    data-target="#navbar"
-    aria-controls="navbarSupportedContent"
-    aria-expanded="false"
-    aria-label="Toggle navigation"
-  >
-    <span class="navbar-toggler-bar bar1"></span>
-    <span class="navbar-toggler-bar bar2"></span>
-    <span class="navbar-toggler-bar bar3"></span>
-  </button>
-</template>
-<script>
-export default {
-  name: 'navbar-toggle-button',
-}
-</script>
-<style></style>
diff --git a/frontend/src/components/NavbarToggleButton.vue b/frontend/src/components/NavbarToggleButton.vue
deleted file mode 100755
index 0f539df38..000000000
--- a/frontend/src/components/NavbarToggleButton.vue
+++ /dev/null
@@ -1,32 +0,0 @@
-<template>
-  <button
-    class="navbar-toggler"
-    type="button"
-    data-toggle="collapse"
-    :data-target="target"
-    :aria-controls="target"
-    :aria-expanded="toggled"
-    aria-label="Toggle navigation"
-  >
-    <span class="navbar-toggler-icon"></span>
-    <slot>
-      <span></span>
-    </slot>
-  </button>
-</template>
-<script>
-export default {
-  props: {
-    target: {
-      type: [String, Number],
-      description: 'Button target element',
-    },
-    toggled: {
-      type: Boolean,
-      default: false,
-      description: 'Whether button is toggled',
-    },
-  },
-}
-</script>
-<style></style>
diff --git a/frontend/src/components/SidebarPlugin/SideBar.spec.js b/frontend/src/components/SidebarPlugin/SideBar.spec.js
deleted file mode 100644
index 7b12b6473..000000000
--- a/frontend/src/components/SidebarPlugin/SideBar.spec.js
+++ /dev/null
@@ -1,197 +0,0 @@
-import { mount, RouterLinkStub } from '@vue/test-utils'
-import SideBar from './SideBar'
-
-const localVue = global.localVue
-
-const storeDispatchMock = jest.fn()
-
-describe('SideBar', () => {
-  let wrapper
-
-  const stubs = {
-    RouterLink: RouterLinkStub,
-  }
-
-  const propsData = {
-    balance: 1234.56,
-  }
-
-  const mocks = {
-    $store: {
-      state: {
-        email: 'test@example.org',
-        publisherId: 123,
-        firstName: 'test',
-        lastName: 'example',
-        hasElopage: false,
-      },
-      dispatch: storeDispatchMock,
-    },
-    $i18n: {
-      locale: 'en',
-    },
-    $t: jest.fn((t) => t),
-    $n: jest.fn((n) => n),
-  }
-
-  const Wrapper = () => {
-    return mount(SideBar, { localVue, mocks, stubs, propsData })
-  }
-
-  describe('mount', () => {
-    beforeEach(() => {
-      wrapper = Wrapper()
-    })
-
-    it('renders the component', () => {
-      expect(wrapper.find('#sidenav-main').exists()).toBeTruthy()
-    })
-
-    describe('navbar button', () => {
-      it('has a navbar button', () => {
-        expect(wrapper.find('button.navbar-toggler').exists()).toBeTruthy()
-      })
-
-      it('calls showSidebar when clicked', async () => {
-        const spy = jest.spyOn(wrapper.vm.$sidebar, 'displaySidebar')
-        wrapper.find('button.navbar-toggler').trigger('click')
-        await wrapper.vm.$nextTick()
-        expect(spy).toHaveBeenCalledWith(true)
-      })
-    })
-
-    describe('balance', () => {
-      it('shows em-dash as balance while loading', () => {
-        expect(wrapper.find('div.row.text-center').text()).toBe('— GDD')
-      })
-
-      it('shows the when loaded', async () => {
-        wrapper.setProps({
-          pending: false,
-        })
-        await wrapper.vm.$nextTick()
-        expect(wrapper.find('div.row.text-center').text()).toBe('1234.56 GDD')
-      })
-    })
-
-    describe('close siedbar', () => {
-      it('calls closeSidebar when clicked', async () => {
-        const spy = jest.spyOn(wrapper.vm.$sidebar, 'displaySidebar')
-        wrapper.find('#sidenav-collapse-main').find('button.navbar-toggler').trigger('click')
-        await wrapper.vm.$nextTick()
-        expect(spy).toHaveBeenCalledWith(false)
-      })
-    })
-
-    describe('static menu items', () => {
-      describe("member's area without publisher ID", () => {
-        it('has a link to the elopage', () => {
-          expect(wrapper.findAll('li').at(0).text()).toContain('members_area')
-        })
-
-        it('has a badge', () => {
-          expect(wrapper.findAll('li').at(0).text()).toContain('!')
-        })
-
-        it('links to the elopage registration', () => {
-          expect(wrapper.findAll('li').at(0).find('a').attributes('href')).toBe(
-            'https://elopage.com/s/gradido/basic-de/payment?locale=en&prid=111&pid=123&firstName=test&lastName=example&email=test@example.org',
-          )
-        })
-
-        describe('with locale="de"', () => {
-          beforeEach(() => {
-            mocks.$i18n.locale = 'de'
-          })
-
-          it('links to the German elopage registration when locale is set to de', () => {
-            expect(wrapper.findAll('li').at(0).find('a').attributes('href')).toBe(
-              'https://elopage.com/s/gradido/basic-de/payment?locale=de&prid=111&pid=123&firstName=test&lastName=example&email=test@example.org',
-            )
-          })
-        })
-
-        describe("member's area with publisher ID", () => {
-          beforeEach(() => {
-            mocks.$store.state.hasElopage = true
-          })
-
-          it('links to the elopage member area', () => {
-            expect(wrapper.findAll('li').at(0).find('a').attributes('href')).toBe(
-              'https://elopage.com/s/gradido/sign_in?locale=de',
-            )
-          })
-
-          it('has no badge', () => {
-            expect(wrapper.findAll('li').at(0).text()).not.toContain('!')
-          })
-        })
-
-        describe("member's area with default publisher ID  and no elopage", () => {
-          beforeEach(() => {
-            mocks.$store.state.publisherId = null
-            mocks.$store.state.hasElopage = false
-          })
-
-          it('links to the elopage member area with default publisher ID', () => {
-            expect(wrapper.findAll('li').at(0).find('a').attributes('href')).toBe(
-              'https://elopage.com/s/gradido/basic-de/payment?locale=de&prid=111&pid=2896&firstName=test&lastName=example&email=test@example.org',
-            )
-          })
-
-          it('has a badge', () => {
-            expect(wrapper.findAll('li').at(0).text()).toContain('!')
-          })
-        })
-      })
-
-      describe('logout', () => {
-        it('has a logout button', () => {
-          expect(wrapper.findAll('li').at(1).text()).toBe('logout')
-        })
-
-        it('emits logout when logout is clicked', async () => {
-          wrapper.findAll('li').at(1).find('a').trigger('click')
-          await wrapper.vm.$nextTick()
-          expect(wrapper.emitted('logout')).toEqual([[]])
-        })
-      })
-
-      describe('admin-area', () => {
-        it('is not visible when not an admin', () => {
-          expect(wrapper.findAll('li').at(1).text()).not.toBe('admin_area')
-        })
-
-        describe('logged in as admin', () => {
-          const assignLocationSpy = jest.fn()
-          beforeEach(async () => {
-            mocks.$store.state.isAdmin = true
-            mocks.$store.state.token = 'valid-token'
-            window.location.assign = assignLocationSpy
-            wrapper = Wrapper()
-          })
-
-          it('is visible', () => {
-            expect(wrapper.findAll('li').at(1).text()).toBe('admin_area')
-          })
-
-          describe('click on admin area', () => {
-            beforeEach(async () => {
-              await wrapper.findAll('li').at(1).find('a').trigger('click')
-            })
-
-            it('opens a new window when clicked', () => {
-              expect(assignLocationSpy).toHaveBeenCalledWith(
-                'http://localhost/admin/authenticate?token=valid-token',
-              )
-            })
-
-            it('dispatches logout to store', () => {
-              expect(storeDispatchMock).toHaveBeenCalledWith('logout')
-            })
-          })
-        })
-      })
-    })
-  })
-})
diff --git a/frontend/src/components/SidebarPlugin/SideBar.vue b/frontend/src/components/SidebarPlugin/SideBar.vue
deleted file mode 100755
index 96882e816..000000000
--- a/frontend/src/components/SidebarPlugin/SideBar.vue
+++ /dev/null
@@ -1,145 +0,0 @@
-<template>
-  <nav
-    class="navbar navbar-vertical fixed-left navbar-expand-md navbar-light bg-transparent"
-    id="sidenav-main"
-  >
-    <div class="container-fluid">
-      <!--Toggler-->
-      <navbar-toggle-button @click.native="showSidebar"></navbar-toggle-button>
-      <div class="navbar-brand">
-        <img :src="logo" class="navbar-brand-img" alt="..." />
-      </div>
-      <b-row class="text-center">
-        <b-col>{{ pending ? '—' : $n(balance, 'decimal') }} GDD</b-col>
-      </b-row>
-      <slot name="mobile-right">
-        <ul class="nav align-items-center d-md-none">
-          <div class="media align-items-center">
-            <span class="avatar avatar-sm">
-              <vue-qrcode
-                v-if="$store.state.email"
-                :value="$store.state.email"
-                type="image/png"
-              ></vue-qrcode>
-            </span>
-          </div>
-        </ul>
-      </slot>
-      <slot></slot>
-      <div
-        v-show="$sidebar.showSidebar"
-        class="navbar-collapse collapse show"
-        id="sidenav-collapse-main"
-      >
-        <div class="navbar-collapse-header d-md-none">
-          <div class="row">
-            <div class="col-6 collapse-brand">
-              <img :src="logo" />
-            </div>
-            <div class="col-6 collapse-close">
-              <navbar-toggle-button @click.native="closeSidebar"></navbar-toggle-button>
-            </div>
-          </div>
-        </div>
-        <ul class="navbar-nav">
-          <slot name="links"></slot>
-        </ul>
-        <hr class="my-2" />
-
-        <ul class="navbar-nav ml-3">
-          <li class="nav-item">
-            <a :href="getElopageLink()" class="nav-link" target="_blank">
-              {{ $t('members_area') }}&nbsp;
-              <b-badge v-if="!$store.state.hasElopage" pill variant="danger">!</b-badge>
-            </a>
-          </li>
-        </ul>
-
-        <ul class="navbar-nav ml-3" v-if="$store.state.isAdmin">
-          <li class="nav-item">
-            <a class="nav-link pointer" @click="admin">
-              {{ $t('admin_area') }}
-            </a>
-          </li>
-        </ul>
-
-        <ul class="navbar-nav ml-3">
-          <li class="nav-item">
-            <a class="nav-link pointer" @click="logout">
-              {{ $t('logout') }}
-            </a>
-          </li>
-        </ul>
-      </div>
-    </div>
-  </nav>
-</template>
-<script>
-import NavbarToggleButton from '@/components/NavbarToggleButton'
-import VueQrcode from 'vue-qrcode'
-import CONFIG from '../../config'
-
-export default {
-  name: 'sidebar',
-  components: {
-    NavbarToggleButton,
-    VueQrcode,
-  },
-  props: {
-    logo: {
-      type: String,
-      default: 'img/brand/green.png',
-      description: 'Gradido Sidebar app logo',
-    },
-    value: { type: String },
-    autoClose: {
-      type: Boolean,
-      default: true,
-      description: 'Whether sidebar should autoclose on mobile when clicking an item',
-    },
-    balance: {
-      type: Number,
-      default: 0,
-    },
-    pending: {
-      type: Boolean,
-      default: true,
-    },
-  },
-  provide() {
-    return {
-      autoClose: this.autoClose,
-    }
-  },
-  methods: {
-    closeSidebar() {
-      this.$sidebar.displaySidebar(false)
-    },
-    showSidebar() {
-      this.$sidebar.displaySidebar(true)
-    },
-    logout() {
-      this.$emit('logout')
-    },
-    admin() {
-      window.location.assign(CONFIG.ADMIN_AUTH_URL.replace('$1', this.$store.state.token))
-      this.$store.dispatch('logout') // logout without redirect
-    },
-    getElopageLink() {
-      const pId = this.$store.state.publisherId
-        ? this.$store.state.publisherId
-        : CONFIG.DEFAULT_PUBLISHER_ID
-      return encodeURI(
-        this.$store.state.hasElopage
-          ? `https://elopage.com/s/gradido/sign_in?locale=${this.$i18n.locale}`
-          : `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}`,
-      )
-    },
-  },
-}
-</script>
-<style>
-.pointer {
-  cursor: pointer;
-}
-</style>
diff --git a/frontend/src/components/SidebarPlugin/SidebarItem.vue b/frontend/src/components/SidebarPlugin/SidebarItem.vue
deleted file mode 100755
index 309af33b0..000000000
--- a/frontend/src/components/SidebarPlugin/SidebarItem.vue
+++ /dev/null
@@ -1,189 +0,0 @@
-<template>
-  <b-nav-item
-    :is="baseComponent"
-    :to="link.path ? link.path : '/'"
-    class="nav-item"
-    :class="{ active: isActive }"
-  >
-    <a
-      v-if="isMenu"
-      class="sidebar-menu-item nav-link"
-      :class="{ active: isActive }"
-      :aria-expanded="!collapsed"
-      data-toggle="collapse"
-      @click.prevent="collapseMenu"
-    >
-      <template v-if="addLink">
-        <span class="nav-link-text">
-          {{ link.name }}
-          <b class="caret"></b>
-        </span>
-      </template>
-      <template v-else>
-        <i :class="link.icon"></i>
-        <span class="nav-link-text">
-          {{ link.name }}
-          <b class="caret"></b>
-        </span>
-      </template>
-    </a>
-
-    <collapse-transition>
-      <div v-if="$slots.default || this.isMenu" v-show="!collapsed" class="collapse show">
-        <ul class="nav nav-sm flex-column">
-          <slot></slot>
-        </ul>
-      </div>
-    </collapse-transition>
-
-    <slot name="title" v-if="children.length === 0 && !$slots.default && link.path">
-      <component
-        :to="link.path"
-        @click.native="linkClick"
-        :is="elementType(link, false)"
-        class="nav-link"
-        :class="{ active: link.active }"
-        :target="link.target"
-        :href="link.path"
-      >
-        <template v-if="addLink">
-          <span class="nav-link-text">{{ link.name }}</span>
-        </template>
-        <template v-else>
-          <i :class="link.icon"></i>
-          <span class="nav-link-text">{{ link.name }}</span>
-        </template>
-      </component>
-    </slot>
-  </b-nav-item>
-</template>
-<script>
-import { CollapseTransition } from 'vue2-transitions'
-
-export default {
-  name: 'sidebar-item',
-  components: {
-    CollapseTransition,
-  },
-  props: {
-    menu: {
-      type: Boolean,
-      default: false,
-      description:
-        "Whether the item is a menu. Most of the item it's not used and should be used only if you want to override the default behavior.",
-    },
-    link: {
-      type: Object,
-      default: () => {
-        return {
-          name: '',
-          path: '',
-          children: [],
-        }
-      },
-      description:
-        'Sidebar link. Can contain name, path, icon and other attributes. See examples for more info',
-    },
-  },
-  provide() {
-    return {
-      addLink: this.addChild,
-      removeLink: this.removeChild,
-    }
-  },
-  inject: {
-    addLink: { default: null },
-    removeLink: { default: null },
-    autoClose: {
-      default: true,
-    },
-  },
-  data() {
-    return {
-      children: [],
-      collapsed: true,
-    }
-  },
-  computed: {
-    baseComponent() {
-      return this.isMenu || this.link.isRoute ? 'li' : 'router-link'
-    },
-    linkPrefix() {
-      if (this.link.name) {
-        const words = this.link.name.split(' ')
-        return words.map((word) => word.substring(0, 1)).join('')
-      }
-      return ''
-    },
-    isMenu() {
-      return this.children.length > 0 || this.menu === true
-    },
-    isActive() {
-      if (this.$route && this.$route.path) {
-        const matchingRoute = this.children.find((c) => this.$route.path.startsWith(c.link.path))
-        if (matchingRoute !== undefined) {
-          return true
-        }
-      }
-      return false
-    },
-  },
-  methods: {
-    addChild(item) {
-      const index = this.$slots.default.indexOf(item.$vnode)
-      this.children.splice(index, 0, item)
-    },
-    removeChild(item) {
-      const tabs = this.children
-      const index = tabs.indexOf(item)
-      tabs.splice(index, 1)
-    },
-    elementType(link, isParent = true) {
-      if (link.isRoute === false) {
-        return isParent ? 'li' : 'a'
-      } else {
-        return 'router-link'
-      }
-    },
-    linkAbbreviation(name) {
-      const matches = name.match(/\b(\w)/g)
-      return matches.join('')
-    },
-    linkClick() {
-      if (this.autoClose && this.$sidebar && this.$sidebar.showSidebar === true) {
-        this.$sidebar.displaySidebar(false)
-      }
-    },
-    collapseMenu() {
-      this.collapsed = !this.collapsed
-    },
-    collapseSubMenu(link) {
-      link.collapsed = !link.collapsed
-    },
-  },
-  mounted() {
-    if (this.addLink) {
-      this.addLink(this)
-    }
-    if (this.link.collapsed !== undefined) {
-      this.collapsed = this.link.collapsed
-    }
-    if (this.isActive && this.isMenu) {
-      this.collapsed = false
-    }
-  },
-  destroyed() {
-    if (this.$el && this.$el.parentNode) {
-      this.$el.parentNode.removeChild(this.$el)
-    }
-    if (this.removeLink) {
-      this.removeLink(this)
-    }
-  },
-}
-</script>
-<style>
-.sidebar-menu-item {
-  cursor: pointer;
-}
-</style>
diff --git a/frontend/src/components/SidebarPlugin/index.js b/frontend/src/components/SidebarPlugin/index.js
deleted file mode 100755
index 4723f9952..000000000
--- a/frontend/src/components/SidebarPlugin/index.js
+++ /dev/null
@@ -1,41 +0,0 @@
-import Sidebar from './SideBar.vue'
-import SidebarItem from './SidebarItem.vue'
-
-const SidebarStore = {
-  showSidebar: false,
-  sidebarLinks: [],
-  isMinimized: false,
-  displaySidebar(value) {
-    this.showSidebar = value
-  },
-  toggleMinimize() {
-    document.body.classList.toggle('sidebar-mini')
-    const simulateWindowResize = setInterval(() => {
-      window.dispatchEvent(new Event('resize'))
-    }, 180)
-
-    setTimeout(() => {
-      clearInterval(simulateWindowResize)
-    }, 1000)
-
-    this.isMinimized = !this.isMinimized
-  },
-}
-
-const SidebarPlugin = {
-  install(Vue, options) {
-    if (options && options.sidebarLinks) {
-      SidebarStore.sidebarLinks = options.sidebarLinks
-    }
-    const app = new Vue({
-      data: {
-        sidebarStore: SidebarStore,
-      },
-    })
-    Vue.prototype.$sidebar = app.sidebarStore
-    Vue.component('side-bar', Sidebar)
-    Vue.component('sidebar-item', SidebarItem)
-  },
-}
-
-export default SidebarPlugin
diff --git a/frontend/src/components/index.js b/frontend/src/components/index.js
deleted file mode 100755
index 656f05d91..000000000
--- a/frontend/src/components/index.js
+++ /dev/null
@@ -1,5 +0,0 @@
-import NavbarToggleButton from './Navbar/NavbarToggleButton'
-
-import SidebarPlugin from './SidebarPlugin'
-
-export { SidebarPlugin, NavbarToggleButton }
diff --git a/frontend/src/plugins/dashboard-plugin.js b/frontend/src/plugins/dashboard-plugin.js
index 892a2d93c..d0113b631 100755
--- a/frontend/src/plugins/dashboard-plugin.js
+++ b/frontend/src/plugins/dashboard-plugin.js
@@ -1,6 +1,5 @@
 import GlobalComponents from './globalComponents'
 import GlobalDirectives from './globalDirectives'
-import SideBar from '@/components/SidebarPlugin'
 
 import Toasted from 'vue-toasted'
 
@@ -28,7 +27,6 @@ export default {
   install(Vue) {
     Vue.use(GlobalComponents)
     Vue.use(GlobalDirectives)
-    Vue.use(SideBar)
     Vue.use(BootstrapVue)
     Vue.use(IconsPlugin)
     Vue.use(VueMoment)
diff --git a/frontend/test/testSetup.js b/frontend/test/testSetup.js
index 9ae5777ec..cb50ccdb6 100644
--- a/frontend/test/testSetup.js
+++ b/frontend/test/testSetup.js
@@ -8,7 +8,6 @@ import * as rules from 'vee-validate/dist/rules'
 import { messages } from 'vee-validate/dist/locale/en.json'
 
 import RegeneratorRuntime from 'regenerator-runtime'
-import SideBar from '@/components/SidebarPlugin'
 import VueQrcode from 'vue-qrcode'
 
 import VueMoment from 'vue-moment'
@@ -41,7 +40,6 @@ global.localVue.use(BootstrapVue)
 global.localVue.use(Vuex)
 global.localVue.use(IconsPlugin)
 global.localVue.use(RegeneratorRuntime)
-global.localVue.use(SideBar)
 global.localVue.use(VueQrcode)
 global.localVue.use(VueMoment)
 global.localVue.component('validation-provider', ValidationProvider)

From 54016ee5e289e37dc4b3243994462d2a8acbe066 Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Wed, 8 Dec 2021 11:07:11 +0100
Subject: [PATCH 07/51] set sidbar an content in display: inline-flex

---
 .../src/views/Layout/DashboardLayout_gdd.vue  | 80 ++++++++++---------
 1 file changed, 43 insertions(+), 37 deletions(-)

diff --git a/frontend/src/views/Layout/DashboardLayout_gdd.vue b/frontend/src/views/Layout/DashboardLayout_gdd.vue
index 5280b13cd..858c3a260 100755
--- a/frontend/src/views/Layout/DashboardLayout_gdd.vue
+++ b/frontend/src/views/Layout/DashboardLayout_gdd.vue
@@ -1,8 +1,10 @@
 <template>
   <div>
     <b-navbar toggleable="lg" type="dark" variant="info">
-      <div class="navbar-brand">
+      <div class="navbar-brand" >
+        <router-link to="/overview" >
         <img :src="logo" class="navbar-brand-img" alt="..." />
+        </router-link>
       </div>
       <b-nav-text center>{{ balance }} GDD</b-nav-text>
       <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
@@ -33,45 +35,49 @@
         </b-navbar-nav>
       </b-collapse>
     </b-navbar>
-<div >
-     <div   class="d-none d-lg-flex shadow-lg" style="width: 300px; float:left" >
-          <b-sidebar id="sidebar-1" visible no-header-close  bg-variant="white"  >
-            <div class="px-3 py-2">
-              <p>
-                Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac
-                facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac,
-                vestibulum at eros.
-              </p>
-              <b-img src="https://picsum.photos/500/500/?image=54" fluid thumbnail></b-img>
+  <div style="display: inline-flex">
+      <div class="d-sm-none d-md-none d-lg-flex shadow-lg" style="width: 300px">
+        <b-sidebar id="sidebar-1" visible no-header-close bg-variant="false">
+          <div class="px-3 py-2">
+            <p></p>
+            <div class="mb-6">
+              <b-nav vertical class="w-200">
+                <b-nav-item to="/overview" class="mb-3" active>Overview</b-nav-item>
+                <b-nav-item to="/send" class="mb-3">Link</b-nav-item>
+                <b-nav-item to="/transactions" class="mb-3">Another Link</b-nav-item>
+                <b-nav-item to="/profile" class="mb-3" disabled>Disabled</b-nav-item>
+              </b-nav>
+              <hr />
+              <b-nav vertical class="w-100">
+                <b-nav-item class="mb-3" active>Active</b-nav-item>
+                <b-nav-item class="mb-3">Link</b-nav-item>
+                <b-nav-item class="mb-3">Another Link</b-nav-item>
+                <b-nav-item class="mb-3" disabled>Disabled</b-nav-item>
+              </b-nav>
             </div>
-           
-          </b-sidebar>
-        </div>
-        <div>
-          
-           <div>
-            <div @click="$sidebar.displaySidebar(false)">
-              <fade-transition :duration="200" origin="center top" mode="out-in">
-                <router-view
-                  ref="router-view"
-                  :balance="balance"
-                  :gdt-balance="GdtBalance"
-                  :transactions="transactions"
-                  :transactionCount="transactionCount"
-                  :pending="pending"
-                  @update-balance="updateBalance"
-                  @update-transactions="updateTransactions"
-                ></router-view>
-              </fade-transition>
-            </div>
-            <content-footer v-if="!$route.meta.hideFooter"></content-footer>
           </div>
-
-
-        </div>
-</div>
-
+        </b-sidebar>
+      </div>
      
+        <div>
+          <div>
+            <fade-transition :duration="200" origin="center top" mode="out-in">
+              <router-view
+                ref="router-view"
+                :balance="balance"
+                :gdt-balance="GdtBalance"
+                :transactions="transactions"
+                :transactionCount="transactionCount"
+                :pending="pending"
+                @update-balance="updateBalance"
+                @update-transactions="updateTransactions"
+              ></router-view>
+            </fade-transition>
+          </div>
+          <content-footer v-if="!$route.meta.hideFooter"></content-footer>
+        </div>
+  </div>
+    
   </div>
 </template>
 <script>

From 139e537e944afd3f7ad085313dd50d6f62b7aee8 Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Wed, 8 Dec 2021 17:27:19 +0100
Subject: [PATCH 08/51] add components Navbar, Sidebar

---
 frontend/src/components/Menu/Navbar.vue       | 58 +++++++++++
 frontend/src/components/Menu/Sidebar.vue      | 30 ++++++
 .../src/views/Layout/DashboardLayout_gdd.vue  | 98 +++++--------------
 3 files changed, 112 insertions(+), 74 deletions(-)
 create mode 100644 frontend/src/components/Menu/Navbar.vue
 create mode 100644 frontend/src/components/Menu/Sidebar.vue

diff --git a/frontend/src/components/Menu/Navbar.vue b/frontend/src/components/Menu/Navbar.vue
new file mode 100644
index 000000000..b91d4763c
--- /dev/null
+++ b/frontend/src/components/Menu/Navbar.vue
@@ -0,0 +1,58 @@
+<template>
+  <div>
+    <b-navbar toggleable="lg" type="dark" variant="info">
+      <div class="navbar-brand">
+        <router-link to="/overview">
+          <img :src="logo" class="navbar-brand-img" alt="..." />
+        </router-link>
+      </div>
+      <b-nav-text center>{{ balance }} GDD</b-nav-text>
+      <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
+
+      <b-collapse id="nav-collapse" is-nav>
+        <b-navbar-nav class="d-none d-md-flex d-sm-flex">
+          <b-nav-item to="/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>
+          <hr />
+          <b-nav-item to="/overview" class="mb-3" active>Overview</b-nav-item>
+          <b-nav-item to="/send" class="mb-3">Link</b-nav-item>
+          <b-nav-item to="/transactions" class="mb-3">Another Link</b-nav-item>
+          <b-nav-item to="/profile" class="mb-3" disabled>Disabled</b-nav-item>
+        </b-navbar-nav>
+
+        <!-- Right aligned nav items -->
+        <b-navbar-nav class="ml-auto">
+          <b-nav-item-dropdown right>
+            <!-- Using 'button-content' slot -->
+            <template #button-content>
+              <em>
+                {{ $store.state.email }}
+              </em>
+            </template>
+            <b-dropdown-item to="/profile">{{ $t('site.navbar.my-profil') }}</b-dropdown-item>
+            <b-dropdown-item @click="this.$emit('get-elopage-link')" target="_blank">
+              {{ $t('members_area') }}
+            </b-dropdown-item>
+            <b-dropdown-item @click="this.$emit('admin')" target="_blank">
+              {{ $t('admin_area') }}
+            </b-dropdown-item>
+            <b-dropdown-item href="/#" @click="this.$emit('logout')">
+              {{ $t('logout') }}
+            </b-dropdown-item>
+          </b-nav-item-dropdown>
+        </b-navbar-nav>
+      </b-collapse>
+    </b-navbar>
+  </div>
+</template>
+<script>
+export default {
+  name: 'navbar',
+  data() {
+    return {
+      logo: 'img/brand/green.png',
+    }
+  },
+}
+</script>
diff --git a/frontend/src/components/Menu/Sidebar.vue b/frontend/src/components/Menu/Sidebar.vue
new file mode 100644
index 000000000..c7472218c
--- /dev/null
+++ b/frontend/src/components/Menu/Sidebar.vue
@@ -0,0 +1,30 @@
+<template>
+  <div>
+      
+   
+      <div class="px-3 py-2">
+        <p></p>
+        <div class="mb-6">
+          <b-nav vertical class="w-200">
+            <b-nav-item to="/overview" class="mb-3" active>Overview</b-nav-item>
+            <b-nav-item to="/send" class="mb-3">Link</b-nav-item>
+            <b-nav-item to="/transactions" class="mb-3">Another Link</b-nav-item>
+            <b-nav-item to="/profile" class="mb-3" disabled>Disabled</b-nav-item>
+          </b-nav>
+          <hr />
+          <b-nav vertical class="w-100">
+            <b-nav-item class="mb-3" active>Active</b-nav-item>
+            <b-nav-item class="mb-3">Link</b-nav-item>
+            <b-nav-item class="mb-3">Another Link</b-nav-item>
+            <b-nav-item class="mb-3" disabled>Disabled</b-nav-item>
+          </b-nav>
+        </div>
+      </div>
+ 
+  </div>
+</template>
+<script>
+export default {
+  name: 'sidebar',
+}
+</script>
diff --git a/frontend/src/views/Layout/DashboardLayout_gdd.vue b/frontend/src/views/Layout/DashboardLayout_gdd.vue
index 858c3a260..6340fc2b5 100755
--- a/frontend/src/views/Layout/DashboardLayout_gdd.vue
+++ b/frontend/src/views/Layout/DashboardLayout_gdd.vue
@@ -1,86 +1,34 @@
 <template>
   <div>
-    <b-navbar toggleable="lg" type="dark" variant="info">
-      <div class="navbar-brand" >
-        <router-link to="/overview" >
-        <img :src="logo" class="navbar-brand-img" alt="..." />
-        </router-link>
+    <navbar @get-elopage-link="getElopageLink" @admin="admin" />
+    <div style="display: inline-flex">
+      <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" />
       </div>
-      <b-nav-text center>{{ balance }} GDD</b-nav-text>
-      <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
 
-      <b-collapse id="nav-collapse" is-nav>
-        <b-navbar-nav class="d-none d-md-flex d-sm-flex">
-          <b-nav-item to="/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-navbar-nav>
-
-        <!-- Right aligned nav items -->
-        <b-navbar-nav class="ml-auto">
-          <b-nav-item-dropdown right>
-            <!-- Using 'button-content' slot -->
-            <template #button-content>
-              <em>
-                {{ $store.state.email }}
-              </em>
-            </template>
-            <b-dropdown-item to="/profile">{{ $t('site.navbar.my-profil') }}</b-dropdown-item>
-            <b-dropdown-item @click="getElopageLink" target="_blank">
-              {{ $t('members_area') }}
-            </b-dropdown-item>
-            <b-dropdown-item target="_blank" @click="admin">{{ $t('admin_area') }}</b-dropdown-item>
-            <b-dropdown-item href="/#" @click="logout">{{ $t('logout') }}</b-dropdown-item>
-          </b-nav-item-dropdown>
-        </b-navbar-nav>
-      </b-collapse>
-    </b-navbar>
-  <div style="display: inline-flex">
-      <div class="d-sm-none d-md-none d-lg-flex shadow-lg" style="width: 300px">
-        <b-sidebar id="sidebar-1" visible no-header-close bg-variant="false">
-          <div class="px-3 py-2">
-            <p></p>
-            <div class="mb-6">
-              <b-nav vertical class="w-200">
-                <b-nav-item to="/overview" class="mb-3" active>Overview</b-nav-item>
-                <b-nav-item to="/send" class="mb-3">Link</b-nav-item>
-                <b-nav-item to="/transactions" class="mb-3">Another Link</b-nav-item>
-                <b-nav-item to="/profile" class="mb-3" disabled>Disabled</b-nav-item>
-              </b-nav>
-              <hr />
-              <b-nav vertical class="w-100">
-                <b-nav-item class="mb-3" active>Active</b-nav-item>
-                <b-nav-item class="mb-3">Link</b-nav-item>
-                <b-nav-item class="mb-3">Another Link</b-nav-item>
-                <b-nav-item class="mb-3" disabled>Disabled</b-nav-item>
-              </b-nav>
-            </div>
-          </div>
-        </b-sidebar>
-      </div>
-     
+      <div>
         <div>
-          <div>
-            <fade-transition :duration="200" origin="center top" mode="out-in">
-              <router-view
-                ref="router-view"
-                :balance="balance"
-                :gdt-balance="GdtBalance"
-                :transactions="transactions"
-                :transactionCount="transactionCount"
-                :pending="pending"
-                @update-balance="updateBalance"
-                @update-transactions="updateTransactions"
-              ></router-view>
-            </fade-transition>
-          </div>
-          <content-footer v-if="!$route.meta.hideFooter"></content-footer>
+          <fade-transition :duration="200" origin="center top" mode="out-in">
+            <router-view
+              ref="router-view"
+              :balance="balance"
+              :gdt-balance="GdtBalance"
+              :transactions="transactions"
+              :transactionCount="transactionCount"
+              :pending="pending"
+              @update-balance="updateBalance"
+              @update-transactions="updateTransactions"
+            ></router-view>
+          </fade-transition>
         </div>
-  </div>
-    
+        <content-footer v-if="!$route.meta.hideFooter"></content-footer>
+      </div>
+    </div>
   </div>
 </template>
 <script>
+import Navbar from '../../components/Menu/Navbar.vue'
+import Sidebar from '../../components/Menu/Sidebar.vue'
 import { logout, transactionsQuery } from '../../graphql/queries'
 import ContentFooter from './ContentFooter.vue'
 import { FadeTransition } from 'vue2-transitions'
@@ -88,6 +36,8 @@ import CONFIG from '../../config'
 
 export default {
   components: {
+    Navbar,
+    Sidebar,
     ContentFooter,
     FadeTransition,
   },

From adadbf27200f5f3c9b575eaa0c879ffe86fdcf73 Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Wed, 8 Dec 2021 17:44:16 +0100
Subject: [PATCH 09/51] add links in components Navbar

---
 frontend/src/components/Menu/Navbar.vue       | 35 +++++++++++++++----
 frontend/src/components/Menu/Sidebar.vue      |  8 ++---
 .../src/views/Layout/DashboardLayout_gdd.vue  |  4 +--
 3 files changed, 34 insertions(+), 13 deletions(-)

diff --git a/frontend/src/components/Menu/Navbar.vue b/frontend/src/components/Menu/Navbar.vue
index b91d4763c..7e7e15e93 100644
--- a/frontend/src/components/Menu/Navbar.vue
+++ b/frontend/src/components/Menu/Navbar.vue
@@ -7,18 +7,30 @@
         </router-link>
       </div>
       <b-nav-text center>{{ balance }} GDD</b-nav-text>
-      <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
-
-      <b-collapse id="nav-collapse" is-nav>
+      
+      <b-collapse id="nav-collapse">
         <b-navbar-nav class="d-none d-md-flex d-sm-flex">
           <b-nav-item to="/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 to="/overview" class="mb-3" active>Overview</b-nav-item>
-          <b-nav-item to="/send" class="mb-3">Link</b-nav-item>
-          <b-nav-item to="/transactions" class="mb-3">Another Link</b-nav-item>
-          <b-nav-item to="/profile" class="mb-3" disabled>Disabled</b-nav-item>
+          <b-nav-item to="/#" class="mb-3" @click="this.$emit('get-elopage-link')" target="_blank">
+            {{ $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"
+            to="/#"
+            class="mb-3"
+            @click="this.$emit('admin')"
+            target="_blank"
+          >
+            {{ $t('admin_area') }}
+          </b-nav-item>
+          <b-nav-item to="/#" class="mb-3" @click="this.$emit('logout')">
+            {{ $t('logout') }}
+          </b-nav-item>
         </b-navbar-nav>
 
         <!-- Right aligned nav items -->
@@ -43,12 +55,21 @@
           </b-nav-item-dropdown>
         </b-navbar-nav>
       </b-collapse>
+
+      <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
+
     </b-navbar>
   </div>
 </template>
 <script>
 export default {
   name: 'navbar',
+  props: {
+    balance: {
+      type: Number,
+      required: true,
+    },
+  },
   data() {
     return {
       logo: 'img/brand/green.png',
diff --git a/frontend/src/components/Menu/Sidebar.vue b/frontend/src/components/Menu/Sidebar.vue
index c7472218c..a91d31177 100644
--- a/frontend/src/components/Menu/Sidebar.vue
+++ b/frontend/src/components/Menu/Sidebar.vue
@@ -6,10 +6,10 @@
         <p></p>
         <div class="mb-6">
           <b-nav vertical class="w-200">
-            <b-nav-item to="/overview" class="mb-3" active>Overview</b-nav-item>
-            <b-nav-item to="/send" class="mb-3">Link</b-nav-item>
-            <b-nav-item to="/transactions" class="mb-3">Another Link</b-nav-item>
-            <b-nav-item to="/profile" class="mb-3" disabled>Disabled</b-nav-item>
+            <b-nav-item to="/overview" class="mb-3" active>{{ $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" disabled>{{ $t('profile') }}</b-nav-item>
           </b-nav>
           <hr />
           <b-nav vertical class="w-100">
diff --git a/frontend/src/views/Layout/DashboardLayout_gdd.vue b/frontend/src/views/Layout/DashboardLayout_gdd.vue
index 6340fc2b5..aa343b60b 100755
--- a/frontend/src/views/Layout/DashboardLayout_gdd.vue
+++ b/frontend/src/views/Layout/DashboardLayout_gdd.vue
@@ -1,9 +1,9 @@
 <template>
   <div>
-    <navbar @get-elopage-link="getElopageLink" @admin="admin" />
+    <navbar :balance="balance" @get-elopage-link="getElopageLink" @admin="admin" @logout="logout"/>
     <div style="display: inline-flex">
       <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" />
+        <sidebar @get-elopage-link="getElopageLink" @admin="admin" @logout="logout" />
       </div>
 
       <div>

From bcc66691efaaf23ee34ced2b48fb22ecdbad5374 Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Thu, 9 Dec 2021 09:02:50 +0100
Subject: [PATCH 10/51] add emit for logout on Navbar and Sidebar

---
 frontend/src/components/Menu/Navbar.vue        | 18 ++++++++----------
 frontend/src/components/Menu/Sidebar.vue       |  2 +-
 .../src/views/Layout/DashboardLayout_gdd.vue   |  4 +---
 3 files changed, 10 insertions(+), 14 deletions(-)

diff --git a/frontend/src/components/Menu/Navbar.vue b/frontend/src/components/Menu/Navbar.vue
index 7e7e15e93..50651209c 100644
--- a/frontend/src/components/Menu/Navbar.vue
+++ b/frontend/src/components/Menu/Navbar.vue
@@ -7,28 +7,29 @@
         </router-link>
       </div>
       <b-nav-text center>{{ balance }} GDD</b-nav-text>
-      
-      <b-collapse id="nav-collapse">
-        <b-navbar-nav class="d-none d-md-flex d-sm-flex">
+      <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
+
+      <b-collapse id="nav-collapse" is-nav>
+        <b-navbar-nav >
           <b-nav-item to="/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 to="/#" class="mb-3" @click="this.$emit('get-elopage-link')" target="_blank">
+          <b-nav-item to="#" class="mb-3" @click="this.$emit('get-elopage-link')" target="_blank">
             {{ $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"
-            to="/#"
+            to="#"
             class="mb-3"
             @click="this.$emit('admin')"
             target="_blank"
           >
             {{ $t('admin_area') }}
           </b-nav-item>
-          <b-nav-item to="/#" class="mb-3" @click="this.$emit('logout')">
+          <b-nav-item class="mb-3" @click="$emit('logout')">
             {{ $t('logout') }}
           </b-nav-item>
         </b-navbar-nav>
@@ -49,15 +50,12 @@
             <b-dropdown-item @click="this.$emit('admin')" target="_blank">
               {{ $t('admin_area') }}
             </b-dropdown-item>
-            <b-dropdown-item href="/#" @click="this.$emit('logout')">
+            <b-dropdown-item @click="$emit('logout')">
               {{ $t('logout') }}
             </b-dropdown-item>
           </b-nav-item-dropdown>
         </b-navbar-nav>
       </b-collapse>
-
-      <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
-
     </b-navbar>
   </div>
 </template>
diff --git a/frontend/src/components/Menu/Sidebar.vue b/frontend/src/components/Menu/Sidebar.vue
index a91d31177..40c02c2fd 100644
--- a/frontend/src/components/Menu/Sidebar.vue
+++ b/frontend/src/components/Menu/Sidebar.vue
@@ -16,7 +16,7 @@
             <b-nav-item class="mb-3" active>Active</b-nav-item>
             <b-nav-item class="mb-3">Link</b-nav-item>
             <b-nav-item class="mb-3">Another Link</b-nav-item>
-            <b-nav-item class="mb-3" disabled>Disabled</b-nav-item>
+            <b-nav-item class="mb-3" @click="$emit('logout')">{{ $t('logout') }}</b-nav-item>
           </b-nav>
         </div>
       </div>
diff --git a/frontend/src/views/Layout/DashboardLayout_gdd.vue b/frontend/src/views/Layout/DashboardLayout_gdd.vue
index aa343b60b..80a58432b 100755
--- a/frontend/src/views/Layout/DashboardLayout_gdd.vue
+++ b/frontend/src/views/Layout/DashboardLayout_gdd.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <navbar :balance="balance" @get-elopage-link="getElopageLink" @admin="admin" @logout="logout"/>
+    <navbar :balance="balance" @get-elopage-link="getElopageLink" @admin="admin" @logout="logout" />
     <div style="display: inline-flex">
       <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" />
@@ -59,12 +59,10 @@ export default {
           query: logout,
         })
         .then(() => {
-          this.$sidebar.displaySidebar(false)
           this.$store.dispatch('logout')
           this.$router.push('/login')
         })
         .catch(() => {
-          this.$sidebar.displaySidebar(false)
           this.$store.dispatch('logout')
           if (this.$router.currentRoute.path !== '/login') this.$router.push('/login')
         })

From 9cfb6716b2c98b5e6b02c293136397699594f5b0 Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Thu, 9 Dec 2021 09:08:05 +0100
Subject: [PATCH 11/51] add emit for adminarea  on Navbar and Sidebar

---
 frontend/src/components/Menu/Navbar.vue  | 31 +++---------------------
 frontend/src/components/Menu/Sidebar.vue |  2 +-
 2 files changed, 5 insertions(+), 28 deletions(-)

diff --git a/frontend/src/components/Menu/Navbar.vue b/frontend/src/components/Menu/Navbar.vue
index 50651209c..d7e26f593 100644
--- a/frontend/src/components/Menu/Navbar.vue
+++ b/frontend/src/components/Menu/Navbar.vue
@@ -10,23 +10,17 @@
       <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
 
       <b-collapse id="nav-collapse" is-nav>
-        <b-navbar-nav >
+        <b-navbar-nav>
           <b-nav-item to="/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 to="#" class="mb-3" @click="this.$emit('get-elopage-link')" target="_blank">
+          <b-nav-item to="#" 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"
-            to="#"
-            class="mb-3"
-            @click="this.$emit('admin')"
-            target="_blank"
-          >
+          <b-nav-item v-if="$store.state.isAdmin" to="#" class="mb-3" @click="$emit('admin')">
             {{ $t('admin_area') }}
           </b-nav-item>
           <b-nav-item class="mb-3" @click="$emit('logout')">
@@ -36,24 +30,7 @@
 
         <!-- Right aligned nav items -->
         <b-navbar-nav class="ml-auto">
-          <b-nav-item-dropdown right>
-            <!-- Using 'button-content' slot -->
-            <template #button-content>
-              <em>
-                {{ $store.state.email }}
-              </em>
-            </template>
-            <b-dropdown-item to="/profile">{{ $t('site.navbar.my-profil') }}</b-dropdown-item>
-            <b-dropdown-item @click="this.$emit('get-elopage-link')" target="_blank">
-              {{ $t('members_area') }}
-            </b-dropdown-item>
-            <b-dropdown-item @click="this.$emit('admin')" target="_blank">
-              {{ $t('admin_area') }}
-            </b-dropdown-item>
-            <b-dropdown-item @click="$emit('logout')">
-              {{ $t('logout') }}
-            </b-dropdown-item>
-          </b-nav-item-dropdown>
+          <b-nav-item to="/profile" right>{{ $store.state.email }}</b-nav-item>
         </b-navbar-nav>
       </b-collapse>
     </b-navbar>
diff --git a/frontend/src/components/Menu/Sidebar.vue b/frontend/src/components/Menu/Sidebar.vue
index 40c02c2fd..d1409a681 100644
--- a/frontend/src/components/Menu/Sidebar.vue
+++ b/frontend/src/components/Menu/Sidebar.vue
@@ -15,7 +15,7 @@
           <b-nav vertical class="w-100">
             <b-nav-item class="mb-3" active>Active</b-nav-item>
             <b-nav-item class="mb-3">Link</b-nav-item>
-            <b-nav-item class="mb-3">Another Link</b-nav-item>
+            <b-nav-item class="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-nav>
         </div>

From 1010997d3a194cbc1cabcdec00db713c3e42d1e9 Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Thu, 9 Dec 2021 09:56:21 +0100
Subject: [PATCH 12/51] sidebar and content fixed size, navbar variant
 tranparent

---
 frontend/src/components/Menu/Navbar.vue       | 57 +++++++++----------
 frontend/src/components/Menu/Sidebar.vue      | 43 +++++++-------
 .../src/views/Layout/DashboardLayout_gdd.vue  |  4 +-
 3 files changed, 53 insertions(+), 51 deletions(-)

diff --git a/frontend/src/components/Menu/Navbar.vue b/frontend/src/components/Menu/Navbar.vue
index d7e26f593..10e5ec858 100644
--- a/frontend/src/components/Menu/Navbar.vue
+++ b/frontend/src/components/Menu/Navbar.vue
@@ -1,38 +1,37 @@
 <template>
   <div>
-    <b-navbar toggleable="lg" type="dark" variant="info">
+    <b-navbar toggleable="lg" type="light" variant="trans">
       <div class="navbar-brand">
-        <router-link to="/overview">
-          <img :src="logo" class="navbar-brand-img" alt="..." />
-        </router-link>
+        <b-navbar-nav>
+          <b-nav-item to="/overview">
+            <img :src="logo" class="navbar-brand-img" alt="..." />
+          </b-nav-item>
+        </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">{{ $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="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 target="nav-collapse"></b-navbar-toggle>
-
-      <b-collapse id="nav-collapse" is-nav>
-        <b-navbar-nav>
-          <b-nav-item to="/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 to="#" 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" to="#" class="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>
-
-        <!-- Right aligned nav items -->
-        <b-navbar-nav class="ml-auto">
-          <b-nav-item to="/profile" right>{{ $store.state.email }}</b-nav-item>
-        </b-navbar-nav>
-      </b-collapse>
     </b-navbar>
   </div>
 </template>
diff --git a/frontend/src/components/Menu/Sidebar.vue b/frontend/src/components/Menu/Sidebar.vue
index d1409a681..1072c6709 100644
--- a/frontend/src/components/Menu/Sidebar.vue
+++ b/frontend/src/components/Menu/Sidebar.vue
@@ -1,26 +1,29 @@
 <template>
   <div>
-      
-   
-      <div class="px-3 py-2">
-        <p></p>
-        <div class="mb-6">
-          <b-nav vertical class="w-200">
-            <b-nav-item to="/overview" class="mb-3" active>{{ $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" disabled>{{ $t('profile') }}</b-nav-item>
-          </b-nav>
-          <hr />
-          <b-nav vertical class="w-100">
-            <b-nav-item class="mb-3" active>Active</b-nav-item>
-            <b-nav-item class="mb-3">Link</b-nav-item>
-            <b-nav-item class="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-nav>
-        </div>
+    <div class="px-3 py-2">
+      <p></p>
+      <div class="mb-6">
+        <b-nav vertical class="w-200">
+          <b-nav-item to="/overview" class="mb-3" active>{{ $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>
+        </b-nav>
+        <hr />
+        <b-nav vertical class="w-100">
+          <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>
       </div>
- 
+    </div>
   </div>
 </template>
 <script>
diff --git a/frontend/src/views/Layout/DashboardLayout_gdd.vue b/frontend/src/views/Layout/DashboardLayout_gdd.vue
index 80a58432b..d9ec8de24 100755
--- a/frontend/src/views/Layout/DashboardLayout_gdd.vue
+++ b/frontend/src/views/Layout/DashboardLayout_gdd.vue
@@ -1,12 +1,12 @@
 <template>
   <div>
     <navbar :balance="balance" @get-elopage-link="getElopageLink" @admin="admin" @logout="logout" />
-    <div style="display: inline-flex">
+    <div style="display: inline-flex; width: 100%">
       <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>
 
-      <div>
+      <div class="ml-2 mr-2" style="width: 100%">
         <div>
           <fade-transition :duration="200" origin="center top" mode="out-in">
             <router-view

From 1813b7b434515f68830e749b2cb2754ebabc2379 Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Thu, 9 Dec 2021 11:27:29 +0100
Subject: [PATCH 13/51] tests for Navbar and Sidebar

---
 frontend/src/components/Menu/Navbar.spec.js  | 57 ++++++++++++++++++++
 frontend/src/components/Menu/Navbar.vue      | 10 ++--
 frontend/src/components/Menu/Sidebar.spec.js | 34 ++++++++++++
 frontend/src/components/Menu/Sidebar.vue     |  2 +-
 4 files changed, 99 insertions(+), 4 deletions(-)
 create mode 100644 frontend/src/components/Menu/Navbar.spec.js
 create mode 100644 frontend/src/components/Menu/Sidebar.spec.js

diff --git a/frontend/src/components/Menu/Navbar.spec.js b/frontend/src/components/Menu/Navbar.spec.js
new file mode 100644
index 000000000..fba63d65a
--- /dev/null
+++ b/frontend/src/components/Menu/Navbar.spec.js
@@ -0,0 +1,57 @@
+import { mount } from '@vue/test-utils'
+import Navbar from './Navbar'
+
+const localVue = global.localVue
+
+const propsData = {
+  balance: 1234,
+}
+
+const mocks = {
+  $i18n: {
+    locale: 'en',
+  },
+  $t: jest.fn((t) => t),
+  $store: {
+    state: {
+      hasElopage: true,
+      isAdmin: true,
+    },
+  },
+}
+
+describe('Navbar', () => {
+  let wrapper
+
+  const Wrapper = () => {
+    return mount(Navbar, { localVue, propsData, mocks })
+  }
+
+  describe('mount', () => {
+    beforeEach(() => {
+      wrapper = Wrapper()
+    })
+
+    it('renders the component', () => {
+      expect(wrapper.find('div.component-navbar').exists()).toBeTruthy()
+    })
+  })
+  // describe('find link admin and evented click', () => {
+  //   beforeEach(async () => {
+  //     await wrapper.find('.test-admin').trigger('click')
+  //   })
+
+  //   it('find link admin and click', () => {
+  //     expect(wrapper.emitted('admin')).toBeTruthy()
+  //     expect(wrapper.emitted('admin')).toEqual([
+  //       [
+  //         {
+  //           email: 'someone@watches.tv',
+  //           amount: 87.23,
+  //           memo: 'Long enough',
+  //         },
+  //       ],
+  //     ])
+  //   })
+  // })
+})
diff --git a/frontend/src/components/Menu/Navbar.vue b/frontend/src/components/Menu/Navbar.vue
index 10e5ec858..3a48aa8b7 100644
--- a/frontend/src/components/Menu/Navbar.vue
+++ b/frontend/src/components/Menu/Navbar.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="component-navbar">
     <b-navbar toggleable="lg" type="light" variant="trans">
       <div class="navbar-brand">
         <b-navbar-nav>
@@ -13,7 +13,7 @@
       <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">{{ $t('overview') }}</b-nav-item>
+            <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>
@@ -22,7 +22,11 @@
               {{ $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="mb-3" @click="$emit('admin')">
+            <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')">
diff --git a/frontend/src/components/Menu/Sidebar.spec.js b/frontend/src/components/Menu/Sidebar.spec.js
new file mode 100644
index 000000000..4a5b8f930
--- /dev/null
+++ b/frontend/src/components/Menu/Sidebar.spec.js
@@ -0,0 +1,34 @@
+import { mount } from '@vue/test-utils'
+import Sidebar from './Sidebar.vue'
+
+const localVue = global.localVue
+
+describe('Sidebar', () => {
+  let wrapper
+
+  const mocks = {
+    $i18n: {
+      locale: 'en',
+    },
+    $t: jest.fn((t) => t),
+    $store: {
+      state: {
+        hasElopage: true,
+        isAdmin: true,
+      },
+    },
+  }
+
+  const Wrapper = () => {
+    return mount(Sidebar, { localVue, mocks })
+  }
+
+  describe('mount', () => {
+    beforeEach(() => {
+      wrapper = Wrapper()
+    })
+    it('renders the component', () => {
+      expect(wrapper.find('div#component-sidebar').exists()).toBeTruthy()
+    })
+  })
+})
diff --git a/frontend/src/components/Menu/Sidebar.vue b/frontend/src/components/Menu/Sidebar.vue
index 1072c6709..c9f1356a6 100644
--- a/frontend/src/components/Menu/Sidebar.vue
+++ b/frontend/src/components/Menu/Sidebar.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div id="component-sidebar">
     <div class="px-3 py-2">
       <p></p>
       <div class="mb-6">

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 14/51] 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>

From 86c67e2a26b171a9606d90c3cf5e1ed159e68669 Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Thu, 9 Dec 2021 15:01:20 +0100
Subject: [PATCH 15/51] yarn fix lint

---
 frontend/src/components/Menu/Navbar.vue | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/Menu/Navbar.vue b/frontend/src/components/Menu/Navbar.vue
index 88a5f5af5..68b3105a1 100644
--- a/frontend/src/components/Menu/Navbar.vue
+++ b/frontend/src/components/Menu/Navbar.vue
@@ -41,7 +41,13 @@
       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;"
+      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">

From d43783c51267ee1016bf2dfa6f55fe9d46c41d69 Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Thu, 9 Dec 2021 15:15:19 +0100
Subject: [PATCH 16/51] css style remove from element to style area

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

diff --git a/frontend/src/components/Menu/Navbar.vue b/frontend/src/components/Menu/Navbar.vue
index 68b3105a1..71ba2f4af 100644
--- a/frontend/src/components/Menu/Navbar.vue
+++ b/frontend/src/components/Menu/Navbar.vue
@@ -37,18 +37,7 @@
       </div>
       <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-collapse id="collapse-4" v-model="visible" class="p-3 b-collaps-gradido">
       <b-nav vertical @click="visible = false">
         <b-nav-item to="/overview" class="mb-3">
           {{ $t('overview') }}
@@ -90,3 +79,12 @@ export default {
   },
 }
 </script>
+<style>
+.b-collaps-gradido {
+  position: absolute;
+  z-index: 100000;
+  background-color: #dfe0e3f5;
+  width: 100%;
+  box-shadow: cadetblue 0px 13px 22px;
+}
+</style>
diff --git a/frontend/src/views/Layout/DashboardLayout_gdd.vue b/frontend/src/views/Layout/DashboardLayout_gdd.vue
index f432dcdf2..872392a72 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%; height: 91%; position: absolute">
+    <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" />
       </div>
@@ -116,6 +116,12 @@ export default {
 }
 </script>
 <style>
+.content-gradido {
+  display: inline-flex;
+  width: 100%;
+  height: 91%;
+  position: absolute;
+}
 .navbar-brand-img {
   height: 2rem;
   padding-left: 10px;

From d583b728840dd313ebc47e32d66d568272dbb195 Mon Sep 17 00:00:00 2001
From: Ulf Gebhardt <ulf.gebhardt@webcraft-media.de>
Date: Thu, 9 Dec 2021 22:57:57 +0100
Subject: [PATCH 17/51] database requires external-net to fetch packages

---
 docker-compose.override.yml | 3 ---
 docker-compose.yml          | 4 +---
 2 files changed, 1 insertion(+), 6 deletions(-)

diff --git a/docker-compose.override.yml b/docker-compose.override.yml
index 83f38a95f..cdaf46a7a 100644
--- a/docker-compose.override.yml
+++ b/docker-compose.override.yml
@@ -68,9 +68,6 @@ services:
     image: gradido/database:test_up
     build:
       target: test_up
-    #networks:
-    #  - external-net
-    #  - internal-net
     environment:
       - NODE_ENV="development"
     volumes:
diff --git a/docker-compose.yml b/docker-compose.yml
index 9352fd162..ae72f3137 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -116,12 +116,10 @@ services:
       - mariadb
     networks:
       - internal-net
-    #ports:
-    #  - 4000:4000
+      - external-net # this is required to fetch the packages
     environment:
       # Envs used in Dockerfile
       # - DOCKER_WORKDIR="/app"
-      # - PORT=4000
       - BUILD_DATE
       - BUILD_VERSION
       - BUILD_COMMIT

From 04d2ae1b82663dcbde3cddfc580367944e2cc541 Mon Sep 17 00:00:00 2001
From: Ulf Gebhardt <ulf.gebhardt@webcraft-media.de>
Date: Thu, 9 Dec 2021 22:58:15 +0100
Subject: [PATCH 18/51] cleaned docker file and update node version from 12 to
 17

---
 database/Dockerfile | 10 ++--------
 1 file changed, 2 insertions(+), 8 deletions(-)

diff --git a/database/Dockerfile b/database/Dockerfile
index f2048284b..ec0537ddf 100644
--- a/database/Dockerfile
+++ b/database/Dockerfile
@@ -1,7 +1,7 @@
 ##################################################################################
 # BASE ###########################################################################
 ##################################################################################
-FROM node:12.19.0-alpine3.10 as base
+FROM node:17-alpine as base
 
 # ENVs (available in production aswell, can be overwritten by commandline or env file)
 ## DOCKER_WORKDIR would be a classical ARG, but that is not multi layer persistent - shame
@@ -14,8 +14,6 @@ ENV BUILD_VERSION="0.0.0.0"
 ENV BUILD_COMMIT="0000000"
 ## SET NODE_ENV
 ENV NODE_ENV="production"
-## App relevant Envs
-#ENV PORT="4000"
 
 # Labels
 LABEL org.label-schema.build-date="${BUILD_DATE}"
@@ -34,10 +32,6 @@ LABEL maintainer="support@gradido.net"
 ## install: git
 #RUN apk --no-cache add git
 
-# Settings
-## Expose Container Port
-# EXPOSE ${PORT}
-
 ## Workdir
 RUN mkdir -p ${DOCKER_WORKDIR}
 WORKDIR ${DOCKER_WORKDIR}
@@ -99,7 +93,7 @@ FROM base as production
 # Copy "binary"-files from build image
 COPY --from=build ${DOCKER_WORKDIR}/build ./build
 # We also copy the node_modules express and serve-static for the run script
- COPY --from=build ${DOCKER_WORKDIR}/node_modules ./node_modules
+COPY --from=build ${DOCKER_WORKDIR}/node_modules ./node_modules
 # Copy static files
 # COPY --from=build ${DOCKER_WORKDIR}/public ./public
 # Copy package.json for script definitions (lock file should not be needed)

From a6e7a897c752fa3a02c7c80b4738ef812cc485d7 Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Fri, 10 Dec 2021 07:07:54 +0100
Subject: [PATCH 19/51] emit visible navbar collaps out of navbar

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

diff --git a/frontend/src/components/Menu/Navbar.vue b/frontend/src/components/Menu/Navbar.vue
index 71ba2f4af..a7a33aa52 100644
--- a/frontend/src/components/Menu/Navbar.vue
+++ b/frontend/src/components/Menu/Navbar.vue
@@ -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>
diff --git a/frontend/src/views/Layout/DashboardLayout_gdd.vue b/frontend/src/views/Layout/DashboardLayout_gdd.vue
index 872392a72..b60535fa9 100755
--- a/frontend/src/views/Layout/DashboardLayout_gdd.vue
+++ b/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>
+      <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>

From fabc61f505732057d594e57a5b1f67993f7c6f55 Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Fri, 10 Dec 2021 07:12:49 +0100
Subject: [PATCH 20/51] cdd style content width 100%

---
 frontend/src/views/Pages/AccountOverview.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/src/views/Pages/AccountOverview.vue b/frontend/src/views/Pages/AccountOverview.vue
index 5512a03d8..6ac4c2cc2 100644
--- a/frontend/src/views/Pages/AccountOverview.vue
+++ b/frontend/src/views/Pages/AccountOverview.vue
@@ -1,10 +1,10 @@
 <template>
   <div>
-    <b-container fluid>
+    <div>
       <b-row>
         <b-col class="col-6">
           <b-row>
-            <b-col class="col-11 bg-gray text-white p-3">
+            <b-col class="col-11 bg-gray text-white ml-2 p-3">
               <status
                 class="gdd-status-gdd"
                 :pending="pending"
@@ -36,7 +36,7 @@
         @update-transactions="updateTransactions"
       />
       <gdd-transaction-list-footer :count="transactionCount" />
-    </b-container>
+    </div>
   </div>
 </template>
 <script>

From 2219474e492aa6f6f66cbfd9ca32d0ff28de2eea Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Fri, 10 Dec 2021 07:16:15 +0100
Subject: [PATCH 21/51] change color for amount boxes GDD and GDT

---
 frontend/src/views/Pages/AccountOverview.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/views/Pages/AccountOverview.vue b/frontend/src/views/Pages/AccountOverview.vue
index 6ac4c2cc2..98db2c5ad 100644
--- a/frontend/src/views/Pages/AccountOverview.vue
+++ b/frontend/src/views/Pages/AccountOverview.vue
@@ -4,7 +4,7 @@
       <b-row>
         <b-col class="col-6">
           <b-row>
-            <b-col class="col-11 bg-gray text-white ml-2 p-3">
+            <b-col class="col-11 ml-2 p-3" style="background-color: #f0f0f0">
               <status
                 class="gdd-status-gdd"
                 :pending="pending"
@@ -16,7 +16,7 @@
         </b-col>
         <b-col class="col-6 text-right">
           <b-row>
-            <b-col class="bg-white text-gray p-3">
+            <b-col class="p-3" style="background-color: #f0f0f0">
               <status
                 class="gdd-status-gdt"
                 :pending="pending"

From 874b51735310e6fc1470e00b7affcede43c2ef96 Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Fri, 10 Dec 2021 07:47:11 +0100
Subject: [PATCH 22/51] first and lastname in navbar and collaps nav, add area
 icons

---
 frontend/src/components/Menu/Navbar.vue | 34 ++++++++++++++++++++-----
 1 file changed, 28 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/Menu/Navbar.vue b/frontend/src/components/Menu/Navbar.vue
index a7a33aa52..1b0c2b251 100644
--- a/frontend/src/components/Menu/Navbar.vue
+++ b/frontend/src/components/Menu/Navbar.vue
@@ -8,14 +8,32 @@
           </b-nav-item>
         </b-navbar-nav>
       </div>
-      <b-nav-text center>{{ balance }} GDD</b-nav-text>
+
+      <b-navbar-nav class="ml-auto" is-nav>
+        <b-nav-item to="/profile" right class="d-none d-sm-none d-md-none d-lg-flex shadow-lg">
+          <small>{{ $store.state.firstName }} {{ $store.state.lastName }}, <b>{{ $store.state.email }}</b>
+          <b-icon class="ml-3" icon="gear-fill" aria-hidden="true"></b-icon> </small>
+        </b-nav-item>
+      </b-navbar-nav>
+
       <b-navbar-toggle
-        target=""
+        target="nav-collapse"
         @click="$emit('set-visible', (visibleCollapse = !visible))"
       ></b-navbar-toggle>
     </b-navbar>
+
     <b-collapse id="collapse-4" v-model="visibleCollapse" class="p-3 b-collaps-gradido">
-      <b-nav vertical @click="$emit('setVisible', false)">
+    
+      <b-nav vertical @click="$emit('set-visible', false)">
+          <div class="text-right">
+       <router-link to="/profile">
+        <small>
+          {{ $store.state.firstName }}
+          {{ $store.state.lastName }},
+          <b>{{ $store.state.email }}</b>
+        </small>
+        </router-link>
+      </div>
         <b-nav-item to="/overview" class="mb-3">
           {{ $t('overview') }}
         </b-nav-item>
@@ -24,17 +42,21 @@
           {{ $t('transactions') }}
         </b-nav-item>
         <b-nav-item to="/profile" class="mb-3">
+         <b-icon icon="gear-fill" aria-hidden="true"></b-icon>
           {{ $t('site.navbar.my-profil') }}
+         
         </b-nav-item>
         <br />
         <b-nav-item class="mb-3" @click="$emit('getElopageLink')">
-          {{ $t('members_area') }}
+            <b-icon icon="link45deg" aria-hidden="true"></b-icon>
+            {{ $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-icon icon="link45deg" aria-hidden="true"></b-icon>
+           {{ $t('admin_area') }}
         </b-nav-item>
-        <b-nav-item class="mb-3" @click="$emit('logout')">{{ $t('logout') }}</b-nav-item>
+        <b-nav-item class="mb-3" @click="$emit('logout')"> <b-icon icon="power" aria-hidden="true"></b-icon>  {{ $t('logout') }}</b-nav-item>
       </b-nav>
     </b-collapse>
   </div>

From 8582d554f0061d47533a055b68fd6cee677d0bcb Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Fri, 10 Dec 2021 07:48:13 +0100
Subject: [PATCH 23/51] add area icons in sidebar

---
 frontend/src/components/Menu/Navbar.vue  | 42 +++++++++++++-----------
 frontend/src/components/Menu/Sidebar.vue |  6 ++--
 2 files changed, 26 insertions(+), 22 deletions(-)

diff --git a/frontend/src/components/Menu/Navbar.vue b/frontend/src/components/Menu/Navbar.vue
index 1b0c2b251..af723ce93 100644
--- a/frontend/src/components/Menu/Navbar.vue
+++ b/frontend/src/components/Menu/Navbar.vue
@@ -11,8 +11,11 @@
 
       <b-navbar-nav class="ml-auto" is-nav>
         <b-nav-item to="/profile" right class="d-none d-sm-none d-md-none d-lg-flex shadow-lg">
-          <small>{{ $store.state.firstName }} {{ $store.state.lastName }}, <b>{{ $store.state.email }}</b>
-          <b-icon class="ml-3" icon="gear-fill" aria-hidden="true"></b-icon> </small>
+          <small>
+            {{ $store.state.firstName }} {{ $store.state.lastName }},
+            <b>{{ $store.state.email }}</b>
+            <b-icon class="ml-3" icon="gear-fill" aria-hidden="true"></b-icon>
+          </small>
         </b-nav-item>
       </b-navbar-nav>
 
@@ -23,17 +26,16 @@
     </b-navbar>
 
     <b-collapse id="collapse-4" v-model="visibleCollapse" class="p-3 b-collaps-gradido">
-    
       <b-nav vertical @click="$emit('set-visible', false)">
-          <div class="text-right">
-       <router-link to="/profile">
-        <small>
-          {{ $store.state.firstName }}
-          {{ $store.state.lastName }},
-          <b>{{ $store.state.email }}</b>
-        </small>
-        </router-link>
-      </div>
+        <div class="text-right">
+          <router-link to="/profile">
+            <small>
+              {{ $store.state.firstName }}
+              {{ $store.state.lastName }},
+              <b>{{ $store.state.email }}</b>
+            </small>
+          </router-link>
+        </div>
         <b-nav-item to="/overview" class="mb-3">
           {{ $t('overview') }}
         </b-nav-item>
@@ -42,21 +44,23 @@
           {{ $t('transactions') }}
         </b-nav-item>
         <b-nav-item to="/profile" class="mb-3">
-         <b-icon icon="gear-fill" aria-hidden="true"></b-icon>
+          <b-icon icon="gear-fill" aria-hidden="true"></b-icon>
           {{ $t('site.navbar.my-profil') }}
-         
         </b-nav-item>
         <br />
         <b-nav-item class="mb-3" @click="$emit('getElopageLink')">
-            <b-icon icon="link45deg" aria-hidden="true"></b-icon>
-            {{ $t('members_area') }}
+          <b-icon icon="link45deg" aria-hidden="true"></b-icon>
+          {{ $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')">
-           <b-icon icon="link45deg" aria-hidden="true"></b-icon>
-           {{ $t('admin_area') }}
+          <b-icon icon="link45deg" aria-hidden="true"></b-icon>
+          {{ $t('admin_area') }}
+        </b-nav-item>
+        <b-nav-item class="mb-3" @click="$emit('logout')">
+          <b-icon icon="power" aria-hidden="true"></b-icon>
+          {{ $t('logout') }}
         </b-nav-item>
-        <b-nav-item class="mb-3" @click="$emit('logout')"> <b-icon icon="power" aria-hidden="true"></b-icon>  {{ $t('logout') }}</b-nav-item>
       </b-nav>
     </b-collapse>
   </div>
diff --git a/frontend/src/components/Menu/Sidebar.vue b/frontend/src/components/Menu/Sidebar.vue
index c9f1356a6..da322208a 100644
--- a/frontend/src/components/Menu/Sidebar.vue
+++ b/frontend/src/components/Menu/Sidebar.vue
@@ -14,13 +14,13 @@
         <hr />
         <b-nav vertical class="w-100">
           <b-nav-item class="mb-3" @click="$emit('get-elopage-link')">
-            {{ $t('members_area') }}
+            <b-icon icon="link45deg" aria-hidden="true"></b-icon>{{ $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-icon icon="link45deg" aria-hidden="true"></b-icon>{{ $t('admin_area') }}
           </b-nav-item>
-          <b-nav-item class="mb-3" @click="$emit('logout')">{{ $t('logout') }}</b-nav-item>
+          <b-nav-item class="mb-3" @click="$emit('logout')"><b-icon icon="power" aria-hidden="true"></b-icon> {{ $t('logout') }}</b-nav-item>
         </b-nav>
       </div>
     </div>

From 2c7ab38f3988b2a7a9d9b4b881bef09fda230940 Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Fri, 10 Dec 2021 07:49:49 +0100
Subject: [PATCH 24/51] add area icons in sidebar edit profil

---
 frontend/src/components/Menu/Sidebar.vue | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/Menu/Sidebar.vue b/frontend/src/components/Menu/Sidebar.vue
index da322208a..1d7f7ac67 100644
--- a/frontend/src/components/Menu/Sidebar.vue
+++ b/frontend/src/components/Menu/Sidebar.vue
@@ -8,19 +8,25 @@
           <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">
+            <b-icon icon="gear-fill" aria-hidden="true"></b-icon>
             {{ $t('site.navbar.my-profil') }}
           </b-nav-item>
         </b-nav>
         <hr />
         <b-nav vertical class="w-100">
           <b-nav-item class="mb-3" @click="$emit('get-elopage-link')">
-            <b-icon icon="link45deg" aria-hidden="true"></b-icon>{{ $t('members_area') }}
+            <b-icon icon="link45deg" aria-hidden="true"></b-icon>
+            {{ $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')">
-            <b-icon icon="link45deg" aria-hidden="true"></b-icon>{{ $t('admin_area') }}
+            <b-icon icon="link45deg" aria-hidden="true"></b-icon>
+            {{ $t('admin_area') }}
+          </b-nav-item>
+          <b-nav-item class="mb-3" @click="$emit('logout')">
+            <b-icon icon="power" aria-hidden="true"></b-icon>
+            {{ $t('logout') }}
           </b-nav-item>
-          <b-nav-item class="mb-3" @click="$emit('logout')"><b-icon icon="power" aria-hidden="true"></b-icon> {{ $t('logout') }}</b-nav-item>
         </b-nav>
       </div>
     </div>

From 4b05e55d72f1cbfc6fb966b8556cb301f09af9c4 Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Fri, 10 Dec 2021 07:51:59 +0100
Subject: [PATCH 25/51] navbar collaps box-shadow to grey

---
 frontend/src/components/Menu/Navbar.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/Menu/Navbar.vue b/frontend/src/components/Menu/Navbar.vue
index af723ce93..1ede4d5bb 100644
--- a/frontend/src/components/Menu/Navbar.vue
+++ b/frontend/src/components/Menu/Navbar.vue
@@ -97,6 +97,6 @@ export default {
   z-index: 100000;
   background-color: #dfe0e3f5;
   width: 100%;
-  box-shadow: cadetblue 0px 13px 22px;
+  box-shadow: #b4b4b4 0px 13px 22px;
 }
 </style>

From 96f03ebf343c76965cab81d40efdd4500b4713e8 Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Fri, 10 Dec 2021 08:01:04 +0100
Subject: [PATCH 26/51] navbar color and size by :hover

---
 frontend/src/components/Menu/Navbar.vue | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/frontend/src/components/Menu/Navbar.vue b/frontend/src/components/Menu/Navbar.vue
index 1ede4d5bb..f18820ab7 100644
--- a/frontend/src/components/Menu/Navbar.vue
+++ b/frontend/src/components/Menu/Navbar.vue
@@ -98,5 +98,12 @@ export default {
   background-color: #dfe0e3f5;
   width: 100%;
   box-shadow: #b4b4b4 0px 13px 22px;
+  font-size: large;
+}
+.b-collaps-gradido li :hover{
+   
+  background-color: #e9e7e7f5;
+  font-size: larger;
+
 }
 </style>

From 5e2bb9bf25f4ec23508de6e0fb527b184911a389 Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Fri, 10 Dec 2021 08:16:54 +0100
Subject: [PATCH 27/51] amount in send formular

---
 frontend/src/views/Pages/SendOverview.vue | 11 ++++-------
 1 file changed, 4 insertions(+), 7 deletions(-)

diff --git a/frontend/src/views/Pages/SendOverview.vue b/frontend/src/views/Pages/SendOverview.vue
index ee8537833..5961310fb 100644
--- a/frontend/src/views/Pages/SendOverview.vue
+++ b/frontend/src/views/Pages/SendOverview.vue
@@ -1,20 +1,17 @@
 <template>
   <div>
     <b-container fluid>
-      <b-row>
-        <b-col class="bg-gray text-white text-center p-3">
-          <status
+      
+         <status
             class="gdd-status-gdd"
             v-if="showContext"
             :pending="pending"
             :balance="balance"
             status-text="GDD"
+            style="position: absolute; right: 28px;z-index: 1;"
           />
-        </b-col>
-      </b-row>
-
-      <br />
       <gdd-send :currentTransactionStep="currentTransactionStep">
+        
         <template #transaction-form>
           <transaction-form :balance="balance" @set-transaction="setTransaction"></transaction-form>
         </template>

From 9425f7ad993ad2112530587681a959be2e50b11d Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Fri, 10 Dec 2021 08:17:25 +0100
Subject: [PATCH 28/51] remove componente status from sendformular

---
 frontend/src/components/Menu/Navbar.vue   |  3 +++
 frontend/src/views/Pages/SendOverview.vue | 15 +--------------
 2 files changed, 4 insertions(+), 14 deletions(-)

diff --git a/frontend/src/components/Menu/Navbar.vue b/frontend/src/components/Menu/Navbar.vue
index f18820ab7..92aaf879c 100644
--- a/frontend/src/components/Menu/Navbar.vue
+++ b/frontend/src/components/Menu/Navbar.vue
@@ -6,10 +6,13 @@
           <b-nav-item to="/overview">
             <img :src="logo" class="navbar-brand-img" alt="..." />
           </b-nav-item>
+        
         </b-navbar-nav>
+        
       </div>
 
       <b-navbar-nav class="ml-auto" is-nav>
+          <b-nav-item>  {{balance}} GDD</b-nav-item>
         <b-nav-item to="/profile" right class="d-none d-sm-none d-md-none d-lg-flex shadow-lg">
           <small>
             {{ $store.state.firstName }} {{ $store.state.lastName }},
diff --git a/frontend/src/views/Pages/SendOverview.vue b/frontend/src/views/Pages/SendOverview.vue
index 5961310fb..fc0dc5692 100644
--- a/frontend/src/views/Pages/SendOverview.vue
+++ b/frontend/src/views/Pages/SendOverview.vue
@@ -1,17 +1,7 @@
 <template>
   <div>
-    <b-container fluid>
-      
-         <status
-            class="gdd-status-gdd"
-            v-if="showContext"
-            :pending="pending"
-            :balance="balance"
-            status-text="GDD"
-            style="position: absolute; right: 28px;z-index: 1;"
-          />
+    <b-container>
       <gdd-send :currentTransactionStep="currentTransactionStep">
-        
         <template #transaction-form>
           <transaction-form :balance="balance" @set-transaction="setTransaction"></transaction-form>
         </template>
@@ -38,9 +28,7 @@
   </div>
 </template>
 <script>
-import Status from '../../components/Status.vue'
 import GddSend from './SendOverview/GddSend.vue'
-
 import TransactionForm from './SendOverview/GddSend/TransactionForm.vue'
 import TransactionConfirmation from './SendOverview/GddSend/TransactionConfirmation.vue'
 import TransactionResult from './SendOverview/GddSend/TransactionResult.vue'
@@ -55,7 +43,6 @@ const EMPTY_TRANSACTION_DATA = {
 export default {
   name: 'SendOverview',
   components: {
-    Status,
     GddSend,
 
     TransactionForm,

From 14c6e11d8b1a651b57dbd5ebbe1282257f263178 Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Fri, 10 Dec 2021 08:20:19 +0100
Subject: [PATCH 29/51] yarn lint --fix

---
 frontend/src/components/Menu/Navbar.vue | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/Menu/Navbar.vue b/frontend/src/components/Menu/Navbar.vue
index 92aaf879c..79bfad136 100644
--- a/frontend/src/components/Menu/Navbar.vue
+++ b/frontend/src/components/Menu/Navbar.vue
@@ -6,13 +6,11 @@
           <b-nav-item to="/overview">
             <img :src="logo" class="navbar-brand-img" alt="..." />
           </b-nav-item>
-        
         </b-navbar-nav>
-        
       </div>
 
       <b-navbar-nav class="ml-auto" is-nav>
-          <b-nav-item>  {{balance}} GDD</b-nav-item>
+        <b-nav-item>{{ balance }} GDD</b-nav-item>
         <b-nav-item to="/profile" right class="d-none d-sm-none d-md-none d-lg-flex shadow-lg">
           <small>
             {{ $store.state.firstName }} {{ $store.state.lastName }},
@@ -103,10 +101,8 @@ export default {
   box-shadow: #b4b4b4 0px 13px 22px;
   font-size: large;
 }
-.b-collaps-gradido li :hover{
-   
+.b-collaps-gradido li :hover {
   background-color: #e9e7e7f5;
   font-size: larger;
-
 }
 </style>

From 63ce5c4b93615d99f905e5a12122e13287e27d72 Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Fri, 10 Dec 2021 08:33:31 +0100
Subject: [PATCH 30/51] yarn test DashboardLayout_gdd.spec.js

---
 frontend/src/views/Layout/DashboardLayout_gdd.spec.js | 10 ++++++++--
 frontend/src/views/Layout/DashboardLayout_gdd.vue     |  5 +++--
 frontend/src/views/Pages/SendOverview.spec.js         |  4 ----
 3 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/frontend/src/views/Layout/DashboardLayout_gdd.spec.js b/frontend/src/views/Layout/DashboardLayout_gdd.spec.js
index b25640e5c..db12acdfe 100644
--- a/frontend/src/views/Layout/DashboardLayout_gdd.spec.js
+++ b/frontend/src/views/Layout/DashboardLayout_gdd.spec.js
@@ -70,8 +70,12 @@ describe('DashboardLayoutGdd', () => {
       wrapper = Wrapper()
     })
 
+    it('has a navbar', () => {
+      expect(wrapper.find('.main-navbar').exists()).toBeTruthy()
+    })
+
     it('has a sidebar', () => {
-      expect(wrapper.find('nav#sidenav-main').exists()).toBeTruthy()
+      expect(wrapper.find('.main-sidebar').exists()).toBeTruthy()
     })
 
     it('has a main content div', () => {
@@ -79,9 +83,10 @@ describe('DashboardLayoutGdd', () => {
     })
 
     it('has a footer inside the main content', () => {
-      expect(wrapper.find('div.main-content').find('footer.footer').exists()).toBeTruthy()
+      expect(wrapper.find('div.main-page').find('footer.footer').exists()).toBeTruthy()
     })
 
+    /*
     describe('navigation bar', () => {
       let navbar
 
@@ -271,5 +276,6 @@ describe('DashboardLayoutGdd', () => {
         })
       })
     })
+    */
   })
 })
diff --git a/frontend/src/views/Layout/DashboardLayout_gdd.vue b/frontend/src/views/Layout/DashboardLayout_gdd.vue
index b60535fa9..89ca43d1a 100755
--- a/frontend/src/views/Layout/DashboardLayout_gdd.vue
+++ b/frontend/src/views/Layout/DashboardLayout_gdd.vue
@@ -1,6 +1,7 @@
 <template>
   <div>
     <navbar
+      class="main-navbar"
       :balance="balance"
       :visible="visible"
       @set-visible="setVisible"
@@ -10,10 +11,10 @@
     />
     <div class="content-gradido">
       <div class="d-none d-sm-none d-md-none d-lg-flex shadow-lg" style="width: 300px">
-        <sidebar @getElopageLink="getElopageLink" @admin="admin" @logout="logout" />
+        <sidebar class="main-sidebar" @getElopageLink="getElopageLink" @admin="admin" @logout="logout" />
       </div>
 
-      <div class="ml-2 mr-2" style="width: 100%" @click="visible = false">
+      <div class="main-page 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
diff --git a/frontend/src/views/Pages/SendOverview.spec.js b/frontend/src/views/Pages/SendOverview.spec.js
index f28ec6126..16bb6b8d5 100644
--- a/frontend/src/views/Pages/SendOverview.spec.js
+++ b/frontend/src/views/Pages/SendOverview.spec.js
@@ -38,10 +38,6 @@ describe('SendOverview', () => {
       wrapper = Wrapper()
     })
 
-    it('has a status GDD line gdd-status-gdd', () => {
-      expect(wrapper.find('div.gdd-status-gdd').exists()).toBeTruthy()
-    })
-
     it('has a send field', () => {
       expect(wrapper.find('div.gdd-send').exists()).toBeTruthy()
     })

From 7f926213612f1916537052721d47341cd16c9b04 Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Fri, 10 Dec 2021 09:04:54 +0100
Subject: [PATCH 31/51] router-link remove to b-link in navbar

---
 frontend/src/components/Menu/Navbar.spec.js           | 1 +
 frontend/src/components/Menu/Navbar.vue               | 4 ++--
 frontend/src/views/Layout/DashboardLayout_gdd.spec.js | 2 +-
 frontend/src/views/Layout/DashboardLayout_gdd.vue     | 7 ++++++-
 4 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/Menu/Navbar.spec.js b/frontend/src/components/Menu/Navbar.spec.js
index fba63d65a..497f78001 100644
--- a/frontend/src/components/Menu/Navbar.spec.js
+++ b/frontend/src/components/Menu/Navbar.spec.js
@@ -5,6 +5,7 @@ const localVue = global.localVue
 
 const propsData = {
   balance: 1234,
+  visible: false,
 }
 
 const mocks = {
diff --git a/frontend/src/components/Menu/Navbar.vue b/frontend/src/components/Menu/Navbar.vue
index 79bfad136..899618a9d 100644
--- a/frontend/src/components/Menu/Navbar.vue
+++ b/frontend/src/components/Menu/Navbar.vue
@@ -29,13 +29,13 @@
     <b-collapse id="collapse-4" v-model="visibleCollapse" class="p-3 b-collaps-gradido">
       <b-nav vertical @click="$emit('set-visible', false)">
         <div class="text-right">
-          <router-link to="/profile">
+          <b-link to="/profile">
             <small>
               {{ $store.state.firstName }}
               {{ $store.state.lastName }},
               <b>{{ $store.state.email }}</b>
             </small>
-          </router-link>
+          </b-link>
         </div>
         <b-nav-item to="/overview" class="mb-3">
           {{ $t('overview') }}
diff --git a/frontend/src/views/Layout/DashboardLayout_gdd.spec.js b/frontend/src/views/Layout/DashboardLayout_gdd.spec.js
index db12acdfe..383c89c17 100644
--- a/frontend/src/views/Layout/DashboardLayout_gdd.spec.js
+++ b/frontend/src/views/Layout/DashboardLayout_gdd.spec.js
@@ -1,5 +1,5 @@
 import { mount, RouterLinkStub } from '@vue/test-utils'
-import flushPromises from 'flush-promises'
+// import flushPromises from 'flush-promises'
 import DashboardLayoutGdd from './DashboardLayout_gdd'
 
 jest.useFakeTimers()
diff --git a/frontend/src/views/Layout/DashboardLayout_gdd.vue b/frontend/src/views/Layout/DashboardLayout_gdd.vue
index 89ca43d1a..bb31136f4 100755
--- a/frontend/src/views/Layout/DashboardLayout_gdd.vue
+++ b/frontend/src/views/Layout/DashboardLayout_gdd.vue
@@ -11,7 +11,12 @@
     />
     <div class="content-gradido">
       <div class="d-none d-sm-none d-md-none d-lg-flex shadow-lg" style="width: 300px">
-        <sidebar class="main-sidebar" @getElopageLink="getElopageLink" @admin="admin" @logout="logout" />
+        <sidebar
+          class="main-sidebar"
+          @getElopageLink="getElopageLink"
+          @admin="admin"
+          @logout="logout"
+        />
       </div>
 
       <div class="main-page ml-2 mr-2" style="width: 100%" @click="visible = false">

From 152d0db54269f6474c1008e113e3ebbbcff7eff2 Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Fri, 10 Dec 2021 09:09:42 +0100
Subject: [PATCH 32/51] navbar brand add click  visible = false

---
 frontend/src/components/Menu/Navbar.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/Menu/Navbar.vue b/frontend/src/components/Menu/Navbar.vue
index 899618a9d..c7a21af8a 100644
--- a/frontend/src/components/Menu/Navbar.vue
+++ b/frontend/src/components/Menu/Navbar.vue
@@ -2,7 +2,7 @@
   <div class="component-navbar" style="background-color: #fff">
     <b-navbar toggleable="lg" type="light" variant="faded">
       <div class="navbar-brand">
-        <b-navbar-nav>
+        <b-navbar-nav @click="$emit('set-visible', false)">
           <b-nav-item to="/overview">
             <img :src="logo" class="navbar-brand-img" alt="..." />
           </b-nav-item>

From 057debeee86ad520b09e49b3091df07493da6cdd Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Fri, 10 Dec 2021 09:33:44 +0100
Subject: [PATCH 33/51] navbar test all navbar-items

---
 frontend/src/components/Menu/Navbar.spec.js | 54 ++++++++++++++-------
 frontend/src/components/Menu/Navbar.vue     |  4 +-
 2 files changed, 39 insertions(+), 19 deletions(-)

diff --git a/frontend/src/components/Menu/Navbar.spec.js b/frontend/src/components/Menu/Navbar.spec.js
index 497f78001..d53367a66 100644
--- a/frontend/src/components/Menu/Navbar.spec.js
+++ b/frontend/src/components/Menu/Navbar.spec.js
@@ -37,22 +37,42 @@ describe('Navbar', () => {
       expect(wrapper.find('div.component-navbar').exists()).toBeTruthy()
     })
   })
-  // describe('find link admin and evented click', () => {
-  //   beforeEach(async () => {
-  //     await wrapper.find('.test-admin').trigger('click')
-  //   })
 
-  //   it('find link admin and click', () => {
-  //     expect(wrapper.emitted('admin')).toBeTruthy()
-  //     expect(wrapper.emitted('admin')).toEqual([
-  //       [
-  //         {
-  //           email: 'someone@watches.tv',
-  //           amount: 87.23,
-  //           memo: 'Long enough',
-  //         },
-  //       ],
-  //     ])
-  //   })
-  // })
+  describe('navigation Navbar', () => {
+    it('has .navbar-brand in the navbar', () => {
+      expect(wrapper.find('.navbar-brand').exists()).toBeTruthy()
+    })
+    it('has b-navbar-toggle in the navbar', () => {
+      expect(wrapper.find('.navbar-toggler').exists()).toBeTruthy()
+    })
+    it('has ten b-nav-item in the navbar', () => {
+      expect(wrapper.findAll('.nav-item')).toHaveLength(10)
+    })
+
+    it('has first nav-item "amount GDD" in navbar', () => {
+      expect(wrapper.findAll('.nav-item').at(1).text()).toEqual('1234 GDD')
+    })
+
+    it('has first nav-item "overview" in navbar', () => {
+      expect(wrapper.findAll('.nav-item').at(3).text()).toEqual('overview')
+    })
+    it('has first nav-item "send" in navbar', () => {
+      expect(wrapper.findAll('.nav-item').at(4).text()).toEqual('send')
+    })
+    it('has first nav-item "transactions" in navbar', () => {
+      expect(wrapper.findAll('.nav-item').at(5).text()).toEqual('transactions')
+    })
+    it('has first nav-item "my-profil" in navbar', () => {
+      expect(wrapper.findAll('.nav-item').at(6).text()).toEqual('site.navbar.my-profil')
+    })
+    it('has first nav-item "members_area" in navbar', () => {
+      expect(wrapper.findAll('.nav-item').at(7).text()).toEqual('members_area')
+    })
+    it('has first nav-item "admin_area" in navbar', () => {
+      expect(wrapper.findAll('.nav-item').at(8).text()).toEqual('admin_area')
+    })
+    it('has first nav-item "logout" in navbar', () => {
+      expect(wrapper.findAll('.nav-item').at(9).text()).toEqual('logout')
+    })
+  })
 })
diff --git a/frontend/src/components/Menu/Navbar.vue b/frontend/src/components/Menu/Navbar.vue
index c7a21af8a..55380d316 100644
--- a/frontend/src/components/Menu/Navbar.vue
+++ b/frontend/src/components/Menu/Navbar.vue
@@ -21,12 +21,12 @@
       </b-navbar-nav>
 
       <b-navbar-toggle
-        target="nav-collapse"
+        target="collapse-nav"
         @click="$emit('set-visible', (visibleCollapse = !visible))"
       ></b-navbar-toggle>
     </b-navbar>
 
-    <b-collapse id="collapse-4" v-model="visibleCollapse" class="p-3 b-collaps-gradido">
+    <b-collapse id="collapse-nav" v-model="visibleCollapse" class="p-3 b-collaps-gradido">
       <b-nav vertical @click="$emit('set-visible', false)">
         <div class="text-right">
           <b-link to="/profile">

From b9b28a37a3ac5b4501f3fb473d2a96eb811ea5d3 Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Fri, 10 Dec 2021 09:36:48 +0100
Subject: [PATCH 34/51] sidebar  test all navbar-items

---
 frontend/src/components/Menu/Sidebar.spec.js | 33 ++++++++++++++++++++
 1 file changed, 33 insertions(+)

diff --git a/frontend/src/components/Menu/Sidebar.spec.js b/frontend/src/components/Menu/Sidebar.spec.js
index 4a5b8f930..ed0973642 100644
--- a/frontend/src/components/Menu/Sidebar.spec.js
+++ b/frontend/src/components/Menu/Sidebar.spec.js
@@ -31,4 +31,37 @@ describe('Sidebar', () => {
       expect(wrapper.find('div#component-sidebar').exists()).toBeTruthy()
     })
   })
+
+  describe('navigation Navbar', () => {
+      
+    it('has seven b-nav-item in the navbar', () => {
+      expect(wrapper.findAll('.nav-item')).toHaveLength(7)
+    })
+
+    it('has first nav-item "overview" in navbar', () => {
+      expect(wrapper.findAll('.nav-item').at(0).text()).toEqual('overview')
+    })
+
+    it('has first nav-item "send" in navbar', () => {
+      expect(wrapper.findAll('.nav-item').at(1).text()).toEqual('send')
+    })
+
+    it('has first nav-item "transactions" in navbar', () => {
+      expect(wrapper.findAll('.nav-item').at(2).text()).toEqual('transactions')
+    })
+    it('has first nav-item "my-profil" in navbar', () => {
+      expect(wrapper.findAll('.nav-item').at(3).text()).toEqual('site.navbar.my-profil')
+    })
+    it('has first nav-item "members_area" in navbar', () => {
+      expect(wrapper.findAll('.nav-item').at(4).text()).toEqual('members_area')
+    })
+    it('has first nav-item "admin_area" in navbar', () => {
+      expect(wrapper.findAll('.nav-item').at(5).text()).toEqual('admin_area')
+    })
+    it('has first nav-item "logout" in navbar', () => {
+      expect(wrapper.findAll('.nav-item').at(6).text()).toEqual('logout')
+    })
+
+
+  })
 })

From 0fff9798e1e1b779e41deb74fb06a9f0813a9141 Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Fri, 10 Dec 2021 09:37:17 +0100
Subject: [PATCH 35/51] yarn lint --fix

---
 frontend/src/components/Menu/Sidebar.spec.js | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/frontend/src/components/Menu/Sidebar.spec.js b/frontend/src/components/Menu/Sidebar.spec.js
index ed0973642..416767786 100644
--- a/frontend/src/components/Menu/Sidebar.spec.js
+++ b/frontend/src/components/Menu/Sidebar.spec.js
@@ -33,7 +33,6 @@ describe('Sidebar', () => {
   })
 
   describe('navigation Navbar', () => {
-      
     it('has seven b-nav-item in the navbar', () => {
       expect(wrapper.findAll('.nav-item')).toHaveLength(7)
     })
@@ -61,7 +60,5 @@ describe('Sidebar', () => {
     it('has first nav-item "logout" in navbar', () => {
       expect(wrapper.findAll('.nav-item').at(6).text()).toEqual('logout')
     })
-
-
   })
 })

From d6b32b6ba5da46e98bb36ce39ff27e2dff54cadf Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Fri, 10 Dec 2021 09:40:56 +0100
Subject: [PATCH 36/51] remove target text from b-navbar-toggle, yarn lint
 --fix

---
 frontend/src/components/Menu/Navbar.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/Menu/Navbar.vue b/frontend/src/components/Menu/Navbar.vue
index 55380d316..574313e4e 100644
--- a/frontend/src/components/Menu/Navbar.vue
+++ b/frontend/src/components/Menu/Navbar.vue
@@ -21,7 +21,7 @@
       </b-navbar-nav>
 
       <b-navbar-toggle
-        target="collapse-nav"
+        target="false"
         @click="$emit('set-visible', (visibleCollapse = !visible))"
       ></b-navbar-toggle>
     </b-navbar>

From b874abb4f835e671d0b7546ce25df23dbb082971 Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Fri, 10 Dec 2021 10:03:53 +0100
Subject: [PATCH 37/51] getElopageLink to data and props elopageUri

---
 frontend/src/components/Menu/Navbar.spec.js           |  9 +++++++++
 frontend/src/components/Menu/Navbar.vue               |  6 +++++-
 frontend/src/components/Menu/Sidebar.vue              |  8 +++++++-
 frontend/src/views/Layout/DashboardLayout_gdd.spec.js |  4 +---
 frontend/src/views/Layout/DashboardLayout_gdd.vue     | 10 +++-------
 5 files changed, 25 insertions(+), 12 deletions(-)

diff --git a/frontend/src/components/Menu/Navbar.spec.js b/frontend/src/components/Menu/Navbar.spec.js
index d53367a66..382615144 100644
--- a/frontend/src/components/Menu/Navbar.spec.js
+++ b/frontend/src/components/Menu/Navbar.spec.js
@@ -68,6 +68,15 @@ describe('Navbar', () => {
     it('has first nav-item "members_area" in navbar', () => {
       expect(wrapper.findAll('.nav-item').at(7).text()).toEqual('members_area')
     })
+
+    it('has a link to the members area', () => {
+      expect(wrapper.findAll('.nav-item').at(7).text()).toContain('members_area')
+      expect(wrapper.findAll('.nav-item').at(7).find('a').attributes('href')).toBe(
+        'https://elopage.com/s/gradido/basic-de/payment?locale=en&prid=111&pid=123&firstName=User&lastName=Example&email=user@example.org',
+      )
+    })
+
+
     it('has first nav-item "admin_area" in navbar', () => {
       expect(wrapper.findAll('.nav-item').at(8).text()).toEqual('admin_area')
     })
diff --git a/frontend/src/components/Menu/Navbar.vue b/frontend/src/components/Menu/Navbar.vue
index 574313e4e..97533f9d0 100644
--- a/frontend/src/components/Menu/Navbar.vue
+++ b/frontend/src/components/Menu/Navbar.vue
@@ -49,7 +49,7 @@
           {{ $t('site.navbar.my-profil') }}
         </b-nav-item>
         <br />
-        <b-nav-item class="mb-3" @click="$emit('getElopageLink')">
+        <b-nav-item :href="elopageUri" class="mb-3" target="_blank">
           <b-icon icon="link45deg" aria-hidden="true"></b-icon>
           {{ $t('members_area') }}
           <b-badge v-if="!$store.state.hasElopage" pill variant="danger">!</b-badge>
@@ -78,6 +78,10 @@ export default {
       type: Number,
       required: true,
     },
+    elopageUri: {
+      type: String,
+      required: false,
+    },
   },
   data() {
     return {
diff --git a/frontend/src/components/Menu/Sidebar.vue b/frontend/src/components/Menu/Sidebar.vue
index 1d7f7ac67..ec3df2015 100644
--- a/frontend/src/components/Menu/Sidebar.vue
+++ b/frontend/src/components/Menu/Sidebar.vue
@@ -14,7 +14,7 @@
         </b-nav>
         <hr />
         <b-nav vertical class="w-100">
-          <b-nav-item class="mb-3" @click="$emit('get-elopage-link')">
+          <b-nav-item class="mb-3" :href="elopageUri" target="_blank">
             <b-icon icon="link45deg" aria-hidden="true"></b-icon>
             {{ $t('members_area') }}
             <b-badge v-if="!$store.state.hasElopage" pill variant="danger">!</b-badge>
@@ -35,5 +35,11 @@
 <script>
 export default {
   name: 'sidebar',
+  props: {
+    elopageUri: {
+      type: String,
+      required: false,
+    },
+  },
 }
 </script>
diff --git a/frontend/src/views/Layout/DashboardLayout_gdd.spec.js b/frontend/src/views/Layout/DashboardLayout_gdd.spec.js
index 383c89c17..fd4fffbee 100644
--- a/frontend/src/views/Layout/DashboardLayout_gdd.spec.js
+++ b/frontend/src/views/Layout/DashboardLayout_gdd.spec.js
@@ -138,9 +138,7 @@ describe('DashboardLayoutGdd', () => {
         )
       })
 
-      it('has a logout button', () => {
-        expect(wrapper.findAll('ul').at(3).text()).toBe('logout')
-      })
+     
 
       describe('logout', () => {
         beforeEach(async () => {
diff --git a/frontend/src/views/Layout/DashboardLayout_gdd.vue b/frontend/src/views/Layout/DashboardLayout_gdd.vue
index bb31136f4..e56629275 100755
--- a/frontend/src/views/Layout/DashboardLayout_gdd.vue
+++ b/frontend/src/views/Layout/DashboardLayout_gdd.vue
@@ -4,19 +4,14 @@
       class="main-navbar"
       :balance="balance"
       :visible="visible"
+      :elopageUri="elopageUri"
       @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
-          class="main-sidebar"
-          @getElopageLink="getElopageLink"
-          @admin="admin"
-          @logout="logout"
-        />
+        <sidebar class="main-sidebar" :elopageUri="elopageUri" @admin="admin" @logout="logout" />
       </div>
 
       <div class="main-page ml-2 mr-2" style="width: 100%" @click="visible = false">
@@ -64,6 +59,7 @@ export default {
       transactionCount: 0,
       pending: true,
       visible: false,
+      elopageUri: this.getElopageLink(),
     }
   },
   methods: {

From 7cbafbdee3e92de972b71a043f6687b9ace2ef25 Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Fri, 10 Dec 2021 10:08:06 +0100
Subject: [PATCH 38/51] test props elopageUri

---
 frontend/src/components/Menu/Navbar.spec.js  | 8 +-------
 frontend/src/components/Menu/Sidebar.spec.js | 5 +++--
 2 files changed, 4 insertions(+), 9 deletions(-)

diff --git a/frontend/src/components/Menu/Navbar.spec.js b/frontend/src/components/Menu/Navbar.spec.js
index 382615144..5884b7192 100644
--- a/frontend/src/components/Menu/Navbar.spec.js
+++ b/frontend/src/components/Menu/Navbar.spec.js
@@ -65,18 +65,12 @@ describe('Navbar', () => {
     it('has first nav-item "my-profil" in navbar', () => {
       expect(wrapper.findAll('.nav-item').at(6).text()).toEqual('site.navbar.my-profil')
     })
-    it('has first nav-item "members_area" in navbar', () => {
-      expect(wrapper.findAll('.nav-item').at(7).text()).toEqual('members_area')
-    })
 
     it('has a link to the members area', () => {
       expect(wrapper.findAll('.nav-item').at(7).text()).toContain('members_area')
-      expect(wrapper.findAll('.nav-item').at(7).find('a').attributes('href')).toBe(
-        'https://elopage.com/s/gradido/basic-de/payment?locale=en&prid=111&pid=123&firstName=User&lastName=Example&email=user@example.org',
-      )
+      expect(wrapper.findAll('.nav-item').at(7).find('a').attributes('href')).toBe('#')
     })
 
-
     it('has first nav-item "admin_area" in navbar', () => {
       expect(wrapper.findAll('.nav-item').at(8).text()).toEqual('admin_area')
     })
diff --git a/frontend/src/components/Menu/Sidebar.spec.js b/frontend/src/components/Menu/Sidebar.spec.js
index 416767786..2ecd45933 100644
--- a/frontend/src/components/Menu/Sidebar.spec.js
+++ b/frontend/src/components/Menu/Sidebar.spec.js
@@ -51,8 +51,9 @@ describe('Sidebar', () => {
     it('has first nav-item "my-profil" in navbar', () => {
       expect(wrapper.findAll('.nav-item').at(3).text()).toEqual('site.navbar.my-profil')
     })
-    it('has first nav-item "members_area" in navbar', () => {
-      expect(wrapper.findAll('.nav-item').at(4).text()).toEqual('members_area')
+    it('has a link to the members area', () => {
+      expect(wrapper.findAll('.nav-item').at(4).text()).toContain('members_area')
+      expect(wrapper.findAll('.nav-item').at(4).find('a').attributes('href')).toBe('#')
     })
     it('has first nav-item "admin_area" in navbar', () => {
       expect(wrapper.findAll('.nav-item').at(5).text()).toEqual('admin_area')

From 118dd886b87e0a1ba49f29a0f80e62fbb2e13d62 Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Fri, 10 Dec 2021 10:26:24 +0100
Subject: [PATCH 39/51] test for reactivitat DashboardLayout_gdd.spec.js

---
 .../views/Layout/DashboardLayout_gdd.spec.js  | 56 +------------------
 1 file changed, 1 insertion(+), 55 deletions(-)

diff --git a/frontend/src/views/Layout/DashboardLayout_gdd.spec.js b/frontend/src/views/Layout/DashboardLayout_gdd.spec.js
index fd4fffbee..c17c66647 100644
--- a/frontend/src/views/Layout/DashboardLayout_gdd.spec.js
+++ b/frontend/src/views/Layout/DashboardLayout_gdd.spec.js
@@ -1,5 +1,5 @@
 import { mount, RouterLinkStub } from '@vue/test-utils'
-// import flushPromises from 'flush-promises'
+import flushPromises from 'flush-promises'
 import DashboardLayoutGdd from './DashboardLayout_gdd'
 
 jest.useFakeTimers()
@@ -86,60 +86,7 @@ describe('DashboardLayoutGdd', () => {
       expect(wrapper.find('div.main-page').find('footer.footer').exists()).toBeTruthy()
     })
 
-    /*
     describe('navigation bar', () => {
-      let navbar
-
-      beforeEach(() => {
-        navbar = wrapper.findAll('ul.navbar-nav').at(0)
-      })
-
-      it('has four items in the navbar', () => {
-        expect(navbar.findAll('ul > a')).toHaveLength(4)
-      })
-
-      it('has first item "overview" in navbar', () => {
-        expect(navbar.findAll('ul > a').at(0).text()).toEqual('overview')
-      })
-
-      it('has first item "overview" linked to overview in navbar', () => {
-        expect(navbar.findAll('ul > a > a').at(0).attributes('href')).toBe('/overview')
-      })
-
-      it('has second item "send" in navbar', () => {
-        expect(navbar.findAll('ul > a').at(1).text()).toEqual('send')
-      })
-
-      it('has second item "send" linked to /send in navbar', () => {
-        expect(wrapper.findAll('ul > a > a').at(1).attributes('href')).toBe('/send')
-      })
-
-      it('has third item "transactions" in navbar', () => {
-        expect(navbar.findAll('ul > a').at(2).text()).toEqual('transactions')
-      })
-
-      it('has third item "transactions" linked to transactions in navbar', async () => {
-        expect(wrapper.findAll('ul > a > a').at(2).attributes('href')).toBe('/transactions')
-      })
-
-      it('has fourth item "My profile" in navbar', () => {
-        expect(navbar.findAll('ul > a').at(3).text()).toEqual('site.navbar.my-profil')
-      })
-
-      it('has fourth item "My profile" linked to profile in navbar', async () => {
-        expect(wrapper.findAll('ul > a > a').at(3).attributes('href')).toBe('/profile')
-      })
-
-      it('has a link to the members area', () => {
-        expect(wrapper.findAll('ul').at(2).text()).toContain('members_area')
-        expect(wrapper.findAll('ul').at(2).text()).toContain('!')
-        expect(wrapper.findAll('ul').at(2).find('a').attributes('href')).toBe(
-          'https://elopage.com/s/gradido/basic-de/payment?locale=en&prid=111&pid=123&firstName=User&lastName=Example&email=user@example.org',
-        )
-      })
-
-     
-
       describe('logout', () => {
         beforeEach(async () => {
           await apolloMock.mockResolvedValue({
@@ -274,6 +221,5 @@ describe('DashboardLayoutGdd', () => {
         })
       })
     })
-    */
   })
 })

From 0a3db57b7fe8f977375f4db5c919e02829fe2ad7 Mon Sep 17 00:00:00 2001
From: elweyn <heine.hannes@gmail.com>
Date: Fri, 10 Dec 2021 12:51:22 +0100
Subject: [PATCH 40/51] Remove SideBar test, side bar remove changed the
 dashboard-plugin

---
 .../components/SidebarPlugin/SideBar.spec.js  | 200 ------------------
 frontend/src/plugins/dashboard-plugin.test.js |   2 +-
 2 files changed, 1 insertion(+), 201 deletions(-)
 delete mode 100644 frontend/src/components/SidebarPlugin/SideBar.spec.js

diff --git a/frontend/src/components/SidebarPlugin/SideBar.spec.js b/frontend/src/components/SidebarPlugin/SideBar.spec.js
deleted file mode 100644
index 3f1a29034..000000000
--- a/frontend/src/components/SidebarPlugin/SideBar.spec.js
+++ /dev/null
@@ -1,200 +0,0 @@
-import { mount, RouterLinkStub } from '@vue/test-utils'
-import SideBar from './SideBar'
-
-const localVue = global.localVue
-
-const storeDispatchMock = jest.fn()
-
-describe('SideBar', () => {
-  let wrapper
-
-  const stubs = {
-    RouterLink: RouterLinkStub,
-  }
-
-  const propsData = {
-    balance: 1234.56,
-  }
-
-  const mocks = {
-    $store: {
-      state: {
-        email: 'test@example.org',
-        publisherId: 123,
-        firstName: 'test',
-        lastName: 'example',
-        hasElopage: false,
-      },
-      dispatch: storeDispatchMock,
-    },
-    $i18n: {
-      locale: 'en',
-    },
-    $t: jest.fn((t) => t),
-    $n: jest.fn((n) => n),
-  }
-
-  const Wrapper = () => {
-    return mount(SideBar, { localVue, mocks, stubs, propsData })
-  }
-
-  describe('mount', () => {
-    beforeEach(() => {
-      wrapper = Wrapper()
-    })
-
-    it('renders the component', () => {
-      expect(wrapper.find('#sidenav-main').exists()).toBeTruthy()
-    })
-
-    describe('navbar button', () => {
-      it('has a navbar button', () => {
-        expect(wrapper.find('button.navbar-toggler').exists()).toBeTruthy()
-      })
-
-      it('calls showSidebar when clicked', async () => {
-        const spy = jest.spyOn(wrapper.vm.$sidebar, 'displaySidebar')
-        wrapper.find('button.navbar-toggler').trigger('click')
-        await wrapper.vm.$nextTick()
-        expect(spy).toHaveBeenCalledWith(true)
-      })
-    })
-
-    describe('balance', () => {
-      it('shows em-dash as balance while loading', () => {
-        expect(wrapper.find('div.row.text-center').text()).toBe('— GDD')
-      })
-
-      it('shows the when loaded', async () => {
-        wrapper.setProps({
-          pending: false,
-        })
-        await wrapper.vm.$nextTick()
-        expect(wrapper.find('div.row.text-center').text()).toBe('1234.56 GDD')
-      })
-    })
-
-    describe('close siedbar', () => {
-      it('calls closeSidebar when clicked', async () => {
-        const spy = jest.spyOn(wrapper.vm.$sidebar, 'displaySidebar')
-        wrapper.find('#sidenav-collapse-main').find('button.navbar-toggler').trigger('click')
-        await wrapper.vm.$nextTick()
-        expect(spy).toHaveBeenCalledWith(false)
-      })
-    })
-
-    describe('static menu items', () => {
-      describe("member's area without publisher ID", () => {
-        it('has a link to the elopage', () => {
-          expect(wrapper.findAll('li').at(0).text()).toContain('members_area')
-        })
-
-        it('has a badge', () => {
-          expect(wrapper.findAll('li').at(0).text()).toContain('!')
-        })
-
-        it('links to the elopage registration', () => {
-          expect(wrapper.findAll('li').at(0).find('a').attributes('href')).toBe(
-            'https://elopage.com/s/gradido/basic-de/payment?locale=en&prid=111&pid=123&firstName=test&lastName=example&email=test@example.org',
-          )
-        })
-
-        describe('with locale="de"', () => {
-          beforeEach(() => {
-            mocks.$i18n.locale = 'de'
-          })
-
-          it('links to the German elopage registration when locale is set to de', () => {
-            expect(wrapper.findAll('li').at(0).find('a').attributes('href')).toBe(
-              'https://elopage.com/s/gradido/basic-de/payment?locale=de&prid=111&pid=123&firstName=test&lastName=example&email=test@example.org',
-            )
-          })
-        })
-
-        describe("member's area with publisher ID", () => {
-          beforeEach(() => {
-            mocks.$store.state.hasElopage = true
-          })
-
-          it('links to the elopage member area', () => {
-            expect(wrapper.findAll('li').at(0).find('a').attributes('href')).toBe(
-              'https://elopage.com/s/gradido/sign_in?locale=de',
-            )
-          })
-
-          it('has no badge', () => {
-            expect(wrapper.findAll('li').at(0).text()).not.toContain('!')
-          })
-        })
-
-        describe("member's area with default publisher ID  and no elopage", () => {
-          beforeEach(() => {
-            mocks.$store.state.publisherId = null
-            mocks.$store.state.hasElopage = false
-          })
-
-          it('links to the elopage member area with default publisher ID', () => {
-            expect(wrapper.findAll('li').at(0).find('a').attributes('href')).toBe(
-              'https://elopage.com/s/gradido/basic-de/payment?locale=de&prid=111&pid=2896&firstName=test&lastName=example&email=test@example.org',
-            )
-          })
-
-          it('has a badge', () => {
-            expect(wrapper.findAll('li').at(0).text()).toContain('!')
-          })
-        })
-      })
-
-      describe('logout', () => {
-        it('has a logout button', () => {
-          expect(wrapper.findAll('li').at(1).text()).toBe('logout')
-        })
-
-        it('emits logout when logout is clicked', async () => {
-          wrapper.findAll('li').at(1).find('a').trigger('click')
-          await wrapper.vm.$nextTick()
-          expect(wrapper.emitted('logout')).toEqual([[]])
-        })
-      })
-
-      describe('admin-area', () => {
-        it('is not visible when not an admin', () => {
-          expect(wrapper.findAll('li').at(1).text()).not.toBe('admin_area')
-        })
-
-        describe('logged in as admin', () => {
-          const assignLocationSpy = jest.fn()
-          beforeEach(async () => {
-            mocks.$store.state.isAdmin = true
-            mocks.$store.state.token = 'valid-token'
-            delete window.location
-            window.location = {
-              assign: assignLocationSpy,
-            }
-            wrapper = Wrapper()
-          })
-
-          it('is visible', () => {
-            expect(wrapper.findAll('li').at(1).text()).toBe('admin_area')
-          })
-
-          describe('click on admin area', () => {
-            beforeEach(async () => {
-              await wrapper.findAll('li').at(1).find('a').trigger('click')
-            })
-
-            it('opens a new window when clicked', () => {
-              expect(assignLocationSpy).toHaveBeenCalledWith(
-                'http://localhost/admin/authenticate?token=valid-token',
-              )
-            })
-
-            it('dispatches logout to store', () => {
-              expect(storeDispatchMock).toHaveBeenCalledWith('logout')
-            })
-          })
-        })
-      })
-    })
-  })
-})
diff --git a/frontend/src/plugins/dashboard-plugin.test.js b/frontend/src/plugins/dashboard-plugin.test.js
index 25083c399..613bb184f 100644
--- a/frontend/src/plugins/dashboard-plugin.test.js
+++ b/frontend/src/plugins/dashboard-plugin.test.js
@@ -27,7 +27,7 @@ describe('dashboard plugin', () => {
   })
 
   describe('vue toasted', () => {
-    const toastedAction = vueUseMock.mock.calls[11][1].action.onClick
+    const toastedAction = vueUseMock.mock.calls[10][1].action.onClick
     const goAwayMock = jest.fn()
     const toastObject = {
       goAway: goAwayMock,

From 11fc0c16e923808c206372bc1ad533a5027a7ae3 Mon Sep 17 00:00:00 2001
From: Alexander Friedland <ogerly@users.noreply.github.com>
Date: Fri, 10 Dec 2021 12:54:38 +0100
Subject: [PATCH 41/51] Update frontend/src/components/Menu/Navbar.spec.js

Co-authored-by: Hannes Heine <heine.hannes@gmail.com>
---
 frontend/src/components/Menu/Navbar.spec.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/frontend/src/components/Menu/Navbar.spec.js b/frontend/src/components/Menu/Navbar.spec.js
index 5884b7192..d757d49e0 100644
--- a/frontend/src/components/Menu/Navbar.spec.js
+++ b/frontend/src/components/Menu/Navbar.spec.js
@@ -36,7 +36,6 @@ describe('Navbar', () => {
     it('renders the component', () => {
       expect(wrapper.find('div.component-navbar').exists()).toBeTruthy()
     })
-  })
 
   describe('navigation Navbar', () => {
     it('has .navbar-brand in the navbar', () => {

From 0aa2154abdd8036a6e23c5846305e930f2d67b3a Mon Sep 17 00:00:00 2001
From: Alexander Friedland <ogerly@users.noreply.github.com>
Date: Fri, 10 Dec 2021 12:55:03 +0100
Subject: [PATCH 42/51] Update frontend/src/components/Menu/Navbar.spec.js

Co-authored-by: Hannes Heine <heine.hannes@gmail.com>
---
 frontend/src/components/Menu/Navbar.spec.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/frontend/src/components/Menu/Navbar.spec.js b/frontend/src/components/Menu/Navbar.spec.js
index d757d49e0..b225b43c4 100644
--- a/frontend/src/components/Menu/Navbar.spec.js
+++ b/frontend/src/components/Menu/Navbar.spec.js
@@ -77,4 +77,5 @@ describe('Navbar', () => {
       expect(wrapper.findAll('.nav-item').at(9).text()).toEqual('logout')
     })
   })
+  })
 })

From 49c192ebbf106e537ab2231ad00f523934d8dfef Mon Sep 17 00:00:00 2001
From: Alexander Friedland <ogerly@users.noreply.github.com>
Date: Fri, 10 Dec 2021 12:55:19 +0100
Subject: [PATCH 43/51] Update frontend/src/components/Menu/Sidebar.spec.js

Co-authored-by: Hannes Heine <heine.hannes@gmail.com>
---
 frontend/src/components/Menu/Sidebar.spec.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/frontend/src/components/Menu/Sidebar.spec.js b/frontend/src/components/Menu/Sidebar.spec.js
index 2ecd45933..ae03067b3 100644
--- a/frontend/src/components/Menu/Sidebar.spec.js
+++ b/frontend/src/components/Menu/Sidebar.spec.js
@@ -30,7 +30,6 @@ describe('Sidebar', () => {
     it('renders the component', () => {
       expect(wrapper.find('div#component-sidebar').exists()).toBeTruthy()
     })
-  })
 
   describe('navigation Navbar', () => {
     it('has seven b-nav-item in the navbar', () => {

From 04819a1156d37d1d6beff1028605fab2a72c76da Mon Sep 17 00:00:00 2001
From: Alexander Friedland <ogerly@users.noreply.github.com>
Date: Fri, 10 Dec 2021 12:55:32 +0100
Subject: [PATCH 44/51] Update frontend/src/components/Menu/Sidebar.spec.js

Co-authored-by: Hannes Heine <heine.hannes@gmail.com>
---
 frontend/src/components/Menu/Sidebar.spec.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/frontend/src/components/Menu/Sidebar.spec.js b/frontend/src/components/Menu/Sidebar.spec.js
index ae03067b3..ea1f28259 100644
--- a/frontend/src/components/Menu/Sidebar.spec.js
+++ b/frontend/src/components/Menu/Sidebar.spec.js
@@ -61,4 +61,5 @@ describe('Sidebar', () => {
       expect(wrapper.findAll('.nav-item').at(6).text()).toEqual('logout')
     })
   })
+  })
 })

From fba757228c50a28b2bb3b36a514c7dac8c87735a Mon Sep 17 00:00:00 2001
From: Ulf Gebhardt <ulf.gebhardt@webcraft-media.de>
Date: Fri, 10 Dec 2021 17:03:34 +0100
Subject: [PATCH 45/51] renamed pendingCreations into loginPendingTasksAdmin as
 to our naming conventions

---
 backend/src/graphql/resolver/AdminResolver.ts | 38 +++++++++----------
 ...gCreation.ts => LoginPendingTasksAdmin.ts} |  2 +-
 2 files changed, 20 insertions(+), 20 deletions(-)
 rename backend/src/typeorm/repository/{PendingCreation.ts => LoginPendingTasksAdmin.ts} (64%)

diff --git a/backend/src/graphql/resolver/AdminResolver.ts b/backend/src/graphql/resolver/AdminResolver.ts
index 749f2f591..127e5f26c 100644
--- a/backend/src/graphql/resolver/AdminResolver.ts
+++ b/backend/src/graphql/resolver/AdminResolver.ts
@@ -6,7 +6,7 @@ import { UpdatePendingCreation } from '../model/UpdatePendingCreation'
 import { RIGHTS } from '../../auth/RIGHTS'
 import { TransactionRepository } from '../../typeorm/repository/Transaction'
 import { TransactionCreationRepository } from '../../typeorm/repository/TransactionCreation'
-import { PendingCreationRepository } from '../../typeorm/repository/PendingCreation'
+import { LoginPendingTasksAdminRepository } from '../../typeorm/repository/LoginPendingTasksAdmin'
 import { UserRepository } from '../../typeorm/repository/User'
 import CreatePendingCreationArgs from '../arg/CreatePendingCreationArgs'
 import UpdatePendingCreationArgs from '../arg/UpdatePendingCreationArgs'
@@ -48,8 +48,8 @@ export class AdminResolver {
     const creations = await getUserCreations(user.id)
     const creationDateObj = new Date(creationDate)
     if (isCreationValid(creations, amount, creationDateObj)) {
-      const pendingCreationRepository = getCustomRepository(PendingCreationRepository)
-      const loginPendingTaskAdmin = pendingCreationRepository.create()
+      const loginPendingTasksAdminRepository = getCustomRepository(LoginPendingTasksAdminRepository)
+      const loginPendingTaskAdmin = loginPendingTasksAdminRepository.create()
       loginPendingTaskAdmin.userId = user.id
       loginPendingTaskAdmin.amount = BigInt(amount * 10000)
       loginPendingTaskAdmin.created = new Date()
@@ -57,7 +57,7 @@ export class AdminResolver {
       loginPendingTaskAdmin.memo = memo
       loginPendingTaskAdmin.moderator = moderator
 
-      pendingCreationRepository.save(loginPendingTaskAdmin)
+      loginPendingTasksAdminRepository.save(loginPendingTaskAdmin)
     }
     return await getUserCreations(user.id)
   }
@@ -70,8 +70,8 @@ export class AdminResolver {
     const userRepository = getCustomRepository(UserRepository)
     const user = await userRepository.findByEmail(email)
 
-    const pendingCreationRepository = getCustomRepository(PendingCreationRepository)
-    const updatedCreation = await pendingCreationRepository.findOneOrFail({ id })
+    const loginPendingTasksAdminRepository = getCustomRepository(LoginPendingTasksAdminRepository)
+    const updatedCreation = await loginPendingTasksAdminRepository.findOneOrFail({ id })
 
     if (updatedCreation.userId !== user.id)
       throw new Error('user of the pending creation and send user does not correspond')
@@ -81,7 +81,7 @@ export class AdminResolver {
     updatedCreation.date = new Date(creationDate)
     updatedCreation.moderator = moderator
 
-    await pendingCreationRepository.save(updatedCreation)
+    await loginPendingTasksAdminRepository.save(updatedCreation)
     const result = new UpdatePendingCreation()
     result.amount = parseInt(amount.toString())
     result.memo = updatedCreation.memo
@@ -110,8 +110,8 @@ export class AdminResolver {
 
   @Query(() => [PendingCreation])
   async getPendingCreations(): Promise<PendingCreation[]> {
-    const pendingCreationRepository = getCustomRepository(PendingCreationRepository)
-    const pendingCreations = await pendingCreationRepository.find()
+    const loginPendingTasksAdminRepository = getCustomRepository(LoginPendingTasksAdminRepository)
+    const pendingCreations = await loginPendingTasksAdminRepository.find()
 
     const pendingCreationsPromise = await Promise.all(
       pendingCreations.map(async (pendingCreation) => {
@@ -137,16 +137,16 @@ export class AdminResolver {
 
   @Mutation(() => Boolean)
   async deletePendingCreation(@Arg('id') id: number): Promise<boolean> {
-    const pendingCreationRepository = getCustomRepository(PendingCreationRepository)
-    const entity = await pendingCreationRepository.findOneOrFail(id)
-    const res = await pendingCreationRepository.delete(entity)
+    const loginPendingTasksAdminRepository = getCustomRepository(LoginPendingTasksAdminRepository)
+    const entity = await loginPendingTasksAdminRepository.findOneOrFail(id)
+    const res = await loginPendingTasksAdminRepository.delete(entity)
     return !!res
   }
 
   @Mutation(() => Boolean)
   async confirmPendingCreation(@Arg('id') id: number): Promise<boolean> {
-    const pendingCreationRepository = getCustomRepository(PendingCreationRepository)
-    const pendingCreation = await pendingCreationRepository.findOneOrFail(id)
+    const loginPendingTasksAdminRepository = getCustomRepository(LoginPendingTasksAdminRepository)
+    const pendingCreation = await loginPendingTasksAdminRepository.findOneOrFail(id)
 
     const transactionRepository = getCustomRepository(TransactionRepository)
     let transaction = new Transaction()
@@ -198,7 +198,7 @@ export class AdminResolver {
     userBalance.modified = new Date()
     userBalance.recordDate = userBalance.recordDate ? userBalance.recordDate : new Date()
     await balanceRepository.save(userBalance)
-    await pendingCreationRepository.delete(pendingCreation)
+    await loginPendingTasksAdminRepository.delete(pendingCreation)
 
     return true
   }
@@ -247,8 +247,8 @@ async function getUserCreations(id: number): Promise<number[]> {
     })
     .getRawOne()
 
-  const pendingCreationRepository = getCustomRepository(PendingCreationRepository)
-  const pendingAmountMounth = await pendingCreationRepository
+  const loginPendingTasksAdminRepository = getCustomRepository(LoginPendingTasksAdminRepository)
+  const pendingAmountMounth = await loginPendingTasksAdminRepository
     .createQueryBuilder('login_pending_tasks_admin')
     .select('SUM(login_pending_tasks_admin.amount)', 'sum')
     .where('login_pending_tasks_admin.userId = :id', { id })
@@ -260,7 +260,7 @@ async function getUserCreations(id: number): Promise<number[]> {
     })
     .getRawOne()
 
-  const pendingAmountLastMounth = await pendingCreationRepository
+  const pendingAmountLastMounth = await loginPendingTasksAdminRepository
     .createQueryBuilder('login_pending_tasks_admin')
     .select('SUM(login_pending_tasks_admin.amount)', 'sum')
     .where('login_pending_tasks_admin.userId = :id', { id })
@@ -272,7 +272,7 @@ async function getUserCreations(id: number): Promise<number[]> {
     })
     .getRawOne()
 
-  const pendingAmountBeforeLastMounth = await pendingCreationRepository
+  const pendingAmountBeforeLastMounth = await loginPendingTasksAdminRepository
     .createQueryBuilder('login_pending_tasks_admin')
     .select('SUM(login_pending_tasks_admin.amount)', 'sum')
     .where('login_pending_tasks_admin.userId = :id', { id })
diff --git a/backend/src/typeorm/repository/PendingCreation.ts b/backend/src/typeorm/repository/LoginPendingTasksAdmin.ts
similarity index 64%
rename from backend/src/typeorm/repository/PendingCreation.ts
rename to backend/src/typeorm/repository/LoginPendingTasksAdmin.ts
index 8b49e7ecc..b5c55fcd2 100644
--- a/backend/src/typeorm/repository/PendingCreation.ts
+++ b/backend/src/typeorm/repository/LoginPendingTasksAdmin.ts
@@ -2,4 +2,4 @@ import { EntityRepository, Repository } from 'typeorm'
 import { LoginPendingTasksAdmin } from '@entity/LoginPendingTasksAdmin'
 
 @EntityRepository(LoginPendingTasksAdmin)
-export class PendingCreationRepository extends Repository<LoginPendingTasksAdmin> {}
+export class LoginPendingTasksAdminRepository extends Repository<LoginPendingTasksAdmin> {}

From ea1352d57175761552beb164ea3166fe521148a1 Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Fri, 10 Dec 2021 19:16:53 +0100
Subject: [PATCH 46/51] more tests for Navbar.vue, yarn lint --fix

---
 frontend/src/components/Menu/Navbar.spec.js   | 75 ++++++++++---------
 frontend/src/components/Menu/Navbar.vue       |  1 -
 frontend/src/components/Menu/Sidebar.spec.js  | 52 ++++++-------
 .../src/views/Layout/DashboardLayout_gdd.vue  | 11 +--
 4 files changed, 71 insertions(+), 68 deletions(-)

diff --git a/frontend/src/components/Menu/Navbar.spec.js b/frontend/src/components/Menu/Navbar.spec.js
index b225b43c4..78b78b822 100644
--- a/frontend/src/components/Menu/Navbar.spec.js
+++ b/frontend/src/components/Menu/Navbar.spec.js
@@ -6,6 +6,7 @@ const localVue = global.localVue
 const propsData = {
   balance: 1234,
   visible: false,
+  elopageUri: 'https://elopage.com',
 }
 
 const mocks = {
@@ -15,7 +16,7 @@ const mocks = {
   $t: jest.fn((t) => t),
   $store: {
     state: {
-      hasElopage: true,
+      hasElopage: false,
       isAdmin: true,
     },
   },
@@ -37,45 +38,47 @@ describe('Navbar', () => {
       expect(wrapper.find('div.component-navbar').exists()).toBeTruthy()
     })
 
-  describe('navigation Navbar', () => {
-    it('has .navbar-brand in the navbar', () => {
-      expect(wrapper.find('.navbar-brand').exists()).toBeTruthy()
-    })
-    it('has b-navbar-toggle in the navbar', () => {
-      expect(wrapper.find('.navbar-toggler').exists()).toBeTruthy()
-    })
-    it('has ten b-nav-item in the navbar', () => {
-      expect(wrapper.findAll('.nav-item')).toHaveLength(10)
-    })
+    describe('navigation Navbar', () => {
+      it('has .navbar-brand in the navbar', () => {
+        expect(wrapper.find('.navbar-brand').exists()).toBeTruthy()
+      })
+      it('has b-navbar-toggle in the navbar', () => {
+        expect(wrapper.find('.navbar-toggler').exists()).toBeTruthy()
+      })
+      it('has ten b-nav-item in the navbar', () => {
+        expect(wrapper.findAll('.nav-item')).toHaveLength(10)
+      })
 
-    it('has first nav-item "amount GDD" in navbar', () => {
-      expect(wrapper.findAll('.nav-item').at(1).text()).toEqual('1234 GDD')
-    })
+      it('has first nav-item "amount GDD" in navbar', () => {
+        expect(wrapper.findAll('.nav-item').at(1).text()).toEqual('1234 GDD')
+      })
 
-    it('has first nav-item "overview" in navbar', () => {
-      expect(wrapper.findAll('.nav-item').at(3).text()).toEqual('overview')
-    })
-    it('has first nav-item "send" in navbar', () => {
-      expect(wrapper.findAll('.nav-item').at(4).text()).toEqual('send')
-    })
-    it('has first nav-item "transactions" in navbar', () => {
-      expect(wrapper.findAll('.nav-item').at(5).text()).toEqual('transactions')
-    })
-    it('has first nav-item "my-profil" in navbar', () => {
-      expect(wrapper.findAll('.nav-item').at(6).text()).toEqual('site.navbar.my-profil')
-    })
+      it('has first nav-item "overview" in navbar', () => {
+        expect(wrapper.findAll('.nav-item').at(3).text()).toEqual('overview')
+      })
+      it('has first nav-item "send" in navbar', () => {
+        expect(wrapper.findAll('.nav-item').at(4).text()).toEqual('send')
+      })
+      it('has first nav-item "transactions" in navbar', () => {
+        expect(wrapper.findAll('.nav-item').at(5).text()).toEqual('transactions')
+      })
+      it('has first nav-item "my-profil" in navbar', () => {
+        expect(wrapper.findAll('.nav-item').at(6).text()).toEqual('site.navbar.my-profil')
+      })
 
-    it('has a link to the members area', () => {
-      expect(wrapper.findAll('.nav-item').at(7).text()).toContain('members_area')
-      expect(wrapper.findAll('.nav-item').at(7).find('a').attributes('href')).toBe('#')
-    })
+      it('has a link to the members area', () => {
+        expect(wrapper.findAll('.nav-item').at(7).text()).toContain('members_area')
+        expect(wrapper.findAll('.nav-item').at(7).find('a').attributes('href')).toBe(
+          'https://elopage.com',
+        )
+      })
 
-    it('has first nav-item "admin_area" in navbar', () => {
-      expect(wrapper.findAll('.nav-item').at(8).text()).toEqual('admin_area')
+      it('has first nav-item "admin_area" in navbar', () => {
+        expect(wrapper.findAll('.nav-item').at(8).text()).toEqual('admin_area')
+      })
+      it('has first nav-item "logout" in navbar', () => {
+        expect(wrapper.findAll('.nav-item').at(9).text()).toEqual('logout')
+      })
     })
-    it('has first nav-item "logout" in navbar', () => {
-      expect(wrapper.findAll('.nav-item').at(9).text()).toEqual('logout')
-    })
-  })
   })
 })
diff --git a/frontend/src/components/Menu/Navbar.vue b/frontend/src/components/Menu/Navbar.vue
index 97533f9d0..0b8154293 100644
--- a/frontend/src/components/Menu/Navbar.vue
+++ b/frontend/src/components/Menu/Navbar.vue
@@ -107,6 +107,5 @@ export default {
 }
 .b-collaps-gradido li :hover {
   background-color: #e9e7e7f5;
-  font-size: larger;
 }
 </style>
diff --git a/frontend/src/components/Menu/Sidebar.spec.js b/frontend/src/components/Menu/Sidebar.spec.js
index ea1f28259..884269b9b 100644
--- a/frontend/src/components/Menu/Sidebar.spec.js
+++ b/frontend/src/components/Menu/Sidebar.spec.js
@@ -31,35 +31,35 @@ describe('Sidebar', () => {
       expect(wrapper.find('div#component-sidebar').exists()).toBeTruthy()
     })
 
-  describe('navigation Navbar', () => {
-    it('has seven b-nav-item in the navbar', () => {
-      expect(wrapper.findAll('.nav-item')).toHaveLength(7)
-    })
+    describe('navigation Navbar', () => {
+      it('has seven b-nav-item in the navbar', () => {
+        expect(wrapper.findAll('.nav-item')).toHaveLength(7)
+      })
 
-    it('has first nav-item "overview" in navbar', () => {
-      expect(wrapper.findAll('.nav-item').at(0).text()).toEqual('overview')
-    })
+      it('has first nav-item "overview" in navbar', () => {
+        expect(wrapper.findAll('.nav-item').at(0).text()).toEqual('overview')
+      })
 
-    it('has first nav-item "send" in navbar', () => {
-      expect(wrapper.findAll('.nav-item').at(1).text()).toEqual('send')
-    })
+      it('has first nav-item "send" in navbar', () => {
+        expect(wrapper.findAll('.nav-item').at(1).text()).toEqual('send')
+      })
 
-    it('has first nav-item "transactions" in navbar', () => {
-      expect(wrapper.findAll('.nav-item').at(2).text()).toEqual('transactions')
+      it('has first nav-item "transactions" in navbar', () => {
+        expect(wrapper.findAll('.nav-item').at(2).text()).toEqual('transactions')
+      })
+      it('has first nav-item "my-profil" in navbar', () => {
+        expect(wrapper.findAll('.nav-item').at(3).text()).toEqual('site.navbar.my-profil')
+      })
+      it('has a link to the members area', () => {
+        expect(wrapper.findAll('.nav-item').at(4).text()).toContain('members_area')
+        expect(wrapper.findAll('.nav-item').at(4).find('a').attributes('href')).toBe('#')
+      })
+      it('has first nav-item "admin_area" in navbar', () => {
+        expect(wrapper.findAll('.nav-item').at(5).text()).toEqual('admin_area')
+      })
+      it('has first nav-item "logout" in navbar', () => {
+        expect(wrapper.findAll('.nav-item').at(6).text()).toEqual('logout')
+      })
     })
-    it('has first nav-item "my-profil" in navbar', () => {
-      expect(wrapper.findAll('.nav-item').at(3).text()).toEqual('site.navbar.my-profil')
-    })
-    it('has a link to the members area', () => {
-      expect(wrapper.findAll('.nav-item').at(4).text()).toContain('members_area')
-      expect(wrapper.findAll('.nav-item').at(4).find('a').attributes('href')).toBe('#')
-    })
-    it('has first nav-item "admin_area" in navbar', () => {
-      expect(wrapper.findAll('.nav-item').at(5).text()).toEqual('admin_area')
-    })
-    it('has first nav-item "logout" in navbar', () => {
-      expect(wrapper.findAll('.nav-item').at(6).text()).toEqual('logout')
-    })
-  })
   })
 })
diff --git a/frontend/src/views/Layout/DashboardLayout_gdd.vue b/frontend/src/views/Layout/DashboardLayout_gdd.vue
index 1932711ef..2659dff04 100755
--- a/frontend/src/views/Layout/DashboardLayout_gdd.vue
+++ b/frontend/src/views/Layout/DashboardLayout_gdd.vue
@@ -59,7 +59,6 @@ export default {
       transactionCount: 0,
       pending: true,
       visible: false,
-      elopageUri: this.getElopageLink(),
     }
   },
   methods: {
@@ -112,7 +111,12 @@ export default {
       window.location.assign(CONFIG.ADMIN_AUTH_URL.replace('$1', this.$store.state.token))
       this.$store.dispatch('logout') // logout without redirect
     },
-    getElopageLink() {
+    setVisible(bool) {
+      this.visible = bool
+    },
+  },
+  computed: {
+    elopageUri() {
       const pId = this.$store.state.publisherId
         ? this.$store.state.publisherId
         : CONFIG.DEFAULT_PUBLISHER_ID
@@ -122,9 +126,6 @@ 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>

From 1dff467b10968df82e62434da89434033b978f9d Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Sat, 11 Dec 2021 09:38:32 +0100
Subject: [PATCH 47/51] Add style .bg-lightgrey in AccountOverview.vue

---
 frontend/src/views/Layout/DashboardLayout_gdd.vue | 3 +++
 frontend/src/views/Pages/AccountOverview.vue      | 6 +++---
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/frontend/src/views/Layout/DashboardLayout_gdd.vue b/frontend/src/views/Layout/DashboardLayout_gdd.vue
index 2659dff04..bd3bd8e4c 100755
--- a/frontend/src/views/Layout/DashboardLayout_gdd.vue
+++ b/frontend/src/views/Layout/DashboardLayout_gdd.vue
@@ -140,4 +140,7 @@ export default {
   height: 2rem;
   padding-left: 10px;
 }
+.bg-lightgrey {
+  background-color: #f0f0f0;
+}
 </style>
diff --git a/frontend/src/views/Pages/AccountOverview.vue b/frontend/src/views/Pages/AccountOverview.vue
index 98db2c5ad..5cb04d9f0 100644
--- a/frontend/src/views/Pages/AccountOverview.vue
+++ b/frontend/src/views/Pages/AccountOverview.vue
@@ -4,7 +4,7 @@
       <b-row>
         <b-col class="col-6">
           <b-row>
-            <b-col class="col-11 ml-2 p-3" style="background-color: #f0f0f0">
+            <b-col class="col-11 ml-2 p-3 bg-lightgrey">
               <status
                 class="gdd-status-gdd"
                 :pending="pending"
@@ -14,9 +14,9 @@
             </b-col>
           </b-row>
         </b-col>
-        <b-col class="col-6 text-right">
+        <b-col class="col-6 text-right bg-lightgrey">
           <b-row>
-            <b-col class="p-3" style="background-color: #f0f0f0">
+            <b-col class="p-3">
               <status
                 class="gdd-status-gdt"
                 :pending="pending"

From b7a1b2da699ddd05ac945d7a38db9dc2e5d30bc9 Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Sat, 11 Dec 2021 09:42:39 +0100
Subject: [PATCH 48/51] sidebar change paddings for b-nav

---
 frontend/src/components/Menu/Sidebar.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/Menu/Sidebar.vue b/frontend/src/components/Menu/Sidebar.vue
index ec3df2015..70119c69e 100644
--- a/frontend/src/components/Menu/Sidebar.vue
+++ b/frontend/src/components/Menu/Sidebar.vue
@@ -1,6 +1,6 @@
 <template>
   <div id="component-sidebar">
-    <div class="px-3 py-2">
+    <div class="pl-3">
       <p></p>
       <div class="mb-6">
         <b-nav vertical class="w-200">

From 2cf7de2e4b147128f230fd057d85f319301adbfb Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Sat, 11 Dec 2021 10:27:47 +0100
Subject: [PATCH 49/51] test watch function for visible

---
 frontend/src/components/Menu/Navbar.spec.js | 21 ++++++++++++++++++++-
 1 file changed, 20 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/Menu/Navbar.spec.js b/frontend/src/components/Menu/Navbar.spec.js
index 78b78b822..f9e612cad 100644
--- a/frontend/src/components/Menu/Navbar.spec.js
+++ b/frontend/src/components/Menu/Navbar.spec.js
@@ -1,4 +1,4 @@
-import { mount } from '@vue/test-utils'
+import { mount, shallowMount } from '@vue/test-utils'
 import Navbar from './Navbar'
 
 const localVue = global.localVue
@@ -81,4 +81,23 @@ describe('Navbar', () => {
       })
     })
   })
+  describe('check watch visible true', () => {
+    beforeEach(async () => {
+      await wrapper.setProps({ visible: true })
+    })
+
+    it('has visibleCollapse == visible', async () => {
+      expect(wrapper.vm.visibleCollapse).toBe(true)
+    })
+  })
+
+  describe('check watch visible false', () => {
+    beforeEach(async () => {
+      await wrapper.setProps({ visible: false })
+    })
+
+    it('has visibleCollapse == visible', async () => {
+      expect(wrapper.vm.visibleCollapse).toBe(false)
+    })
+  })
 })

From 7bd952a14a64a2f8f40e5026577397b3b7ebebbb Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Sat, 11 Dec 2021 10:31:10 +0100
Subject: [PATCH 50/51] remove shallowMount from Navbar.vue

---
 frontend/src/components/Menu/Navbar.spec.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/Menu/Navbar.spec.js b/frontend/src/components/Menu/Navbar.spec.js
index f9e612cad..bb62df36a 100644
--- a/frontend/src/components/Menu/Navbar.spec.js
+++ b/frontend/src/components/Menu/Navbar.spec.js
@@ -1,4 +1,4 @@
-import { mount, shallowMount } from '@vue/test-utils'
+import { mount } from '@vue/test-utils'
 import Navbar from './Navbar'
 
 const localVue = global.localVue

From 50effee00b0479b7e3a492dd10b6842bae76613a Mon Sep 17 00:00:00 2001
From: Alexander Friedland <ogerly@users.noreply.github.com>
Date: Mon, 13 Dec 2021 08:02:18 +0100
Subject: [PATCH 51/51] no async

---
 frontend/src/components/Menu/Navbar.spec.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/Menu/Navbar.spec.js b/frontend/src/components/Menu/Navbar.spec.js
index bb62df36a..2b929f422 100644
--- a/frontend/src/components/Menu/Navbar.spec.js
+++ b/frontend/src/components/Menu/Navbar.spec.js
@@ -86,7 +86,7 @@ describe('Navbar', () => {
       await wrapper.setProps({ visible: true })
     })
 
-    it('has visibleCollapse == visible', async () => {
+    it('has visibleCollapse == visible', () => {
       expect(wrapper.vm.visibleCollapse).toBe(true)
     })
   })
@@ -96,7 +96,7 @@ describe('Navbar', () => {
       await wrapper.setProps({ visible: false })
     })
 
-    it('has visibleCollapse == visible', async () => {
+    it('has visibleCollapse == visible', () => {
       expect(wrapper.vm.visibleCollapse).toBe(false)
     })
   })