From 15f40ff490159e3a724b1973619a70144a9742f4 Mon Sep 17 00:00:00 2001
From: Gaelle Morin <morin.gaelle@gmail.com>
Date: Fri, 30 Nov 2018 15:40:06 +0100
Subject: [PATCH 1/9] config

---
 package-lock.json | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 7c213f0..ef023a0 100644
--- a/package-lock.json
+++ b/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
         }
       }
     },

From 291822bbeb9fec540f8374ff1afee0cd3119d3a4 Mon Sep 17 00:00:00 2001
From: Gaelle Morin <morin.gaelle@gmail.com>
Date: Fri, 30 Nov 2018 22:28:00 +0100
Subject: [PATCH 2/9] wip

---
 src/menu.pug              |  5 +++--
 src/styles/menu.scss      | 38 +++++++++++++++++++++++++++++++-------
 src/styles/variables.scss |  1 +
 3 files changed, 35 insertions(+), 9 deletions(-)

diff --git a/src/menu.pug b/src/menu.pug
index 070d94f..90c8e1f 100644
--- a/src/menu.pug
+++ b/src/menu.pug
@@ -14,7 +14,8 @@ nav#navbar
     sib-route(hidden, name='job-offer-create')
     div
       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/`)
@@ -28,7 +29,7 @@ nav#navbar
       div.menu
         div.menu-notification
         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(
diff --git a/src/styles/menu.scss b/src/styles/menu.scss
index af9ad2d..7a9942e 100644
--- a/src/styles/menu.scss
+++ b/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);
@@ -41,9 +42,10 @@ sib-router {
   flex-direction: column;
 
   .sub-menu {
-    padding-left: 2em;
+    padding-left: 1.9em;
     div{
-        padding-bottom: 1em;
+        color: $color-grey-mid;
+        padding-bottom: 0.7em;
     }
   }
 
@@ -60,8 +62,7 @@ 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;
@@ -72,6 +73,7 @@ sib-router {
       .menu-notification > div {
         background-color: $color-purple-dark;
         color: $color-yellow-light;
+        font-size: 14px;
       }
     }
 
@@ -84,6 +86,7 @@ sib-router {
       align-items: center;
       display: flex;
       flex-direction: column;
+      font-size: 12px;
 
       &:before {
         width: 1.9em;
@@ -97,6 +100,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: 12px;
+      }
+    }
+
     .menu-label {
       //flex-basis: 8em;
       width: 8em;
@@ -106,6 +127,8 @@ sib-router {
       display: flex;
       flex-direction: column;
       text-transform: uppercase;
+      font-weight: 600;
+      padding-left: 10px;
     }
 
     .menu-notification {
@@ -123,10 +146,11 @@ sib-router {
         display: flex;
         justify-content: center;
         align-items: center;
-        width: 1.5em;
-        height: 1.5em;
+        width: 1.6em;
+        height: 1.6em;
         border-radius: 100%;
         background-color: $color-yellow-light;
+        font-size: 14px;
       }
     }
 
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index 1fc8a29..81e787c 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -2,6 +2,7 @@
 $color-white: #fff;
 $color-black: #36383b;
 $color-grey: #898f95;
+$color-grey-mid: #abaaba;
 $color-grey-light2: #d8d8d8;
 $color-grey-light: #f0f3f6;
 $color-yellow: #ffb700;

From 0837257b1d6f29a4399eccd8f1d5c5e7bbd7c966 Mon Sep 17 00:00:00 2001
From: Gaelle Morin <morin.gaelle@gmail.com>
Date: Mon, 3 Dec 2018 19:49:32 +0100
Subject: [PATCH 3/9] sub-menus can be closed and opened + divider added

---
 src/menu.pug              | 13 +++++++++----
 src/scripts/hd-app.js     | 20 +++++++++++---------
 src/scripts/index.js      | 23 +++++++++++++++++------
 src/styles/menu.scss      | 15 ++++++++++++++-
 src/styles/variables.scss |  1 +
 5 files changed, 52 insertions(+), 20 deletions(-)

diff --git a/src/menu.pug b/src/menu.pug
index 90c8e1f..407a978 100644
--- a/src/menu.pug
+++ b/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
diff --git a/src/scripts/hd-app.js b/src/scripts/hd-app.js
index 9d3c015..1fe90ce 100644
--- a/src/scripts/hd-app.js
+++ b/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');
   });
+
+
 });
diff --git a/src/scripts/index.js b/src/scripts/index.js
index 0f28643..90c8802 100644
--- a/src/scripts/index.js
+++ b/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');
+    });
+  });
+
 });
diff --git a/src/styles/menu.scss b/src/styles/menu.scss
index 7a9942e..034d1ed 100644
--- a/src/styles/menu.scss
+++ b/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);
       }
 
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index 81e787c..f88f4ef 100644
--- a/src/styles/variables.scss
+++ b/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;

From d50da0ccb30a0a005501d3926d002e04fbbfc6ae Mon Sep 17 00:00:00 2001
From: Gaelle Morin <morin.gaelle@gmail.com>
Date: Mon, 3 Dec 2018 19:53:05 +0100
Subject: [PATCH 4/9] wip

---
 src/scripts/index.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/scripts/index.js b/src/scripts/index.js
index 90c8802..d15e55f 100644
--- a/src/scripts/index.js
+++ b/src/scripts/index.js
@@ -31,7 +31,6 @@ document.addEventListener('DOMContentLoaded', function (event) {
   menuWrappers.forEach(menuWrapper => {
     const menu = menuWrapper.querySelector('.menu');
     menu.addEventListener('click', e => {
-      console.log(menuWrapper);
       menuWrapper.classList.toggle('is-closed');
     });
   });

From 6f2f194fdeb3380f321541a3653be8250f0e7dc0 Mon Sep 17 00:00:00 2001
From: Gaelle Morin <morin.gaelle@gmail.com>
Date: Mon, 3 Dec 2018 20:02:58 +0100
Subject: [PATCH 5/9] wip

---
 src/menu.pug | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/menu.pug b/src/menu.pug
index 407a978..99f2fd1 100644
--- a/src/menu.pug
+++ b/src/menu.pug
@@ -28,7 +28,7 @@ nav#navbar
           next='project'
         )
     div.divider
-    div.menu-wrapper.is-open
+    div.menu-wrapper
       div.menu
         div.menu-chevron
           div.menu-icon.icon-arrow-down

From 6f7a6482d2815c1fd5eda981f1d6e3d2daab5473 Mon Sep 17 00:00:00 2001
From: Gaelle Morin <morin.gaelle@gmail.com>
Date: Mon, 3 Dec 2018 20:16:57 +0100
Subject: [PATCH 6/9] chevron is animated

---
 src/styles/menu.scss | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/styles/menu.scss b/src/styles/menu.scss
index 034d1ed..f5114c7 100644
--- a/src/styles/menu.scss
+++ b/src/styles/menu.scss
@@ -46,6 +46,9 @@ sib-router {
       .sub-menu {
         display: none;
       }
+      .menu-chevron {
+        transform: rotate(180deg);
+      }
     }
   }
 

From 878c5d431022024d61cbbcc4efbd349f4c99fd0b Mon Sep 17 00:00:00 2001
From: Gaelle Morin <morin.gaelle@gmail.com>
Date: Tue, 4 Dec 2018 16:29:36 +0100
Subject: [PATCH 7/9] font sizes changed

---
 src/styles/menu.scss | 19 ++++++++++---------
 1 file changed, 10 insertions(+), 9 deletions(-)

diff --git a/src/styles/menu.scss b/src/styles/menu.scss
index f5114c7..17e35d8 100644
--- a/src/styles/menu.scss
+++ b/src/styles/menu.scss
@@ -14,7 +14,6 @@
   flex-basis: 16em;
   overflow: hidden;
   flex-direction: column;
-  font-size: 16px;
 
   &.open {
     transform: translateX(0);
@@ -58,10 +57,11 @@ sib-router {
   }
 
   .sub-menu {
-    padding-left: 1.9em;
+    padding-left: 1.8em;
     div{
         color: $color-grey-mid;
         padding-bottom: 0.7em;
+        font-size: 15px;
     }
   }
 
@@ -89,7 +89,7 @@ sib-router {
       .menu-notification > div {
         background-color: $color-purple-dark;
         color: $color-yellow-light;
-        font-size: 14px;
+        font-size: 12px;
       }
     }
 
@@ -102,7 +102,7 @@ sib-router {
       align-items: center;
       display: flex;
       flex-direction: column;
-      font-size: 12px;
+      font-size: 11px;
 
       &:before {
         width: 1.9em;
@@ -130,7 +130,7 @@ sib-router {
         display: flex;
         justify-content: center;
         align-items: center;
-        font-size: 12px;
+        font-size: 11px;
       }
     }
 
@@ -144,7 +144,8 @@ sib-router {
       flex-direction: column;
       text-transform: uppercase;
       font-weight: 600;
-      padding-left: 10px;
+      letter-spacing: 0.17px;
+      font-size: 16px;
     }
 
     .menu-notification {
@@ -162,11 +163,11 @@ sib-router {
         display: flex;
         justify-content: center;
         align-items: center;
-        width: 1.6em;
-        height: 1.6em;
+        width: 1.7em;
+        height: 1.7em;
         border-radius: 100%;
         background-color: $color-yellow-light;
-        font-size: 14px;
+        font-size: 12px;
       }
     }
 

From c8228f51c178bae9db0842d73c27c05b4418a2cb Mon Sep 17 00:00:00 2001
From: Gaelle Morin <morin.gaelle@gmail.com>
Date: Wed, 5 Dec 2018 21:14:13 +0100
Subject: [PATCH 8/9] font size added in navbar

---
 src/styles/menu.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/styles/menu.scss b/src/styles/menu.scss
index 17e35d8..8c40610 100644
--- a/src/styles/menu.scss
+++ b/src/styles/menu.scss
@@ -14,6 +14,7 @@
   flex-basis: 16em;
   overflow: hidden;
   flex-direction: column;
+  font-size: 16px;
 
   &.open {
     transform: translateX(0);

From ea00a3712f88cc04cbc1d708598b7e074f84d9ca Mon Sep 17 00:00:00 2001
From: Gaelle Morin <morin.gaelle@gmail.com>
Date: Thu, 6 Dec 2018 10:00:58 +0100
Subject: [PATCH 9/9] pointer added

---
 src/styles/menu.scss | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/styles/menu.scss b/src/styles/menu.scss
index 8c40610..bc7b8ec 100644
--- a/src/styles/menu.scss
+++ b/src/styles/menu.scss
@@ -60,9 +60,10 @@ sib-router {
   .sub-menu {
     padding-left: 1.8em;
     div{
-        color: $color-grey-mid;
-        padding-bottom: 0.7em;
-        font-size: 15px;
+      color: $color-grey-mid;
+      padding-bottom: 0.7em;
+      font-size: 15px;
+      cursor: pointer;
     }
   }