From 5203644283e036636c5df189e3d982e060fc4b57 Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Tue, 17 Jan 2023 07:36:34 +0100
Subject: [PATCH] mobil navbar fix and transparent

---
 frontend/src/components/Menu/Navbar.vue  | 78 ++++++++++++++----------
 frontend/src/layouts/DashboardLayout.vue | 14 ++++-
 2 files changed, 56 insertions(+), 36 deletions(-)

diff --git a/frontend/src/components/Menu/Navbar.vue b/frontend/src/components/Menu/Navbar.vue
index b3c750aac..621ebaca5 100644
--- a/frontend/src/components/Menu/Navbar.vue
+++ b/frontend/src/components/Menu/Navbar.vue
@@ -1,45 +1,47 @@
 <template>
-  <div class="navbar-component position-sticky">
-    <b-navbar toggleable="lg" class="pr-4">
-      <b-navbar-brand>
-        <b-img
-          class="imgLogo mt-lg--2 mt-3 mb-3 d-none d-lg-block zindex10"
-          :src="logo"
-          width=""
-          alt="..."
-        />
-        <div v-b-toggle.sidebar-mobile variant="link" class="d-block d-lg-none">
-          <span class="navbar-toggler-icon h2"></span>
-        </div>
-      </b-navbar-brand>
-
-      <b-img class="sheet-img position-absolute zindex-1" :src="sheet"></b-img>
-
-      <b-navbar-nav class="ml-auto" right>
-        <div class="d-flex align-items-center">
-          <div class="mr-3">
-            <avatar
-              :username="username.username"
-              :initials="username.initials"
-              :color="'#fff'"
-              :size="61"
-            ></avatar>
+  <div class="navbar-component">
+    <div class="navbar-element">
+      <b-navbar toggleable="lg" class="pr-4">
+        <b-navbar-brand>
+          <b-img
+            class="imgLogo mt-lg--2 mt-3 mb-3 d-none d-lg-block zindex10"
+            :src="logo"
+            width=""
+            alt="..."
+          />
+          <div v-b-toggle.sidebar-mobile variant="link" class="d-block d-lg-none">
+            <span class="navbar-toggler-icon h2"></span>
           </div>
-          <div>
-            <div data-test="navbar-item-username">{{ username.username }}</div>
+        </b-navbar-brand>
 
-            <div class="text-right" data-test="navbar-item-email">
-              {{ $store.state.email }}
+        <b-img class="sheet-img position-absolute zindex-1" :src="sheet"></b-img>
+
+        <b-navbar-nav class="ml-auto" right>
+          <div class="d-flex align-items-center">
+            <div class="mr-3">
+              <avatar
+                :username="username.username"
+                :initials="username.initials"
+                :color="'#fff'"
+                :size="61"
+              ></avatar>
+            </div>
+            <div>
+              <div data-test="navbar-item-username">{{ username.username }}</div>
+
+              <div class="text-right" data-test="navbar-item-email">
+                {{ $store.state.email }}
+              </div>
             </div>
           </div>
-        </div>
-      </b-navbar-nav>
-    </b-navbar>
-    <!-- <div class="alertBox">
+        </b-navbar-nav>
+      </b-navbar>
+      <!-- <div class="alertBox">
       <b-alert show dismissible variant="light" class="nav-alert text-dark">
         <small>{{ $t('1000thanks') }}</small>
       </b-alert>
     </div> -->
+    </div>
   </div>
 </template>
 
@@ -72,6 +74,10 @@ export default {
 </script>
 
 <style lang="scss">
+.navbar-element {
+  position: sticky;
+}
+
 .auth-header {
   font-family: 'Open Sans', sans-serif !important;
   height: 150px;
@@ -117,6 +123,12 @@ button.navbar-toggler > span.navbar-toggler-icon {
   }
 }
 @media screen and (max-width: 450px) {
+  .navbar-element {
+    z-index: 1000;
+    position: fixed;
+    width: 100%;
+    background-color: #f5f5f5e6;
+  }
   .sheet-img {
     left: 27%;
     max-width: 61%;
diff --git a/frontend/src/layouts/DashboardLayout.vue b/frontend/src/layouts/DashboardLayout.vue
index ff72b8e7f..ae1e0b75e 100755
--- a/frontend/src/layouts/DashboardLayout.vue
+++ b/frontend/src/layouts/DashboardLayout.vue
@@ -3,7 +3,7 @@
     <div v-if="skeleton">
       <skeleton-overview />
     </div>
-    <div v-else>
+    <div v-else class="mx--3 mx-lg-0">
       <!-- navbar -->
       <b-row>
         <b-col>
@@ -13,7 +13,7 @@
       <mobile-sidebar @admin="admin" @logout="logout" />
 
       <!-- Breadcrumb -->
-      <b-row>
+      <b-row class="breadcrumb">
         <b-col cols="10" offset-lg="2">
           <breadcrumb />
         </b-col>
@@ -336,7 +336,9 @@ export default {
 }
 </script>
 <style>
-/* frontend/public/img/svg/Gradido_Blaetter_Mainpage.svg */
+.breadcrumb {
+  background-color: transparent;
+}
 .main-page {
   background-attachment: fixed;
   background-position: center;
@@ -369,4 +371,10 @@ export default {
 .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");
 }
+
+@media screen and (max-width: 450px) {
+  .breadcrumb {
+    padding-top: 60px;
+  }
+}
 </style>