From 1010997d3a194cbc1cabcdec00db713c3e42d1e9 Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Thu, 9 Dec 2021 09:56:21 +0100
Subject: [PATCH] sidebar and content fixed size, navbar variant tranparent

---
 frontend/src/components/Menu/Navbar.vue       | 57 +++++++++----------
 frontend/src/components/Menu/Sidebar.vue      | 43 +++++++-------
 .../src/views/Layout/DashboardLayout_gdd.vue  |  4 +-
 3 files changed, 53 insertions(+), 51 deletions(-)

diff --git a/frontend/src/components/Menu/Navbar.vue b/frontend/src/components/Menu/Navbar.vue
index d7e26f593..10e5ec858 100644
--- a/frontend/src/components/Menu/Navbar.vue
+++ b/frontend/src/components/Menu/Navbar.vue
@@ -1,38 +1,37 @@
 <template>
   <div>
-    <b-navbar toggleable="lg" type="dark" variant="info">
+    <b-navbar toggleable="lg" type="light" variant="trans">
       <div class="navbar-brand">
-        <router-link to="/overview">
-          <img :src="logo" class="navbar-brand-img" alt="..." />
-        </router-link>
+        <b-navbar-nav>
+          <b-nav-item to="/overview">
+            <img :src="logo" class="navbar-brand-img" alt="..." />
+          </b-nav-item>
+        </b-navbar-nav>
       </div>
       <b-nav-text center>{{ balance }} GDD</b-nav-text>
+
+      <div class="d-flex d-xl-none d-lg-none d-md-flex">
+        <b-collapse id="nav-collapse" is-nav>
+          <b-navbar-nav>
+            <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-nav-item to="/profile">{{ $t('site.navbar.my-profil') }}</b-nav-item>
+            <hr />
+            <b-nav-item class="mb-3" @click="$emit('get-elopage-link')">
+              {{ $t('members_area') }}
+              <b-badge v-if="!$store.state.hasElopage" pill variant="danger">!</b-badge>
+            </b-nav-item>
+            <b-nav-item v-if="$store.state.isAdmin" class="mb-3" @click="$emit('admin')">
+              {{ $t('admin_area') }}
+            </b-nav-item>
+            <b-nav-item class="mb-3" @click="$emit('logout')">
+              {{ $t('logout') }}
+            </b-nav-item>
+          </b-navbar-nav>
+        </b-collapse>
+      </div>
       <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
-
-      <b-collapse id="nav-collapse" is-nav>
-        <b-navbar-nav>
-          <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-nav-item to="/profile">{{ $t('site.navbar.my-profil') }}</b-nav-item>
-          <hr />
-          <b-nav-item to="#" class="mb-3" @click="$emit('get-elopage-link')">
-            {{ $t('members_area') }}
-            <b-badge v-if="!$store.state.hasElopage" pill variant="danger">!</b-badge>
-          </b-nav-item>
-          <b-nav-item v-if="$store.state.isAdmin" to="#" class="mb-3" @click="$emit('admin')">
-            {{ $t('admin_area') }}
-          </b-nav-item>
-          <b-nav-item class="mb-3" @click="$emit('logout')">
-            {{ $t('logout') }}
-          </b-nav-item>
-        </b-navbar-nav>
-
-        <!-- Right aligned nav items -->
-        <b-navbar-nav class="ml-auto">
-          <b-nav-item to="/profile" right>{{ $store.state.email }}</b-nav-item>
-        </b-navbar-nav>
-      </b-collapse>
     </b-navbar>
   </div>
 </template>
diff --git a/frontend/src/components/Menu/Sidebar.vue b/frontend/src/components/Menu/Sidebar.vue
index d1409a681..1072c6709 100644
--- a/frontend/src/components/Menu/Sidebar.vue
+++ b/frontend/src/components/Menu/Sidebar.vue
@@ -1,26 +1,29 @@
 <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>{{ $t('overview') }}</b-nav-item>
-            <b-nav-item to="/send" class="mb-3">{{ $t('send') }}</b-nav-item>
-            <b-nav-item to="/transactions" class="mb-3">{{ $t('transactions') }}</b-nav-item>
-            <b-nav-item to="/profile" class="mb-3" disabled>{{ $t('profile') }}</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" @click="$emit('admin')">{{ $t('admin_area') }}</b-nav-item>
-            <b-nav-item class="mb-3" @click="$emit('logout')">{{ $t('logout') }}</b-nav-item>
-          </b-nav>
-        </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>{{ $t('overview') }}</b-nav-item>
+          <b-nav-item to="/send" class="mb-3">{{ $t('send') }}</b-nav-item>
+          <b-nav-item to="/transactions" class="mb-3">{{ $t('transactions') }}</b-nav-item>
+          <b-nav-item to="/profile" class="mb-3">
+            {{ $t('site.navbar.my-profil') }}
+          </b-nav-item>
+        </b-nav>
+        <hr />
+        <b-nav vertical class="w-100">
+          <b-nav-item class="mb-3" @click="$emit('get-elopage-link')">
+            {{ $t('members_area') }}
+            <b-badge v-if="!$store.state.hasElopage" pill variant="danger">!</b-badge>
+          </b-nav-item>
+          <b-nav-item class="mb-3" v-if="$store.state.isAdmin" @click="$emit('admin')">
+            {{ $t('admin_area') }}
+          </b-nav-item>
+          <b-nav-item class="mb-3" @click="$emit('logout')">{{ $t('logout') }}</b-nav-item>
+        </b-nav>
       </div>
- 
+    </div>
   </div>
 </template>
 <script>
diff --git a/frontend/src/views/Layout/DashboardLayout_gdd.vue b/frontend/src/views/Layout/DashboardLayout_gdd.vue
index 80a58432b..d9ec8de24 100755
--- a/frontend/src/views/Layout/DashboardLayout_gdd.vue
+++ b/frontend/src/views/Layout/DashboardLayout_gdd.vue
@@ -1,12 +1,12 @@
 <template>
   <div>
     <navbar :balance="balance" @get-elopage-link="getElopageLink" @admin="admin" @logout="logout" />
-    <div style="display: inline-flex">
+    <div style="display: inline-flex; width: 100%">
       <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" @logout="logout" />
       </div>
 
-      <div>
+      <div class="ml-2 mr-2" style="width: 100%">
         <div>
           <fade-transition :duration="200" origin="center top" mode="out-in">
             <router-view