feature: scrollbar on left-menu and content added

src/dependencies.pug

@@ -20,7 +20,7 @@ if endpoints.get
       //- script(type="module" src="/lib/sib-event-component/sib-event.js" defer)
 
   if endpoints.get.resources && endpoints.get.resourceskeywords && endpoints.get.resourcestypes
-      script(type="module" src="https://cdn.skypack.dev/@startinblox/component-resource@1.2" defer)
+      //- script(type="module" src="https://cdn.skypack.dev/@startinblox/component-resource@1.2" defer)
       //- script(type="module" src="/lib/sib-resource/sib-resource.js" defer)
 
   if endpoints.get.joboffers

src/index.pug

@@ -47,7 +47,7 @@ html(lang="en")
       header#header.segment.lg-full.padding-left-large.padding-right-large.shadow-small.text-disable-selection
         include views/partials/header.pug
 
-      nav#main__menu.segment.bg-color-heading.text-top.lg-quarter
+      nav#main__menu.scrollbar-nav.segment.bg-color-heading.text-top.lg-quarter
         include views/partials/menu-left.pug
 
       main#content.segment.lg-three-quarter.text-top.notLoggedIn

src/styles/content/_index.scss

@@ -96,4 +96,64 @@ main {
       }
     }
   }
-}
+}
+
+/* Add scrollbar to the left and to the content */
+.scrollbar-nav,
+.scrollbar-content {
+  overflow-y: auto;
+  height: calc(100vh - 72px); /* 72px == header's height */
+  -webkit-overflow-scrolling: touch;
+  -ms-overflow-style: none;
+}
+
+/* Custom scrollbar of the left-menu*/
+/* Works on Firefox*/
+.scrollbar-nav {
+  scrollbar-width: thin;
+  scrollbar-color:#D6CECE var(--color-heading);
+}
+
+/* Works on Chrome, Edge, and Safari */
+.scrollbar-nav {
+  &::-webkit-scrollbar {
+    width: 12px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: var(--color-heading);          /* color of the tracking area */
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color:#D6CECE;                /* color of the scroll thumb */
+    border-radius: 6px;                        /* roundness of the scroll thumb */
+    border: 3px solid var(--color-heading);    /* creates padding around scroll thumb */
+  }
+}
+
+
+
+
+/* Custom scrollbar of the content */
+/* Works on Firefox */
+.scrollbar-content {
+  scrollbar-width: thin;
+  scrollbar-color:#D6CECE white;            /* scroll thumb and track */
+}
+
+/* Works on Chrome, Edge, and Safari */
+.scrollbar-content {
+  &::-webkit-scrollbar {
+    width: 12px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: white;                        /* color of the tracking area */
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color:#D6CECE;                 /* color of the scroll thumb */
+    border-radius: 6px;                         /* roundness of the scroll thumb */
+    border: 3px solid white;                  /* creates padding around scroll thumb */
+  }
+}

src/views/page-admin.pug

@@ -1,4 +1,4 @@
-.views-container.sidebar-is-closed
+.scrollbar-content.views-container.sidebar-is-closed
   if endpoints.circles || (endpoints.get && endpoints.get.circles)
     #admin-circles(hidden, data-view="admin-circles")
       include partials/admin/page-admin-circles.pug

src/views/page-circle.pug

@@ -1,4 +1,4 @@
-.views-container.sidebar-is-closed
+.scrollbar-content.views-container.sidebar-is-closed
   solid-ac-checker(permission='acl:Read', bind-resources)
     #circle-chat(hidden, data-view="circle-chat")
       include partials/circle/page-circle-chat.pug

src/views/page-project.pug

@@ -1,4 +1,4 @@
-.views-container.sidebar-is-closed
+.scrollbar-content.views-container.sidebar-is-closed
   solid-ac-checker(permission='acl:Read', bind-resources)
     #project-chat(hidden, data-view="project-chat")
       include partials/project/page-project-chat.pug