mobile menu header username and mail

frontend/src/components/Menu/Navbar.vue

@@ -8,7 +8,7 @@
           width="200"
           alt="..."
         />
-        <b-button v-b-toggle.sidebar-1 class="d-block d-lg-none">
+        <b-button v-b-toggle.sidebar-mobile class="d-block d-lg-none">
           <span class="navbar-toggler-icon"></span>
         </b-button>
       </b-navbar-brand>

frontend/src/components/Menu/Sidebar.vue

@@ -85,7 +85,7 @@ export default {
   name: 'Sidebar',
   data() {
     return {
-      lightmode: false,
+      // lightmode: false,
     }
   },
 }

frontend/src/components/MobileSidebar/MobileSidebar.vue

@@ -1,9 +1,17 @@
 <template>
   <div>
-    <b-sidebar id="sidebar-1" no-header bg-variant="white" :backdrop="true">
+    <b-sidebar id="sidebar-mobile" bg-variant="white" :backdrop="true">
       <div class="px-3 py-2">
         <sidebar @admin="$emit('admin')" @logout="$emit('logout')" />
       </div>
+      <template #header>
+        <div>
+          <div class="mr-auto">{{ avatarLongName }}</div>
+          <div class="small">
+            <small>{{ $store.state.email }}</small>
+          </div>
+        </div>
+      </template>
     </b-sidebar>
   </div>
 </template>
@@ -15,5 +23,10 @@ export default {
   components: {
     Sidebar,
   },
+  computed: {
+    avatarLongName() {
+      return `${this.$store.state.firstName} ${this.$store.state.lastName}`
+    },
+  },
 }
 </script>