mobile menu has transparent background color

frontend/src/components/Menu/Sidebar.vue

@@ -1,6 +1,11 @@
 <template>
   <div id="component-sidebar">
-    <div id="side-menu" ref="sideMenu" class="gradido-border-radius appBoxShadow pt-2">
+    <div
+      id="side-menu"
+      ref="sideMenu"
+      class="gradido-border-radius pt-2 bg-white"
+      :class="shadow ? 'appBoxShadow' : ''"
+    >
       <div class="mb-3 mt-3">
         <b-nav vertical class="w-200">
           <b-nav-item to="/overview" class="mb-3" active-class="activeRoute">
@@ -55,6 +60,9 @@
 <script>
 export default {
   name: 'Sidebar',
+  props: {
+    shadow: { type: Boolean, required: false, default: true },
+  },
 }
 </script>
 <style>

frontend/src/components/MobileSidebar/MobileSidebar.vue

@@ -1,23 +1,9 @@
 <template>
   <div>
-    <b-sidebar id="sidebar-mobile" bg-variant="f5" :backdrop="true">
+    <b-sidebar id="sidebar-mobile" :backdrop="true" bg-variant="transparent">
       <div class="px-3 py-2">
-        <sidebar @admin="$emit('admin')" @logout="$emit('logout')" />
+        <sidebar @admin="$emit('admin')" @logout="$emit('logout')" :shadow="false" />
       </div>
-      <template #header>
-        <div>
-          <div class="mr-auto">{{ avatarLongName }}</div>
-          <div class="small">
-            <small>{{ $store.state.email }}</small>
-          </div>
-        </div>
-      </template>
-      <template #footer>
-        <div class="d-flex bg-light">
-          <strong class="mr-auto p-2">{{ $t('send_gdd') }}</strong>
-          <b-button to="/send"><b-icon icon="arrow-right"></b-icon></b-button>
-        </div>
-      </template>
     </b-sidebar>
   </div>
 </template>
@@ -29,10 +15,5 @@ export default {
   components: {
     Sidebar,
   },
-  computed: {
-    avatarLongName() {
-      return `${this.$store.state.firstName} ${this.$store.state.lastName}`
-    },
-  },
 }
 </script>