new navbar, first step

frontend/src/assets/scss/gradido-template.scss

@@ -108,6 +108,11 @@ a:hover,
   border-bottom-right-radius: 17px !important;
 }
 
+.alert {
+  border-radius: 26px;
+  box-shadow: rgb(0 0 0 / 14%) 0 24px 80px;
+}
+
 .alert-success {
   background-color: #d4edda;
   border-color: #c3e6cb;

frontend/src/components/Menu/NavbarNew.vue

@@ -0,0 +1,124 @@
+<template>
+  <div class="auth-header position-sticky">
+    <b-navbar toggleable="lg" class="pr-4">
+      <b-navbar-brand>
+        <b-img
+          class="imgLogo position-absolute ml--3 mt-lg--2 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>
+      </b-navbar-brand>
+      <b-img class="sheet-img position-absolute zindex1000" :src="sheet"></b-img>
+
+      <b-collapse id="nav-collapse" is-nav class="ml-5">
+        <b-navbar-nav class="ml-auto" right>
+          <div class="mb-2">
+            <router-link to="/profile">
+              <div>
+                <div>
+                  <b-avatar
+                    button
+                    variant="primary"
+                    :text="avatarShortName"
+                    class="align-baseline"
+                  ></b-avatar>
+                  {{ avatarLongName }}
+
+                  <div class="text-right">
+                    <small>{{ balance | GDD }}</small>
+                  </div>
+                </div>
+              </div>
+            </router-link>
+          </div>
+        </b-navbar-nav>
+      </b-collapse>
+    </b-navbar>
+    <div class="alertBox">
+      <b-alert show dismissible variant="light" class="nav-alert text-dark">Light Alert</b-alert>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'AuthNavbar',
+  props: {
+    balance: { type: Number, required: true },
+  },
+  data() {
+    return {
+      logo: '/img/brand/green.png',
+      sheet: '/img/template/Blaetter.png',
+    }
+  },
+  computed: {
+    avatarShortName() {
+      return this.$store.state.firstName[0] + this.$store.state.lastName[0]
+    },
+    avatarLongName() {
+      return `${this.$store.state.firstName} ${this.$store.state.lastName}`
+    },
+  },
+}
+</script>
+
+<style lang="scss">
+.authNavbar > .nav-link {
+  color: #383838 !important;
+}
+
+.navbar-toggler {
+  font-size: 2.25rem;
+}
+
+.authNavbar > .router-link-exact-active {
+  color: #0e79bc !important;
+}
+
+button.navbar-toggler > span.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");
+}
+
+.auth-header {
+  font-family: 'Open Sans', sans-serif !important;
+}
+
+.sheet-img {
+  top: -11px;
+  left: 50%;
+  max-width: 64%;
+}
+.alertBox {
+  left: 20%;
+  right: 20%;
+  position: absolute;
+  z-index: 1000;
+  top: 25px;
+}
+@media screen and (max-width: 1170px) {
+  .sheet-img {
+    left: 40%;
+  }
+  .alertBox {
+    position: static;
+    margin-left: 5%;
+    margin-right: 5%;
+    z-index: 0;
+  }
+}
+@media screen and (max-width: 450px) {
+  .sheet-img {
+    top: -15px;
+    left: 10%;
+    max-width: 61%;
+  }
+}
+</style>

frontend/src/layouts/DashboardLayout.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
-    <div class="position-absolute w-100 h-100 bg-blueviolet">
-      <navbar
+    <div class="position-absolute w-100 h-100">
+      <!--<navbar
         class="main-navbar"
         :balance="balance"
         :visible="visible"
@@ -10,8 +10,8 @@
         @set-visible="setVisible"
         @admin="admin"
         @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"
       >
@@ -65,7 +65,8 @@
   </div>
 </template>
 <script>
-import Navbar from '@/components/Menu/Navbar.vue'
+// import Navbar from '@/components/Menu/Navbar.vue'
+import NavbarNew from '@/components/Menu/NavbarNew.vue'
 import Sidebar from '@/components/Menu/Sidebar.vue'
 import SessionLogoutTimeout from '@/components/SessionLogoutTimeout.vue'
 import { logout, transactionsQuery } from '@/graphql/queries'
@@ -76,7 +77,8 @@ import CONFIG from '@/config'
 export default {
   name: 'DashboardLayout',
   components: {
-    Navbar,
+    // Navbar,
+    NavbarNew,
     Sidebar,
     SessionLogoutTimeout,
     ContentFooter,