feature: left-menu: scrollbar

src/index.pug

@@ -22,7 +22,7 @@ html(lang="en")
     header#header.segment.bg-color-white.shadow
       include header.pug
 
-    nav#main__menu.bg-color-heading.text-small.text-color-white.left-menu.jsLeftMenu
+    nav#main__menu.segment.bg-color-heading.text-small.text-color-white.left-menu.jsLeftMenu
       include menu-left.pug
 
     main#viewport.content.notLoggedIn

src/menu-left.pug

@@ -20,11 +20,11 @@ solid-widget(name='hubl-create')
       br
       span(data-trans="menuLeft.emptyCircleProject.createNew")
       span  
-      solid-link(next="${value == 'projet' ? 'admin-projects' : 'admin-circles'}", data-trans="menuLeft.emptyCircleProject.adminPanel")
+      solid-link.segment.lg-full(next="${value == 'projet' ? 'admin-projects' : 'admin-circles'}", data-trans="menuLeft.emptyCircleProject.adminPanel")
 
 solid-widget(name='hubl-menu-fix-url-circle')
   template
-    solid-link(data-src="${value}" next="circle")
+    solid-link.segment.lg-full(data-src="${value}" next="circle")
       solid-display(
         data-src='${value}'
         fields='status, name, jabberID, badge'
@@ -80,7 +80,7 @@ solid-router#navbar-router(default-route='dashboard')
       div.menu-label.segment.text-uppercase.text-letter-spacing-large.float-left(data-trans="menuLeft.events")
   if endpoints.projects || (endpoints.get && endpoints.get.projects)
     div.menu-wrapper
-      solid-link
+      solid-link.segment.lg-full
         //- (next='admin-project-list')
         div.menu.segment.lg-auto.padding.text-bold
           div.menu-icon.icon-folder-alt.segment.lg-auto.margin-right-small.float-left
@@ -109,7 +109,7 @@ solid-router#navbar-router(default-route='dashboard')
     div.divider
   if endpoints.circles || (endpoints.get && endpoints.get.circles)
     div.menu-wrapper
-      solid-link
+      solid-link.segment.lg-full
         //- (next='admin-circle-list')
         div.menu.segment.lg-auto.padding.text-bold
           div.menu-icon.icon-folder-alt.segment.lg-auto.margin-right-small.float-left

src/styles/base/main.scss

@@ -335,16 +335,16 @@ nav, .views-container, .table-wrapper {
 /* Custom scrollbar of the left-menu */
 nav {
   scrollbar-width: thin;
-  scrollbar-color: var(--color-scrollbar-left-track) var(--color-scrollbar-left-background);
+  scrollbar-color: var(--color-grey) var(--color-heading);
 
   &::-webkit-scrollbar-track {
-    background: var(--color-scrollbar-left-background);
+    background: var(--color-heading);
   }
 
   &::-webkit-scrollbar-thumb {
-    background-color: var(--color-scrollbar-left-track);
+    background-color: var(--color-grey);
     border-radius: 6px;
-    border: 3px solid var(--color-scrollbar-left-background);
+    border: 3px solid var(--color-heading);
   }
 
   &::-webkit-scrollbar {

src/styles/base/menu-left.scss

@@ -37,9 +37,9 @@
       }
     }
 
-    solid-link {
+    /*solid-link {
       width: 100%;
-    }
+    }*/
 
     .menu {
       cursor: pointer;