From 139e537e944afd3f7ad085313dd50d6f62b7aee8 Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Wed, 8 Dec 2021 17:27:19 +0100
Subject: [PATCH] add components Navbar, Sidebar

---
 frontend/src/components/Menu/Navbar.vue       | 58 +++++++++++
 frontend/src/components/Menu/Sidebar.vue      | 30 ++++++
 .../src/views/Layout/DashboardLayout_gdd.vue  | 98 +++++--------------
 3 files changed, 112 insertions(+), 74 deletions(-)
 create mode 100644 frontend/src/components/Menu/Navbar.vue
 create mode 100644 frontend/src/components/Menu/Sidebar.vue

diff --git a/frontend/src/components/Menu/Navbar.vue b/frontend/src/components/Menu/Navbar.vue
new file mode 100644
index 000000000..b91d4763c
--- /dev/null
+++ b/frontend/src/components/Menu/Navbar.vue
@@ -0,0 +1,58 @@
+<template>
+  <div>
+    <b-navbar toggleable="lg" type="dark" variant="info">
+      <div class="navbar-brand">
+        <router-link to="/overview">
+          <img :src="logo" class="navbar-brand-img" alt="..." />
+        </router-link>
+      </div>
+      <b-nav-text center>{{ balance }} GDD</b-nav-text>
+      <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
+
+      <b-collapse id="nav-collapse" is-nav>
+        <b-navbar-nav class="d-none d-md-flex d-sm-flex">
+          <b-nav-item to="/overview">{{ $t('overview') }}</b-nav-item>
+          <b-nav-item to="/send">{{ $t('send') }}</b-nav-item>
+          <b-nav-item to="/transactions">{{ $t('transactions') }}</b-nav-item>
+          <hr />
+          <b-nav-item to="/overview" class="mb-3" active>Overview</b-nav-item>
+          <b-nav-item to="/send" class="mb-3">Link</b-nav-item>
+          <b-nav-item to="/transactions" class="mb-3">Another Link</b-nav-item>
+          <b-nav-item to="/profile" class="mb-3" disabled>Disabled</b-nav-item>
+        </b-navbar-nav>
+
+        <!-- Right aligned nav items -->
+        <b-navbar-nav class="ml-auto">
+          <b-nav-item-dropdown right>
+            <!-- Using 'button-content' slot -->
+            <template #button-content>
+              <em>
+                {{ $store.state.email }}
+              </em>
+            </template>
+            <b-dropdown-item to="/profile">{{ $t('site.navbar.my-profil') }}</b-dropdown-item>
+            <b-dropdown-item @click="this.$emit('get-elopage-link')" target="_blank">
+              {{ $t('members_area') }}
+            </b-dropdown-item>
+            <b-dropdown-item @click="this.$emit('admin')" target="_blank">
+              {{ $t('admin_area') }}
+            </b-dropdown-item>
+            <b-dropdown-item href="/#" @click="this.$emit('logout')">
+              {{ $t('logout') }}
+            </b-dropdown-item>
+          </b-nav-item-dropdown>
+        </b-navbar-nav>
+      </b-collapse>
+    </b-navbar>
+  </div>
+</template>
+<script>
+export default {
+  name: 'navbar',
+  data() {
+    return {
+      logo: 'img/brand/green.png',
+    }
+  },
+}
+</script>
diff --git a/frontend/src/components/Menu/Sidebar.vue b/frontend/src/components/Menu/Sidebar.vue
new file mode 100644
index 000000000..c7472218c
--- /dev/null
+++ b/frontend/src/components/Menu/Sidebar.vue
@@ -0,0 +1,30 @@
+<template>
+  <div>
+      
+   
+      <div class="px-3 py-2">
+        <p></p>
+        <div class="mb-6">
+          <b-nav vertical class="w-200">
+            <b-nav-item to="/overview" class="mb-3" active>Overview</b-nav-item>
+            <b-nav-item to="/send" class="mb-3">Link</b-nav-item>
+            <b-nav-item to="/transactions" class="mb-3">Another Link</b-nav-item>
+            <b-nav-item to="/profile" class="mb-3" disabled>Disabled</b-nav-item>
+          </b-nav>
+          <hr />
+          <b-nav vertical class="w-100">
+            <b-nav-item class="mb-3" active>Active</b-nav-item>
+            <b-nav-item class="mb-3">Link</b-nav-item>
+            <b-nav-item class="mb-3">Another Link</b-nav-item>
+            <b-nav-item class="mb-3" disabled>Disabled</b-nav-item>
+          </b-nav>
+        </div>
+      </div>
+ 
+  </div>
+</template>
+<script>
+export default {
+  name: 'sidebar',
+}
+</script>
diff --git a/frontend/src/views/Layout/DashboardLayout_gdd.vue b/frontend/src/views/Layout/DashboardLayout_gdd.vue
index 858c3a260..6340fc2b5 100755
--- a/frontend/src/views/Layout/DashboardLayout_gdd.vue
+++ b/frontend/src/views/Layout/DashboardLayout_gdd.vue
@@ -1,86 +1,34 @@
 <template>
   <div>
