mobil menu close by click of send and transactions

frontend/src/components/SidebarPlugin/SideBar.vue

@@ -44,22 +44,22 @@
         <ul class="navbar-nav">
           <slot name="links"></slot>
         </ul>
-        <hr class="my-3" />
-        <ul class="navbar-nav mb-md-3">
+        <hr class="my-2" />
+        <ul class="navbar-nav">
           <li class="nav-item">
             <a
               :href="`https://elopage.com/s/gradido/sign_in?locale=${$i18n.locale}`"
-              class="nav-link text-lg"
+              class="nav-link"
               target="_blank"
             >
               {{ $t('members_area') }}
             </a>
           </li>
         </ul>
-        <hr class="my-3" />
+        <hr class="my-2" />
         <ul class="navbar-nav mb-md-3">
           <li class="nav-item">
-            <a class="nav-link text-lg pointer" @click="logout">
+            <a class="nav-link pointer" @click="logout">
               {{ $t('logout') }}
             </a>
           </li>

frontend/src/views/Layout/DashboardLayout_gdd.spec.js

@@ -79,31 +79,35 @@ describe('DashboardLayoutGdd', () => {
       })
 
       it('has five items in the navbar', () => {
-        expect(navbar.findAll('ul > li')).toHaveLength(5)
-      })
+        expect(navbar.findAll('ul > a')).toHaveLength(2)
+      })      
 
       it('has first item "send" in navbar', () => {
-        expect(navbar.findAll('ul > li').at(0).text()).toEqual('send')
+        expect(navbar.findAll('ul > a').at(0).text()).toEqual('send')
       })
 
       it('has first item "send" linked to overview in navbar', () => {
-        navbar.findAll('ul > li').at(0).trigger('click')
+        navbar.findAll('ul > a').at(0).trigger('click')
         expect(wrapper.findComponent(RouterLinkStub).props().to).toBe('/overview')
       })
 
       it('has second item "transactions" in navbar', () => {
-        expect(navbar.findAll('ul > li').at(1).text()).toEqual('transactions')
+        expect(navbar.findAll('ul > a').at(1).text()).toEqual('transactions')
       })
 
       // to do: get this working!
       it.skip('has second item "transactions" linked to transactions in navbar', async () => {
-        navbar.findAll('ul > li > a').at(1).trigger('click')
+        navbar.findAll('ul > a').at(1).trigger('click')
         await flushPromises()
         await jest.runAllTimers()
         await flushPromises()
         expect(wrapper.findComponent(RouterLinkStub).props().to).toBe('/transactions')
       })
 
+      it('has tree items in the navbar', () => {
+        expect(navbar.findAll('ul > li')).toHaveLength(3)
+      })
+
       // it('has third item "My profile" in navbar', () => {
       //  expect(navbar.findAll('ul > li').at(2).text()).toEqual('site.navbar.my-profil')
       // })

frontend/src/views/Layout/DashboardLayout_gdd.vue

@@ -3,12 +3,21 @@
     <notifications></notifications>
     <side-bar @logout="logout" :balance="balance">
       <template slot="links">
-        <b-nav-item to="/overview">
-          <b-nav-text class="p-0 text-lg text-muted">{{ $t('send') }}</b-nav-text>
-        </b-nav-item>
-        <b-nav-item to="/transactions">
-          <b-nav-text class="p-0 text-lg text-muted">{{ $t('transactions') }}</b-nav-text>
-        </b-nav-item>
+        <sidebar-item
+          :link="{
+            name: $t('send'),
+            icon: false,
+            path: '/overview',
+          }"
+        ></sidebar-item>
+        <sidebar-item
+          :link="{
+            name: $t('transactions'),
+            icon: '',
+            path: '/transactions',
+          }"
+        ></sidebar-item>
+
         <b-nav-item>
           <b-nav-text class="pt-3"><language-switch /></b-nav-text>
         </b-nav-item>