fixing task 116

src/components/dashboard/Dashboard.vue

@@ -62,5 +62,7 @@
 </script>
 
 <style lang="scss" scoped>
+
+
   @import "../../sass/_variables.scss";
 </style>

src/components/layout/Layout.vue

@@ -1,6 +1,5 @@
 <template>
   <div class="layout" :class="classObject"  v-resize>
-    <div class="layout layout-fixed"></div>
     <navbar></navbar>
     <sidebar></sidebar>
 
@@ -70,20 +69,23 @@
   @import "~bootstrap/scss/functions";
   @import "~bootstrap/scss/variables";
 
-
   .layout {
     &-fixed {
-      .content-wrap {
-        padding-top: $sidebar-top;
+      .navbar{
+        position: fixed; top: 0; width: 100%; z-index: 1;
+      }
+
+      .sidebar{
+        position: fixed;
       }
     }
   }
 
-
-
   .content-wrap {
     margin-left: $content-wrap-ml;
     transition: margin-left 0.3s ease;
+    padding-right: $layout-padding-right;
+
 
     .pre-loader {
       position: absolute;
@@ -101,6 +103,7 @@
 
       .sidebar-hidden & {
         margin-left: 0;
+        padding-top: $content-mobile-wrap-sb-top;
       }
     }
   }

src/components/layout/navbar/Navbar.vue

@@ -14,7 +14,7 @@
       </div>
 
       <div class="navbar-text offset-md-1 col-md-7 d-none d-lg-flex align-items-center justify-content-center">
-       {{'navbar.messageUs' | translate}}&nbsp;<a href="mailto:[email protected]">[email protected]</a>
+        {{'navbar.messageUs' | translate}}&nbsp;<a href="mailto:[email protected]">[email protected]</a>
       </div>
 
       <div class="col nav-item dropdown navbar-dropdown d-flex align-items-center justify-content-center" v-dropdown>
@@ -81,14 +81,11 @@
 <script>
   import { mapGetters, mapActions } from 'vuex'
   import LanguageSelector from './LanguageSelector'
-
   export default {
     name: 'navbar',
-
     components: {
       LanguageSelector
     },
-
     data () {
       return {
         langs: [
@@ -103,14 +100,12 @@
         ]
       }
     },
-
     computed: {
       ...mapGetters([
         'sidebarOpened',
         'toggleWithoutAnimation'
       ])
     },
-
     methods: {
       ...mapActions([
         'closeMenu',
@@ -126,20 +121,16 @@
   @import "~bootstrap/scss/mixins/breakpoints";
   @import "~bootstrap/scss/functions";
   @import "~bootstrap/scss/variables";
-
   .navbar.app-navbar {
-    position: fixed; top: 0; width: 100%; z-index: 1;
     .navbar-container {
       width: 100%;
       height: 100%;
       margin: 0;
     }
-
     height: $top-nav-height;
     padding-left: $nav-padding-left;
     padding-right: $nav-padding-right;
     background-color: $top-nav-bg;
-
     .avatar-container {
       display: inline-block;
       width: 50px;
@@ -148,39 +139,33 @@
       border-radius: 50%;
       border: 2px solid $lighter-gray;
       overflow: hidden;
-
       img {
         height: 100%;
         width: 100%;
       }
     }
-
     .menu-icon-container {
       padding: 0;
       font-size: $font-size-base;
     }
-
     .navbar-brand-container {
       position: absolute;
-      z-index: 1;
+      z-index: 3;
       height: 100%;
       left: $navbar-brand-container-left;
       top: 0;
     }
-
     .nav-item {
       padding: 0;
       height: 100%;
     }
-
     .dropdown.navbar-dropdown {
       .dropdown-toggle {
         padding: 0;
         &:after {
           display: none;
         }
       }
-
       &.show {
         @include media-breakpoint-up(lg) {
           .dropdown-menu {
@@ -201,61 +186,49 @@
           border-bottom: 10px solid $darkest-gray;
         }
       }
-
       .dropdown-menu {
         margin-top: $dropdown-show-b;
         padding-top: 0;
         width: 100%;
       }
-
-
       .dropdown-item {
         height: $navbar-dd-item-height;
         cursor: pointer;
         font-size: $font-size-base;
-
         &:hover, &:active, &:focus, &.active {
           outline: none;
         }
-
         &.plain-link-item {
           color: $brand-primary;
-
           &:hover, &:active, &:focus {
             background: $dropdown-background;
           }
-
           .plain-link {
             text-decoration: none;
           }
         }
       }
     }
-
     .notify {
       position: relative;
-
       &::after {
-         content: '';
-         position: absolute;
-         right: -6px;
-         top: -6px;
-         background-color: $brand-primary;
-         height: 12px;
-         width: 12px;
-         border-radius: 50%;
-       }
+        content: '';
+        position: absolute;
+        right: -6px;
+        top: -6px;
+        background-color: $brand-primary;
+        height: 12px;
+        width: 12px;
+        border-radius: 50%;
+      }
     }
-
     .i-nav-notification.notify::after {
       right: -4px;
       top: 0;
     }
-
     @include media-breakpoint-down(md) {
       height: $top-mobile-nav-height;
       padding: $nav-mobile-pt $nav-mobile-padding-h $nav-mobile-pb $nav-mobile-padding-h;
-
       .navbar-brand-container {
         width: $nav-mobile-brand-width;
         top: $nav-mobile-brand-top;
@@ -267,13 +240,12 @@
           font-size: $font-size-smaller;
         }
       }
-
       .dropdown.navbar-dropdown {
         &.show {
           display: flex;
           &:after {
             bottom: -$dropdown-mobile-show-b;
-            z-index: 1;
+            z-index: 2;
           }
           .dropdown-menu {
             margin-top: $dropdown-mobile-show-b;

src/components/layout/sidebar/Sidebar.vue

@@ -121,7 +121,6 @@
     }
   }
 
-  position: fixed;
   width: $sidebar-width;
   top: $sidebar-top;
   left: $sidebar-left;

src/sass/_variables.scss

@@ -100,6 +100,7 @@ $content-mobile-wrap-pr : 1rem;
 $content-mobile-wrap-pt : 2rem;
 $content-mobile-wrap-pb : $layout-padding;
 $content-mobile-wrap: $content-mobile-wrap-pt $content-mobile-wrap-pr $content-mobile-wrap-pb $content-mobile-wrap-pl;
+$content-mobile-wrap-sb-top: calc(#{$top-nav-height} + #{$layout-padding+20});
 
 $nav-mobile-padding-h : .875rem;
 $nav-mobile-pt: 3rem;