update: responsive - general layout. Flex to grid

src/index.pug

@@ -14,12 +14,16 @@ html(lang="en")
     if clientCSS
       link(rel='stylesheet', href=`${clientCSS}`)
   body
-    header#header.flex.is-spaced(role='banner')
+
+    .wrapper
+
+      header#header.header(role='banner')
         include header.pug
 
-    main.notLoggedIn
+      nav#main__menu.left-menu.jsLeftMenu
         include menu-left.pug
-      div#viewport
+
+      main.box.content.notLoggedIn
 
         if endpoints.dashboards || (endpoints.get && endpoints.get.dashboards)
           #dashboard(hidden).no-sidebar.with-padding

src/menu-left.pug

@@ -47,8 +47,8 @@ sib-widget(name='hubl-menu-fix-url-project')
       order-by="customer.name"
     )
 
-nav#main__menu.jsLeftMenu
-  sib-router#navbar-router(default-route='dashboard')
+
+sib-router#navbar-router(default-route='dashboard')
   if endpoints.dashboards || (endpoints.get && endpoints.get.dashboards)
     sib-route.menu(name='dashboard')
       div.menu-label Tableau de bord

src/styles/base/header.scss

@@ -1,13 +1,14 @@
 #header {
   max-height: 83px;
   height: 83px;
+  display: flex;
   align-items: center;
   background-color: var(--color-header-background);
   color: var(--color-black);
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.09);
   flex-shrink: 0;
   position: relative;
-  z-index: 1;
+  /*z-index: 1;*/
 
   &.is-spaced {
     padding: 0 2.5rem;

src/styles/base/main.scss

@@ -11,21 +11,6 @@
     background-color: var(--color-main-background);
     color: var(--color-main-text);
     font-size: 1.6rem;
-    min-height: 100vh;
-    overflow-wrap: break-word;
-    overflow-x: hidden; /* To stop getting horizontal scrolling if anything overflows the width */
-  }
-
-  main {
-    display: flex;
-    z-index: 0;
-    overflow: hidden;
-    height: calc(100vh - 83px); /* 83px = height of the header */
-    position: relative;
-    width: 100%;
-    
-    backface-visibility: hidden;
-    /*will-change: overflow;*/
   }
 
   .notLoggedIn {
@@ -33,6 +18,73 @@
   }
 }
 
+.wrapper {
+  display: grid;
+  grid-template-areas: 
+    "header"
+    "content";
+
+  @include breakpoint(lg) {
+    grid-template-columns: 265px auto;
+    grid-template-areas:
+      "header header"
+      "leftmenu content";
+  }
+}
+
+.header {
+  grid-area: header;
+}
+
+.left-menu {
+  grid-area: leftmenu;
+
+  @include breakpoint(lg) {
+    height: calc(100vh - 83px); /* 83px = nav height */
+    position: sticky;
+    top: 0;
+    overflow-x: hidden;
+    overflow-y: auto;
+  }
+
+  &.jsLeftMenu {
+    display: none;
+
+    @include breakpoint(lg) {
+      display: block;
+    }
+  }
+
+  &.jsLeftMenu[open] {
+    display: block;
+    bottom: 0;
+    box-shadow: 0 2px 8px 0 rgba(65, 69, 73, 0.5);
+    min-width: 80%;
+    position: fixed;
+    right: 0;
+    top: 0;
+    z-index: 1;
+
+    @include breakpoint(lg) {
+      display: none;
+    }
+  }
+}
+
+.content {
+  grid-area: content;
+
+  @include breakpoint(lg) {
+    position: sticky;
+    top: 0;
+    overflow-y: auto;
+    height: calc(100vh - 83px);
+    overflow-x: hidden;
+  }
+}
+
+
+
 /* Add scrollbar to the left and right menu, and to the content */
 nav, .views-container {
   overflow: auto;

src/styles/base/menu-left.scss

@@ -1,10 +1,6 @@
 #main__menu {
   background-color: var(--color-menu-background);
   color: var(--color-menu-text);
-  display: block;
-  max-width: 250px;
-  min-height: calc(100vh - 83px); /* 83px = nav height */
-  flex: 1;
   /*transition: flex-basis 0.5s ease-in-out;*/
 
   &.open {
@@ -245,27 +241,6 @@
       opacity: 0.2;
     }
   }
-
-  &.jsLeftMenu {
-
-    display: none;
-
-    @include breakpoint(lg) {
-      display: block;
-    }
-  }
-
-  &.jsLeftMenu[open] {
-
-    display: block;
-    bottom: 0;
-    box-shadow: 0 2px 8px 0 rgba(65, 69, 73, 0.5);
-    min-width: 80%;
-    position: fixed;
-    right: 0;
-    top: 0;
-    z-index: 1;
-  }
 }
 
 // Temporary fix for badges