-    <b-navbar toggleable="lg" type="dark" variant="info">
-      <div class="navbar-brand" >
-        <router-link to="/overview" >
-        <img :src="logo" class="navbar-brand-img" alt="..." />
-        </router-link>
+    <navbar @get-elopage-link="getElopageLink" @admin="admin" />
+    <div style="display: inline-flex">
+      <div class="d-none d-sm-none d-md-none d-lg-flex shadow-lg" style="width: 300px">
+        <sidebar @get-elopage-link="getElopageLink" @admin="admin" />
       </div>
-      <b-nav-text center>{{ balance }} GDD</b-nav-text>
-      <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
 
-      <b-collapse id="nav-collapse" is-nav>
-        <b-navbar-nav class="d-none d-md-flex d-sm-flex">
-          <b-nav-item to="/overview">{{ $t('overview') }}</b-nav-item>
-          <b-nav-item to="/send">{{ $t('send') }}</b-nav-item>
-          <b-nav-item to="/transactions">{{ $t('transactions') }}</b-nav-item>
-        </b-navbar-nav>
-
-        <!-- Right aligned nav items -->
-        <b-navbar-nav class="ml-auto">
-          <b-nav-item-dropdown right>
-            <!-- Using 'button-content' slot -->
-            <template #button-content>
-              <em>
-                {{ $store.state.email }}
-              </em>
-            </template>
-            <b-dropdown-item to="/profile">{{ $t('site.navbar.my-profil') }}</b-dropdown-item>
-            <b-dropdown-item @click="getElopageLink" target="_blank">
-              {{ $t('members_area') }}
-            </b-dropdown-item>
-            <b-dropdown-item target="_blank" @click="admin">{{ $t('admin_area') }}</b-dropdown-item>
-            <b-dropdown-item href="/#" @click="logout">{{ $t('logout') }}</b-dropdown-item>
-          </b-nav-item-dropdown>
-        </b-navbar-nav>
-      </b-collapse>
-    </b-navbar>
-  <div style="display: inline-flex">
-      <div class="d-sm-none d-md-none d-lg-flex shadow-lg" style="width: 300px">
-        <b-sidebar id="sidebar-1" visible no-header-close bg-variant="false">
-          <div class="px-3 py-2">
-            <p></p>
-            <div class="mb-6">
-              <b-nav vertical class="w-200">
-                <b-nav-item to="/overview" class="mb-3" active>Overview</b-nav-item>
-                <b-nav-item to="/send" class="mb-3">Link</b-nav-item>
-                <b-nav-item to="/transactions" class="mb-3">Another Link</b-nav-item>
-                <b-nav-item to="/profile" class="mb-3" disabled>Disabled</b-nav-item>
-              </b-nav>
-              <hr />
-              <b-nav vertical class="w-100">
-                <b-nav-item class="mb-3" active>Active</b-nav-item>
-                <b-nav-item class="mb-3">Link</b-nav-item>
-                <b-nav-item class="mb-3">Another Link</b-nav-item>
-                <b-nav-item class="mb-3" disabled>Disabled</b-nav-item>
-              </b-nav>
-            </div>
-          </div>
-        </b-sidebar>
-      </div>
-     
+      <div>
         <div>
-          <div>
-            <fade-transition :duration="200" origin="center top" mode="out-in">
-              <router-view
-                ref="router-view"
-                :balance="balance"
-                :gdt-balance="GdtBalance"
-                :transactions="transactions"
-                :transactionCount="transactionCount"
-                :pending="pending"
-                @update-balance="updateBalance"
-                @update-transactions="updateTransactions"
-              ></router-view>
-            </fade-transition>
-          </div>
-          <content-footer v-if="!$route.meta.hideFooter"></content-footer>
+          <fade-transition :duration="200" origin="center top" mode="out-in">
+            <router-view
+              ref="router-view"
+              :balance="balance"
+              :gdt-balance="GdtBalance"
+              :transactions="transactions"
+              :transactionCount="transactionCount"
+              :pending="pending"
+              @update-balance="updateBalance"
+              @update-transactions="updateTransactions"
+            ></router-view>
+          </fade-transition>
         </div>
-  </div>
-    
+        <content-footer v-if="!$route.meta.hideFooter"></content-footer>
+      </div>
+    </div>
   </div>
 </template>
 <script>
+import Navbar from '../../components/Menu/Navbar.vue'
+import Sidebar from '../../components/Menu/Sidebar.vue'
 import { logout, transactionsQuery } from '../../graphql/queries'
 import ContentFooter from './ContentFooter.vue'
 import { FadeTransition } from 'vue2-transitions'
@@ -88,6 +36,8 @@ import CONFIG from '../../config'
 
 export default {
   components: {
+    Navbar,
+    Sidebar,
     ContentFooter,
     FadeTransition,
   },