Merge branch 'gm-side-menu'

package-lock.json

@@ -2597,7 +2597,8 @@
         "ansi-regex": {
           "version": "2.1.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "aproba": {
           "version": "1.2.0",
@@ -3012,7 +3013,8 @@
         "safe-buffer": {
           "version": "5.1.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "safer-buffer": {
           "version": "2.1.2",
@@ -3068,6 +3070,7 @@
           "version": "3.0.1",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "ansi-regex": "2.1.1"
           }
@@ -3111,12 +3114,14 @@
         "wrappy": {
           "version": "1.0.2",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "yallist": {
           "version": "3.0.2",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         }
       }
     },

src/menu.pug

@@ -2,19 +2,22 @@ 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-notification
+        div.menu-chevron
+          div.menu-icon.icon-arrow-down
         div.menu-label Projects
         div.menu-icon.icon-folder-alt
       sib-route(hidden,name='project', id-prefix=`${sdn}/projects/`)
@@ -24,11 +27,13 @@ nav#navbar
           data-fields='name',
           next='project'
         )
-    div
+    div.divider
+    div.menu-wrapper
       div.menu
-        div.menu-notification
+        div.menu-chevron
+          div.menu-icon.icon-arrow-down
         div.menu-label Groups
-        div.menu-icon.icon-bubbles
+        div.menu-icon.icon-globe
       sib-route(hidden, name='group', id-prefix=`${sdn}/channels/`)
       div.sub-menu
         sib-display(
@@ -36,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,13 @@ 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 => {
+      menuWrapper.classList.toggle('is-closed');
+    });
+  });
+
 });

src/styles/menu.scss

@@ -11,9 +11,10 @@
   display: flex;
   flex-grow: 0;
   flex-shrink: 0;
-  flex-basis: 17em;
+  flex-basis: 16em;
   overflow: hidden;
   flex-direction: column;
+  font-size: 16px;
 
   &.open {
     transform: translateX(0);
@@ -40,10 +41,29 @@ sib-router {
   display: flex;
   flex-direction: column;
 
+  .menu-wrapper {
+    &.is-closed {
+      .sub-menu {
+        display: none;
+      }
+      .menu-chevron {
+        transform: rotate(180deg);
+      }
+    }
+  }
+
+  .divider {
+    height: 1px;
+    background-color: $color-grey-light3;
+  }
+
   .sub-menu {
-    padding-left: 2em;
+    padding-left: 1.8em;
     div{
-        padding-bottom: 1em;
+      color: $color-grey-mid;
+      padding-bottom: 0.7em;
+      font-size: 15px;
+      cursor: pointer;
     }
   }
 
@@ -60,18 +80,18 @@ sib-router {
 
     &[active] {
       background-color: $color-yellow-light;
-      color: $color-black;
-      font-weight: normal;
+      color: $color-purple-dark;
 
       .menu-icon:before {
         background-color: $color-purple-dark;
-        color: $color-yellow-light;
+        color: $color-white;
         // transform: perspective(1000px) translateZ(1px) scale(0.8);
       }
 
       .menu-notification > div {
         background-color: $color-purple-dark;
         color: $color-yellow-light;
+        font-size: 12px;
       }
     }
 
@@ -84,6 +104,7 @@ sib-router {
       align-items: center;
       display: flex;
       flex-direction: column;
+      font-size: 11px;
 
       &:before {
         width: 1.9em;
@@ -97,6 +118,24 @@ sib-router {
       }
     }
 
+    .menu-chevron {
+      width: 2em;
+      flex-shrink: 0;
+      flex-grow: 0;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+
+      > div {
+        color: $color-grey-mid;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        font-size: 11px;
+      }
+    }
+
     .menu-label {
       //flex-basis: 8em;
       width: 8em;
@@ -106,6 +145,9 @@ sib-router {
       display: flex;
       flex-direction: column;
       text-transform: uppercase;
+      font-weight: 600;
+      letter-spacing: 0.17px;
+      font-size: 16px;
     }
 
     .menu-notification {
@@ -123,10 +165,11 @@ sib-router {
         display: flex;
         justify-content: center;
         align-items: center;
-        width: 1.5em;
-        height: 1.5em;
+        width: 1.7em;
+        height: 1.7em;
         border-radius: 100%;
         background-color: $color-yellow-light;
+        font-size: 12px;
       }
     }
 

src/styles/variables.scss

@@ -2,6 +2,8 @@
 $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;