wip

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(

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;
       }
     }
 

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;