scrollbars on left menu and content added

src/menu-left.pug

@@ -19,31 +19,31 @@ nav#main__menu
     //- sib-route(name='job-offer-create', hidden)
     //- sib-route(name='job-offer-edit', use-id, hidden)
     //- div.divider
-    //- div.menu-wrapper
+    div.menu-wrapper
-    //-   div.menu
+      div.menu
-    //-     div.menu-chevron
+        div.menu-chevron
-    //-       div.menu-icon.icon-arrow-up
+          div.menu-icon.icon-arrow-up
-    //-     div.menu-label Projects
+        div.menu-label Projects
-    //-     div.menu-icon.icon-folder-alt
+        div.menu-icon.icon-folder-alt
-    //-   sib-route(name='project', rdf-type='hd:project', use-id='', hidden)
+      sib-route(name='project', rdf-type='hd:project', use-id='', hidden)
-    //-   div.sub-menu.menu-notification
+      div.sub-menu.menu-notification
-    //-     sib-display.project-tab(
+        sib-display.project-tab(
-    //-       data-src=`${endpoints.projects}`
+          data-src=`${endpoints.projects}`
-    //-       fields='project(customer.name, name), badge'
+          fields='project(customer.name, name), badge'
-    //-       class-customer.name='project-customer'
+          class-customer.name='project-customer'
-    //-       class-name='project-name'
+          class-name='project-name'
-    //-       empty-widget='hd-create'
+          empty-widget='hd-create'
-    //-       empty-value='project'
+          empty-value='project'
-    //-       search-fields='team'
+          search-fields='team'
-    //-       search-widget-team='sib-form-hidden'
+          search-widget-team='sib-form-hidden'
-    //-       search-value-team='-'
+          search-value-team='-'
-    //-       hd-inherit-user-id='search-value-team'
+          hd-inherit-user-id='search-value-team'
-    //-       hd-inherit-widgets
+          hd-inherit-widgets
-    //-       widget-badge='hd-counter'
+          widget-badge='hd-counter'
-    //-       action-badge='badge'
+          action-badge='badge'
-    //-       order-by='customer.name'
+          order-by='customer.name'
-    //-       next='project'
+          next='project'
-    //-     )
+        )
     div.divider
     div
       div.menu

src/styles/base/main.scss

@@ -22,16 +22,28 @@ $breakpoints: (phone: 480px,
     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;
-    flex-direction: row;
+    overflow: hidden;
-    max-width: 100%;
+    height: calc(100vh - 83px); /* 83px = height of the header */
+    position: relative;
+    width: 100%;
+    
+    backface-visibility: hidden;
+    /*will-change: overflow;*/
   }
 }
 
-
+/* Add scrollbar to the left and right menu, and to the content */
+nav, .views-container {
+  overflow: auto;
+  height: auto;
+  -webkit-overflow-scrolling: touch;
+  -ms-overflow-style: none;
+}
 
 /* Quick fix. Will be removed later */
 #admin-circles,

src/styles/base/menu-left.scss

@@ -121,32 +121,6 @@
 
         hd-counter {
           margin-top: 16px;
-          margin-left: 8px;
-        }
-
-        &:hover {
-          background-color: $color-233-20-17;
-          box-shadow: 0 0 7px 0 rgba(0, 0, 0, 0.26);
-
-          sib-set-default[name='project'] {
-            background-color: $color-233-20-17;
-            color: $color-218-100-98;
-            /* transition: all 0.6s cubic-bezier(0.39, 0.575, 0.565, 1); Need better animation */
-            z-index: 1000;
-
-            .project-customer,
-            .project-name {
-              width: auto;
-            }
-
-            .project-name {
-              font-weight: normal;
-            }
-          }
-
-          hd-counter {
-            display: none;
-          }
         }
       }
       /* End of specific styles of "Projects" tab */

src/styles/components/sidebar.scss

@@ -12,7 +12,7 @@
 
   .views-container {
     flex: 1 0 0;
-    -webkit-backface-visibility: hidden;
+    /*-webkit-backface-visibility: hidden;*/
 
     &.sidebar-is-closed {
       margin-left: -15.5rem;
@@ -27,6 +27,7 @@
   nav {
     background: $color-210-25-95;
     transition: all 0.5s;
+    width: 25rem;
 
     >sib-router {
       background-color: $color-222-52-90;
@@ -49,13 +50,13 @@
           margin: 0;
           padding: 2.15rem 2.55rem;
           position: relative;
-          width: 12em;
+          /*width: 12em;*/
 
           &::before {
             float: left;
             font-size: 4rem;
             margin-left: 0;
-            margin-right: 2.55rem;
+            margin-right: 2.85rem;
           }
         }