sub-menus can be closed and opened + divider added

src/menu.pug

@@ -2,17 +2,19 @@ nav#navbar
   sib-router#navbar-router(default-route='members')
     sib-route.menu(name='members')
       div.menu-notification
-        div 1
+        div 0
       div.menu-label Members
       div.menu-icon.icon-people
     sib-route.menu(hidden, name='member', id-prefix=`${sdn}/members/`)
+    div.divider
     sib-route.menu(name='job-offers')
       div.menu-notification
         div 2
       div.menu-label Job offers
       div.menu-icon.icon-briefcase
     sib-route(hidden, name='job-offer-create')
-    div
+    div.divider
+    div.menu-wrapper
       div.menu
         div.menu-chevron
           div.menu-icon.icon-arrow-down
@@ -25,9 +27,11 @@ nav#navbar
           data-fields='name',
           next='project'
         )
-    div
+    div.divider
+    div.menu-wrapper.is-open
       div.menu
-        div.menu-notification
+        div.menu-chevron
+          div.menu-icon.icon-arrow-down
         div.menu-label Groups
         div.menu-icon.icon-globe
       sib-route(hidden, name='group', id-prefix=`${sdn}/channels/`)
@@ -37,3 +41,4 @@ nav#navbar
           data-fields='name',
           next='group'
         )
+    div.divider

src/scripts/hd-app.js

@@ -1,14 +1,14 @@
-document.addEventListener("DOMContentLoaded", function(event) {
+document.addEventListener("DOMContentLoaded", function (event) {
   // Constants declaration
-  const navBar        = document.querySelector("#navbar");
-  const searchBar     = document.querySelector("#search-bar");
-  const searchView    = document.querySelector("#search-view");
-  const searchInput   = searchBar.querySelector("#search-input");
-  const btnToggle     = document.querySelector("#button-toggle");
+  const navBar = document.querySelector("#navbar");
+  const searchBar = document.querySelector("#search-bar");
+  const searchView = document.querySelector("#search-view");
+  const searchInput = searchBar.querySelector("#search-input");
+  const btnToggle = document.querySelector("#button-toggle");
 
 
   // Shortcuts
-  window.addEventListener("keydown", function(e) {
+  window.addEventListener("keydown", function (e) {
     // CTRL + K triggers the search feature
     if ((e.keyCode == 75 || e.keyCode == 80) && (e.ctrlKey === true || e.metaKey === true)) {
       e.preventDefault();
@@ -34,7 +34,7 @@ document.addEventListener("DOMContentLoaded", function(event) {
     navBar.classList.remove("search-mode");
     searchView.classList.remove("search-mode");
   }
-  
+
   function emptySearchBar(e) {
     searchInput.value = '';
     openSearchBar();
@@ -55,7 +55,9 @@ document.addEventListener("DOMContentLoaded", function(event) {
     e.stopPropagation();
   });
 
-  window.addEventListener('click', e=>{
+  window.addEventListener('click', e => {
     navBar.classList.remove('open');
   });
+
+
 });

src/scripts/index.js

@@ -1,6 +1,7 @@
-document.addEventListener('DOMContentLoaded', function(event) {
+document.addEventListener('DOMContentLoaded', function (event) {
   const navBar = document.querySelector('#navbar');
   const btnToggle = document.querySelector('#button-toggle');
+  const menuWrappers = Array.from(document.querySelectorAll('.menu-wrapper'));
   if (!navBar || !btnToggle) return;
 
   btnToggle.addEventListener('click', e => {
@@ -13,11 +14,11 @@ document.addEventListener('DOMContentLoaded', function(event) {
   });
 
   function resize() {
-    setTimeout(()=>
-    Array.from(document.querySelectorAll('.chat-view')).forEach(elm => {
-      if(!elm.offsetParent) return;
-      elm.style.setProperty('--pos-top', elm.offsetTop + 'px');
-    }));
+    setTimeout(() =>
+      Array.from(document.querySelectorAll('.chat-view')).forEach(elm => {
+        if (!elm.offsetParent) return;
+        elm.style.setProperty('--pos-top', elm.offsetTop + 'px');
+      }));
   }
   window.addEventListener('resize', resize);
   window.addEventListener('navigate', resize);
@@ -25,4 +26,14 @@ document.addEventListener('DOMContentLoaded', function(event) {
   document.addEventListener('load', resize);
   document.addEventListener('WebComponentsReady', resize);
   resize();
+
+  // Toggle sub-menus
+  menuWrappers.forEach(menuWrapper => {
+    const menu = menuWrapper.querySelector('.menu');
+    menu.addEventListener('click', e => {
+      console.log(menuWrapper);
+      menuWrapper.classList.toggle('is-closed');
+    });
+  });
+
 });

src/styles/menu.scss

@@ -41,6 +41,19 @@ sib-router {
   display: flex;
   flex-direction: column;
 
+  .menu-wrapper {
+    &.is-closed {
+      .sub-menu {
+        display: none;
+      }
+    }
+  }
+
+  .divider {
+    height: 1px;
+    background-color: $color-grey-light3;
+  }
+
   .sub-menu {
     padding-left: 1.9em;
     div{
@@ -66,7 +79,7 @@ sib-router {
 
       .menu-icon:before {
         background-color: $color-purple-dark;
-        color: $color-yellow-light;
+        color: $color-white;
         // transform: perspective(1000px) translateZ(1px) scale(0.8);
       }
 

src/styles/variables.scss

@@ -3,6 +3,7 @@ $color-white: #fff;
 $color-black: #36383b;
 $color-grey: #898f95;
 $color-grey-mid: #abaaba;
+$color-grey-light3: hsla(59, 13%, 86%, 0.2);
 $color-grey-light2: #d8d8d8;
 $color-grey-light: #f0f3f6;
 $color-yellow: #ffb700;