From 8b9d3270efb1e4713ac209323a7afc4c6683224f Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Thu, 7 Jul 2022 06:47:50 +0200
Subject: [PATCH] toogle mobil menu show

---
 .../src/assets/scss/gradido-template.scss     | 12 ++++++++
 frontend/src/components/Menu/SidebarNew.vue   | 29 +++++++++++++++++--
 frontend/src/layouts/DashboardLayout.vue      | 29 ++++++++++++-------
 frontend/src/locales/de.json                  |  5 ++++
 frontend/src/locales/en.json                  |  5 ++++
 5 files changed, 68 insertions(+), 12 deletions(-)

diff --git a/frontend/src/assets/scss/gradido-template.scss b/frontend/src/assets/scss/gradido-template.scss
index 32ed68349..0dba0513a 100644
--- a/frontend/src/assets/scss/gradido-template.scss
+++ b/frontend/src/assets/scss/gradido-template.scss
@@ -7,6 +7,14 @@ body {
   cursor: pointer;
 }
 
+.bg-default {
+  background-color: rgba(245 245 245 / 75%) !important;
+}
+
+.shadow-default {
+  box-shadow: rgb(0 0 0 / 14%) 0 24px 80px;
+}
+
 .c-grey {
   color: #383838 !important;
 }
@@ -209,6 +217,10 @@ a:hover,
   width: 96%;
 }
 
+.gradido-border-radius {
+  border-radius: 26px;
+}
+
 .gradido-no-border-radius {
   border-radius: 0;
 }
diff --git a/frontend/src/components/Menu/SidebarNew.vue b/frontend/src/components/Menu/SidebarNew.vue
index 9edb30f4c..6d2fe15da 100644
--- a/frontend/src/components/Menu/SidebarNew.vue
+++ b/frontend/src/components/Menu/SidebarNew.vue
@@ -1,6 +1,6 @@
 <template>
   <div id="component-sidebar">
-    <div class="pl-lg-3">
+    <div class="pl-lg-1 gradido-border-radius bg-white shadow-default pt-2 mt-4">
       <p></p>
       <div class="mb-6">
         <b-nav vertical class="w-200">
@@ -8,6 +8,15 @@
             <b-icon icon="house" aria-hidden="true"></b-icon>
             <span class="d-none d-lg-inline ml-2">{{ $t('navigation.overview') }}</span>
           </b-nav-item>
+          <b-nav-item to="#" class="mb-3">
+            <b-icon icon="card-heading" aria-hidden="true"></b-icon>
+            <span class="d-none d-lg-inline ml-2">{{ $t('navigation.top_stories') }}</span>
+          </b-nav-item>
+          <b-nav-item to="#" class="mb-3">
+            <b-icon icon="bookmark" aria-hidden="true"></b-icon>
+            <span class="d-none d-lg-inline ml-2">{{ $t('navigation.favourites') }}</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>
@@ -17,12 +26,24 @@
             <span class="d-none d-lg-inline ml-2">{{ $t('navigation.transactions') }}</span>
           </b-nav-item>
           <b-nav-item to="/profile" class="mb-3">
-            <b-icon icon="gear" aria-hidden="true"></b-icon>
+            <b-icon icon="person" aria-hidden="true"></b-icon>
             <span class="d-none d-lg-inline ml-2">{{ $t('navigation.profile') }}</span>
           </b-nav-item>
+          <b-nav-item to="#" 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>
+          </b-nav-item>
         </b-nav>
         <hr />
         <b-nav vertical class="w-100">
+          <b-nav-item to="#" class="mb-3">
+            <b-icon icon="toggle-off" aria-hidden="true"></b-icon>
+            <span class="d-none d-lg-inline ml-2">{{ $t('navigation.lightmode') }}</span>
+          </b-nav-item>
+          <b-nav-item to="#" 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>
+          </b-nav-item>
           <b-nav-item class="mb-3" :href="elopageUri" target="_blank">
             <b-icon icon="link45deg" aria-hidden="true"></b-icon>
             <span class="d-none d-lg-inline ml-2 mr-2">{{ $t('navigation.members_area') }}</span>
@@ -59,4 +80,8 @@ export default {
 #component-sidebar .active {
   font-weight: bold;
 }
+#component-sidebar {
+  min-width: 53px;
+  max-width: 200px;
+}
 </style>
