add content header again

frontend/src/components/SidebarPlugin/SideBar.spec.js

@@ -41,20 +41,6 @@ describe('SideBar', () => {
       expect(wrapper.find('#sidenav-main').exists()).toBeTruthy()
     })
 
-    describe('balance', () => {
-      it('shows em-dash as balance while loading', () => {
-        expect(wrapper.find('.gddBalance').text()).toBe('— GDD')
-      })
-
-      it('shows the when loaded', async () => {
-        wrapper.setProps({
-          pending: false,
-        })
-        await wrapper.vm.$nextTick()
-        expect(wrapper.find('.gddBalance').text()).toBe('1234.56 GDD')
-      })
-    })
-
     describe('navbar button', () => {
       it('has a navbar button', () => {
         expect(wrapper.find('button.navbar-toggler').exists()).toBeTruthy()

frontend/src/components/SidebarPlugin/SideBar.vue

@@ -9,13 +9,6 @@
           <img :src="logo" class="navbar-brand-img" alt="Gradido Logo" />
         </div>
       </div>
-      <div class="gddBalance text-center">{{ pending ? '—' : $n(balance, 'decimal') }} GDD</div>
-
-      <div class="text-center">
-        <div class="avatar">
-          <vue-qrcode :value="$store.state.email" type="image/png"></vue-qrcode>
-        </div>
-      </div>
 
       <slot name="mobile-right">
         <ul class="nav align-items-center d-md-none">
@@ -74,14 +67,12 @@
 </template>
 <script>
 import NavbarToggleButton from '@/components/NavbarToggleButton'
-import VueQrcode from 'vue-qrcode'
 import LanguageSwitch from '@/components/LanguageSwitch.vue'
 
 export default {
   name: 'sidebar',
   components: {
     NavbarToggleButton,
-    VueQrcode,
     LanguageSwitch,
   },
   props: {

frontend/src/views/Layout/DashboardLayout_gdd.vue

@@ -23,6 +23,23 @@
       </template>
     </side-bar>
     <div class="main-content">
+      <b-navbar>
+        <b-navbar-nav class="ml-auto">
+          <b-nav-item right>
+            <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 :value="$store.state.email" type="image/png"></vue-qrcode>
+                </span>
+              </b-media-body>
+            </b-media>
+          </b-nav-item>
+        </b-navbar-nav>
+      </b-navbar>
+
       <div @click="$sidebar.displaySidebar(false)">
         <fade-transition :duration="200" origin="center top" mode="out-in">
           <!-- your content here -->
@@ -51,6 +68,7 @@ import ContentFooter from './ContentFooter.vue'
 // import DashboardContent from './Content.vue';
 import { FadeTransition } from 'vue2-transitions'
 import communityAPI from '../../apis/communityAPI'
+import VueQrcode from 'vue-qrcode'
 
 function hasElement(className) {
   return document.getElementsByClassName(className).length > 0
@@ -71,7 +89,7 @@ function initScrollbar(className) {
 export default {
   components: {
     ContentFooter,
-    // DashboardContent,
+    VueQrcode,
     FadeTransition,
   },
   data() {