From 522f41df09e0b8002ef72988ddde25ac09cfb8d0 Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Sun, 27 Nov 2022 10:40:04 +0100
Subject: [PATCH] add mobile sidebar

---
 frontend/src/components/Menu/Navbar.vue       |  5 +++-
 frontend/src/components/Menu/Sidebar.vue      | 24 +++++++++----------
 .../MobileSidebar/MobileSidebar.vue           | 19 +++++++++++++++
 frontend/src/layouts/DashboardLayout.vue      | 16 +++++--------
 4 files changed, 41 insertions(+), 23 deletions(-)
 create mode 100644 frontend/src/components/MobileSidebar/MobileSidebar.vue

diff --git a/frontend/src/components/Menu/Navbar.vue b/frontend/src/components/Menu/Navbar.vue
index 457f38701..f57df9c6d 100644
--- a/frontend/src/components/Menu/Navbar.vue
+++ b/frontend/src/components/Menu/Navbar.vue
@@ -3,11 +3,14 @@
     <b-navbar toggleable="lg" class="pr-4">
       <b-navbar-brand>
         <b-img
-          class="imgLogo ml--3 mt-lg--2 mt-3 p-2 mb-3 zindex1000"
+          class="imgLogo ml--3 mt-lg--2 mt-3 p-2 mb-3 zindex1000 d-none d-lg-block"
           :src="logo"
           width="200"
           alt="..."
         />
+        <b-button v-b-toggle.sidebar-1 class="d-block d-lg-none">
+          <span class="navbar-toggler-icon"></span>
+        </b-button>
       </b-navbar-brand>
       <b-img class="sheet-img position-absolute zindex1000" :src="sheet"></b-img>
 
diff --git a/frontend/src/components/Menu/Sidebar.vue b/frontend/src/components/Menu/Sidebar.vue
index c9106664a..526e7cb3a 100644
--- a/frontend/src/components/Menu/Sidebar.vue
+++ b/frontend/src/components/Menu/Sidebar.vue
@@ -6,39 +6,39 @@
         <b-nav vertical class="w-200">
           <b-nav-item to="/overview" class="mb-3">
             <b-icon icon="house" aria-hidden="true"></b-icon>
-            <span class="d-none d-lg-inline ml-2">{{ $t('navigation.overview') }}</span>
+            <span class="ml-2">{{ $t('navigation.overview') }}</span>
           </b-nav-item>
           <!-- <b-nav-item to="/storys" class="mb-3">
             <b-icon icon="card-heading" aria-hidden="true"></b-icon>
-            <span class="d-none d-lg-inline ml-2">{{ $t('navigation.topStories') }}</span>
+            <span class="ml-2">{{ $t('navigation.topStories') }}</span>
           </b-nav-item> -->
           <!-- <b-nav-item to="/addresses" class="mb-3">
             <b-icon icon="bookmark" aria-hidden="true"></b-icon>
-            <span class="d-none d-lg-inline ml-2">{{ $t('navigation.adresses') }}</span>
+            <span class="ml-2">{{ $t('navigation.adresses') }}</span>
           </b-nav-item> -->
 
           <b-nav-item to="/send" class="mb-3">
             <b-icon icon="arrow-left-right" aria-hidden="true"></b-icon>
-            <span class="d-none d-lg-inline ml-2">{{ $t('navigation.send') }}</span>
+            <span class="ml-2">{{ $t('navigation.send') }}</span>
           </b-nav-item>
           <b-nav-item to="/transactions" class="mb-3">
             <b-icon icon="layout-text-sidebar-reverse" aria-hidden="true"></b-icon>
-            <span class="d-none d-lg-inline ml-2">{{ $t('navigation.transactions') }}</span>
+            <span class="ml-2">{{ $t('navigation.transactions') }}</span>
           </b-nav-item>
           <!-- <b-nav-item to="/profile" class="mb-3 HIDE_FOR_WORK_IN_PROCESS">
             <b-icon icon="person" aria-hidden="true"></b-icon>
-            <span class="d-none d-lg-inline ml-2">{{ $t('navigation.profile') }}</span>
+            <span class="ml-2">{{ $t('navigation.profile') }}</span>
           </b-nav-item> -->
           <b-nav-item to="/community" class="mb-3">
             <b-icon icon="people" aria-hidden="true"></b-icon>
-            <span class="d-none d-lg-inline ml-2">{{ $t('navigation.members') }}</span>
+            <span class="ml-2">{{ $t('navigation.members') }}</span>
           </b-nav-item>
         </b-nav>
         <hr />
         <b-nav vertical class="w-100">
           <b-nav-item to="/information" class="mb-3">
             <b-icon icon="info" aria-hidden="true"></b-icon>
-            <span class="d-none d-lg-inline ml-2">{{ $t('navigation.info') }}</span>
+            <span class="ml-2">{{ $t('navigation.info') }}</span>
           </b-nav-item>
           <!-- <b-nav-item
             @click="
