From 9762f8b0f983523bcd058f2f72a666217dc76f27 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ga=C3=ABlle=20Morin?= <morin.gaelle@gmail.com>
Date: Wed, 11 Dec 2019 18:06:42 +0100
Subject: [PATCH] Left navbar: modifications according to the wireframe update

---
 src/styles/base/main.scss      | 11 +++----
 src/styles/base/menu-left.scss | 59 +++++++++++++++++++++++++---------
 2 files changed, 48 insertions(+), 22 deletions(-)

diff --git a/src/styles/base/main.scss b/src/styles/base/main.scss
index 283f1be..45a44a7 100644
--- a/src/styles/base/main.scss
+++ b/src/styles/base/main.scss
@@ -20,12 +20,11 @@ $breakpoints: (phone: 480px,
     background-color: $color-210-25-95;
     color: $color-213-4-50;
     font-size: 1.6rem;
-    overflow: hidden;
-    overflow-wrap: break-word;
-    display: flex;
-    flex-direction: column;
-    height: 100vh;
-    overflow: hidden;
+    overflow-y: scroll;
+  }
+
+  html {
+    overflow-y: scroll;
   }
 
   main {
diff --git a/src/styles/base/menu-left.scss b/src/styles/base/menu-left.scss
index 35409ef..77a273d 100644
--- a/src/styles/base/menu-left.scss
+++ b/src/styles/base/menu-left.scss
@@ -2,8 +2,8 @@
   background-color: $color-233-18-29;
   color: $color-0-0-100;
   display: block;
-  overflow: auto;
-  flex: 0 0 16em;
+  height: calc(100vh - 82px);
+  max-width: 250px;
   transition: flex-basis 0.5s ease-in-out;
 
   &.open {
@@ -90,6 +90,43 @@
     }
 
     .sub-menu {
+
+      sib-set-default[name='project'] {
+        padding: 1rem 1rem 1rem 3.2rem;
+
+        .project-customer,
+        .project-name {
+          display: inline-block;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+
+        .project-customer {
+          font-weight: bold;
+          width: 150px;
+        }
+
+        .project-name {
+          padding-left: 14px;
+          width: calc(150px - 10px);
+          /* 10px = padding of the sib-set-default = better alignment */
+        }
+
+        &:hover {
+          background-color: $color-233-20-17;
+          box-shadow: 0 0 7px 0 rgba(0, 0, 0, 0.26);
+          color: $color-218-100-98;
+          /* transition: all 0.6s cubic-bezier(0.39, 0.575, 0.565, 1); Need better animation */
+          width: auto;
+          z-index: 1000;
+
+          .project-customer,
+          .project-name {
+            width: auto;
+          }
+        }
+      }
       
       sib-display>div {
 
@@ -107,21 +144,11 @@
           >div {
             color: $color-244-10-70;
             cursor: pointer;
-            padding: 10px 10px 10px 32px;
-          }         
-    
-          sib-route[name='project'] {
-            display: flex;
-            flex: 3;
+            padding: 1rem 1rem 1rem 3.2rem;
+          }
 
-            sib-display-value {
-              display: block;
-              height: 20px;
-            }
-    
-            sib-display-value[name='dash'] {
-              margin: 0 0.4em;
-            }
+          &[fields="project(customer.name, name), badge"]>div {
+            padding: 0;
           }
         }