From 004c76d82ea8c4b97dfa9dcce510430659f90fb3 Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Tue, 5 Jul 2022 09:01:07 +0200
Subject: [PATCH] first step, new sidebar menu

---
 frontend/src/components/Menu/SidebarNew.vue | 62 +++++++++++++++++++++
 frontend/src/layouts/DashboardLayout.vue    | 44 ++++++++++-----
 2 files changed, 93 insertions(+), 13 deletions(-)
 create mode 100644 frontend/src/components/Menu/SidebarNew.vue

diff --git a/frontend/src/components/Menu/SidebarNew.vue b/frontend/src/components/Menu/SidebarNew.vue
new file mode 100644
index 000000000..9edb30f4c
--- /dev/null
+++ b/frontend/src/components/Menu/SidebarNew.vue
@@ -0,0 +1,62 @@
+<template>
+  <div id="component-sidebar">
+    <div class="pl-lg-3">
+      <p></p>
+      <div class="mb-6">
+        <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>
+          </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>
+          </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>
+          </b-nav-item>
+          <b-nav-item to="/profile" class="mb-3">
+            <b-icon icon="gear" aria-hidden="true"></b-icon>
+            <span class="d-none d-lg-inline ml-2">{{ $t('navigation.profile') }}</span>
+          </b-nav-item>
+        </b-nav>
+        <hr />
+        <b-nav vertical class="w-100">
+          <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>
+            <b-badge v-if="!$store.state.hasElopage" pill variant="danger">
+              {{ $t('math.exclaim') }}
+            </b-badge>
+          </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>
+          </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>
+          </b-nav-item>
+        </b-nav>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: 'sidebar',
+  props: {
+    elopageUri: {
+      type: String,
+      required: false,
+    },
+  },
+}
+</script>
+<style>
+.component-navbar .active,
+#component-sidebar .active {
+  font-weight: bold;
+}
+</style>
diff --git a/frontend/src/layouts/DashboardLayout.vue b/frontend/src/layouts/DashboardLayout.vue
index cc1a38c8b..c387e874d 100755
--- a/frontend/src/layouts/DashboardLayout.vue
+++ b/frontend/src/layouts/DashboardLayout.vue
@@ -12,11 +12,8 @@
         @logout="logout"
       />-->
       <navbar-new class="main-navbar" :balance="balance"></navbar-new>
-      <b-container
-        class="d-none d-lg-none d-md-block d-sm-none position-absolute h-100 width70 zindex10 bg-default"
-      >
-        <!-- menu mobil -->
-      </b-container>
+
+      <!-- menu mobil -->
       <div
         class="d-block d-lg-none d-md-none d-sm-block fixed-bottom h-15 width70 zindex10 bg-default"
       >
@@ -24,23 +21,42 @@
           <span class="navbar-toggler-icon"></span>
         </b-button>
       </div>
-      <b-container fluid class="bg-primary pl-0 pl-lg-0 pl-md-6">
+      <b-container fluid class="bg-primary pl-0 pl-lg-0 pl-md-2">
         <b-row>
-          <b-col lg="2" class="d-none d-lg-block position-absolute h-100 bg-default">
-            <sidebar
+          <b-col
+            lg="2"
+            md="1"
+            class="d-none d-lg-block d-md-block position-absolute h-100 bg-default"
+          >
+            <!-- <sidebar
+              class="main-sidebar"
+              :elopageUri="elopageUri"
+              @admin="admin"
+              @logout="logout"
+            />-->
+            <sidebar-new
               class="main-sidebar"
               :elopageUri="elopageUri"
               @admin="admin"
               @logout="logout"
             />
           </b-col>
-          <b-col cols="12" lg="7" offset="0" offset-lg="2" order-1 class="bg-warning navbar">
+          <b-col
+            cols="12"
+            lg="7"
+            md="11"
+            offset="0"
+            offset-lg="2"
+            offset-md="1"
+            order-1
+            class="bg-warning navbar"
+          >
             <!-- content header -->
           </b-col>
-          <b-col cols="12" lg="3" offset="0" offset-lg="0" class="bg-info navbar" order-2>
+          <b-col cols="12" lg="3" md="11" offset="0" offset-lg="0" offset-md="1" class="bg-info navbar" order-2>
             <!--rechtebox -->
           </b-col>
-          <b-col cols="12" lg="7" offset="0" offset-lg="2" order-1>
+          <b-col cols="12" lg="7" md="11" offset="0" offset-lg="2" offset-md="1" order-1>
             <div class="main-content">
               <fade-transition :duration="200" origin="center top" mode="out-in">
                 <router-view
@@ -67,7 +83,8 @@
 <script>
 // import Navbar from '@/components/Menu/Navbar.vue'
 import NavbarNew from '@/components/Menu/NavbarNew.vue'
-import Sidebar from '@/components/Menu/Sidebar.vue'
+// import Sidebar from '@/components/Menu/Sidebar.vue'
+import SidebarNew from '@/components/Menu/SidebarNew.vue'
 import SessionLogoutTimeout from '@/components/SessionLogoutTimeout.vue'
 import { logout, transactionsQuery } from '@/graphql/queries'
 import ContentFooter from '@/components/ContentFooter.vue'
@@ -79,7 +96,8 @@ export default {
   components: {
     // Navbar,
     NavbarNew,
-    Sidebar,
+    // Sidebar,
+    SidebarNew,
     SessionLogoutTimeout,
     ContentFooter,
     FadeTransition,