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

@@ -58,4 +58,6 @@ document.addEventListener("DOMContentLoaded", function(event) {
   window.addEventListener('click', e => {
     navBar.classList.remove('open');
   });
+
+
 });

src/scripts/index.js

@@ -1,6 +1,7 @@
 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 => {
@@ -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;