@@ -48,7 +48,7 @@
             class="mb-3 HIDE_FOR_WORK_IN_PROCESS"
           >
             <b-icon :icon="lightmode ? 'toggle-on' : 'toggle-off'" aria-hidden="true"></b-icon>
-            <span class="d-none d-lg-inline ml-2">{{ $t('navigation.lightmode') }}</span>
+            <span class="ml-2">{{ $t('navigation.lightmode') }}</span>
             <label for="checkbox" class="switch-label">
               <span v-if="lightmode">{{ $t('navigation.moon') }}</span>
               <span v-else>{{ $t('navigation.sun') }}</span>
@@ -56,15 +56,15 @@
           </b-nav-item> -->
           <b-nav-item to="/settings" class="mb-3">
             <b-icon icon="gear" aria-hidden="true"></b-icon>
-            <span class="d-none d-lg-inline ml-2">{{ $t('navigation.settings') }}</span>
+            <span class="ml-2">{{ $t('navigation.settings') }}</span>
           </b-nav-item>
           <b-nav-item class="mb-3" v-if="$store.state.isAdmin" @click="$emit('admin')">
             <b-icon icon="shield-check" aria-hidden="true"></b-icon>
-            <span class="d-none d-lg-inline ml-2">{{ $t('navigation.admin_area') }}</span>
+            <span class="ml-2">{{ $t('navigation.admin_area') }}</span>
           </b-nav-item>
           <b-nav-item class="mb-3" @click="$emit('logout')">
             <b-icon icon="power" aria-hidden="true"></b-icon>
-            <span class="d-none d-lg-inline ml-2">{{ $t('navigation.logout') }}</span>
+            <span class="ml-2">{{ $t('navigation.logout') }}</span>
           </b-nav-item>
           <b-nav-item
             class="mt-4 mb-3 d-block d-md-none d-lg-none"
diff --git a/frontend/src/components/MobileSidebar/MobileSidebar.vue b/frontend/src/components/MobileSidebar/MobileSidebar.vue
new file mode 100644
index 000000000..ec147c4dc
--- /dev/null
+++ b/frontend/src/components/MobileSidebar/MobileSidebar.vue
@@ -0,0 +1,19 @@
+<template>
+  <div>
+    <b-sidebar id="sidebar-1" no-header bg-variant="white" :backdrop="true">
+      <div class="px-3 py-2">
+        <sidebar />
+      </div>
+    </b-sidebar>
+  </div>
+</template>
+<script>
+import Sidebar from '@/components/Menu/Sidebar.vue'
+
+export default {
+  name: 'MobileSidebar',
+  components: {
+    Sidebar,
+  },
+}
+</script>
diff --git a/frontend/src/layouts/DashboardLayout.vue b/frontend/src/layouts/DashboardLayout.vue
index 0f996ba13..1f249c928 100755
--- a/frontend/src/layouts/DashboardLayout.vue
+++ b/frontend/src/layouts/DashboardLayout.vue
@@ -4,20 +4,14 @@
       <skeleton-overview />
     </div>
     <div v-else>
-      <!--menu mobil hamburger button-->
-      <div class="d-block d-lg-none d-md-none d-sm-block fixed-bottom h-15 width70 zindex1000">
-        {{ hamburger }}
-        <b-button v-if="hamburger" @click="toogleMobilMenu">
-          <span class="navbar-toggler-icon"></span>
-        </b-button>
-      </div>
       <!-- navbar -->
       <b-row>
         <b-col>
           <navbar class="main-navbar" :balance="balance"></navbar>
         </b-col>
       </b-row>
-      <div ref="sideMenuRow" class="d-none d-lg-none d-md-none zindex1000">
+      <mobile-sidebar />
+      <!-- <div ref="sideMenuRow" class="d-none d-lg-none d-md-none zindex1000">
         <sidebar
           class="main-sidebar"
           @admin="admin"
@@ -25,10 +19,10 @@
           @modeToggle="modeToggle"
           @toogleMobilMenu="toogleMobilMenu"
         />
-      </div>
+      </div> -->
       <b-row fluid class="d-flex">
         <!-- Sidebar left -->
-        <b-col cols="2" class="d-none d-lg-block d-md-block">
+        <b-col cols="2" class="d-none d-lg-block">
           <sidebar
             class="main-sidebar"
             @admin="admin"
@@ -101,6 +95,7 @@ import RightSide from '@/layouts/templates/RightSide.vue'
 import SkeletonOverview from '@/components/skeleton/Overview.vue'
 import Navbar from '@/components/Menu/Navbar.vue'
 import Sidebar from '@/components/Menu/Sidebar.vue'
+import MobileSidebar from '@/components/MobileSidebar/MobileSidebar.vue'
 import SessionLogoutTimeout from '@/components/SessionLogoutTimeout.vue'
 import { transactionsQuery } from '@/graphql/queries'
 import { logout } from '@/graphql/mutations'
@@ -116,6 +111,7 @@ export default {
     RightSide,
     Navbar,
     Sidebar,
+    MobileSidebar,
     SessionLogoutTimeout,
     ContentFooter,
     FadeTransition,