diff --git a/frontend/src/layouts/DashboardLayout.vue b/frontend/src/layouts/DashboardLayout.vue
index d730529cb..1b9a5bfaa 100755
--- a/frontend/src/layouts/DashboardLayout.vue
+++ b/frontend/src/layouts/DashboardLayout.vue
@@ -1,6 +1,6 @@
 <template>
-  <div>
-    <div class="position-absolute w-100 h-100">
+  <div class="bg-default">
+    <div class="position-absolute w-100 h-100 bg-default">
       <!--<navbar
         class="main-navbar"
         :balance="balance"
@@ -14,26 +14,27 @@
       <navbar-new class="main-navbar" :balance="balance"></navbar-new>
 
       <!-- menu mobil -->
-      <div
-        class="d-block d-lg-none d-md-none d-sm-block fixed-bottom h-15 width70 zindex10 bg-default"
-      >
-        <b-button>
-          <span class="navbar-toggler-icon"></span>
+      <div class="d-block d-lg-none d-md-none d-sm-block fixed-bottom h-15 width70 zindex1000">
+        <b-button @click="toogleMobilMenu">
+          <span v-if="hamburger" class="navbar-toggler-icon"></span>
+          <span v-else><b-icon icon="x-square" aria-hidden="true"></b-icon></span>
         </b-button>
       </div>
-      <b-container fluid class="bg-primary pl-0 pl-lg-0 pl-md-2">
+      <b-container fluid class="pl-0 pl-lg-0 pl-md-2">
         <b-row>
           <b-col
+            cols="1"
             lg="2"
             md="1"
-            class="d-none d-lg-block d-md-block position-absolute h-100 bg-default"
+            ref="sideMenu"
+            class="d-none d-lg-block d-md-block position-absolute h-100 zindex10"
           >
             <!-- <sidebar
               class="main-sidebar"
               :elopageUri="elopageUri"
               @admin="admin"
               @logout="logout"
-            />-->
+            /> -->
             <sidebar-new
               class="main-sidebar"
               :elopageUri="elopageUri"
@@ -121,6 +122,7 @@ export default {
       pending: true,
       visible: false,
       tunneledEmail: null,
+      hamburger: true,
     }
   },
   provide() {
@@ -185,6 +187,10 @@ export default {
     setTunneledEmail(email) {
       this.tunneledEmail = email
     },
+    toogleMobilMenu() {
+      this.$refs.sideMenu.classList.toggle('d-none')
+      this.hamburger ? (this.hamburger = false) : (this.hamburger = true)
+    },
   },
   computed: {
     elopageUri() {
@@ -220,4 +226,7 @@ export default {
 .width70 {
   width: 70px;
 }
+.navbar-toggler-icon {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(4, 112, 6, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
+}
 </style>
diff --git a/frontend/src/locales/de.json b/frontend/src/locales/de.json
index 6be44f30d..6c7c52f77 100644
--- a/frontend/src/locales/de.json
+++ b/frontend/src/locales/de.json
@@ -190,12 +190,17 @@
   },
   "navigation": {
     "admin_area": "Adminbereich",
+    "favourites": "Favoriten",
+    "lightmode": "Lightmode",
     "logout": "Abmelden",
+    "members": "Mitglieder",
     "members_area": "Mitgliederbereich",
     "overview": "Übersicht",
     "profile": "Mein Profil",
     "send": "Senden",
+    "settings": "Einstellung",
     "support": "Support",
+    "top_stories": "Top Stories",
     "transactions": "Transaktionen"
   },
   "qrCode": "QR Code",
diff --git a/frontend/src/locales/en.json b/frontend/src/locales/en.json
index 5a89bb7bb..d9c6fb48f 100644
--- a/frontend/src/locales/en.json
+++ b/frontend/src/locales/en.json
@@ -190,12 +190,17 @@
   },
   "navigation": {
     "admin_area": "Admin Area",
+    "favourites": "Favourites",
+    "lightmode": "Lightmode",
     "logout": "Logout",
+    "members": "Members",
     "members_area": "Members area",
     "overview": "Overview",
     "profile": "My profile",
     "send": "Send",
+    "settings": "Settings",
     "support": "Support",
+    "top_stories": "Top Stories",
     "transactions": "Transactions"
   },
   "qrCode": "QR Code",