From 47ee6bfe886b48f19059dc7400beda010a0fb76b Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Fri, 13 May 2022 10:17:21 +0200
Subject: [PATCH] rename Header.vue to Navbar.vue

---
 .../Auth/{Header.vue => Navbar.vue}           | 60 +++++--------------
 1 file changed, 16 insertions(+), 44 deletions(-)
 rename frontend/src/components/Auth/{Header.vue => Navbar.vue} (53%)

diff --git a/frontend/src/components/Auth/Header.vue b/frontend/src/components/Auth/Navbar.vue
similarity index 53%
rename from frontend/src/components/Auth/Header.vue
rename to frontend/src/components/Auth/Navbar.vue
index 6d184462c..a26230455 100644
--- a/frontend/src/components/Auth/Header.vue
+++ b/frontend/src/components/Auth/Navbar.vue
@@ -1,16 +1,20 @@
 <template>
-  <div class="auth-header">
-    <b-navbar toggleable="lg" class="p-0 pr-4">
+  <div class="auth-header position-sticky">
+    <b-navbar toggleable="lg" class="pr-4">
       <b-img
-        class="imgLogoBack"
+        class="imgLogo position-absolute ml--3 mt--3 p-2 zindex1000"
+        :src="logo"
+        width="200"
+        alt="..."
+      />
+      <b-img
+        class="imgLogoBack mt--3 ml--3"
         src="img/template/gradido_background_header.png"
+        width="230"
         alt="start background image"
       ></b-img>
-      <div class="p-3">
-        <b-img class="imgLogo" :src="logo" alt="..." />
-      </div>
-      <b-img class="header-img d-block d-lg-none" :src="sheet"></b-img>
-      <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
+      <b-img class="sheet-img position-absolute d-block d-lg-none zindex1000" :src="sheet"></b-img>
+      <b-navbar-toggle target="nav-collapse" class="zindex1000"></b-navbar-toggle>
 
       <b-collapse id="nav-collapse" is-nav class="mt-5 mt-lg-0">
         <b-navbar-nav class="ml-auto" right>
@@ -18,7 +22,7 @@
             {{ $t('auth.navbar.overGradido') }}
           </b-nav-item>
           <b-nav-item class="ml-lg-5" to="/register">{{ $t('signup') }}</b-nav-item>
-          <span class="d-none d-lg-block mt-3">{{ $t('|') }}</span>
+          <span class="d-none d-lg-block mt-1">{{ $t('|') }}</span>
           <b-nav-item to="/login">{{ $t('signin') }}</b-nav-item>
         </b-navbar-nav>
       </b-collapse>
@@ -27,7 +31,7 @@
 </template>
 <script>
 export default {
-  name: 'AuthHeader',
+  name: 'AuthNavbar',
   data() {
     return {
       logo: 'img/brand/green.png',
@@ -37,53 +41,21 @@ export default {
 }
 </script>
 <style lang="scss">
-.imgLogoBack,
-.imgLogo {
-  position: absolute;
-}
-.imgLogo {
-  z-index: 1000;
-  width: 200px;
-  max-width: 280px;
-  top: 19px;
-  left: 0px;
-}
-
-.imgLogoBack {
-  width: 230px;
-  max-width: 300px;
-  height: auto;
-  top: 0px;
-}
 .auth-header {
   font-family: 'Open Sans', sans-serif !important;
-  position: sticky;
-}
-.navbar-collapse {
-  margin-left: 20px;
-}
-.navbar-collapse li {
-  padding-top: 10px;
-  padding-bottom: 10px;
 }
 
-.header-img {
-  position: absolute;
+.sheet-img {
   top: -11px;
   right: 7%;
   max-width: 64%;
 }
 
 @media screen and (max-width: 450px) {
-  .header-img {
-    position: absolute;
+  .sheet-img {
     top: -15px;
     right: 0%;
     max-width: 61%;
   }
 }
-
-.navbar-toggler {
-  z-index: 1;
-}
 </style>