feat: Sidebar overlay.

client/src/style/App.scss

@@ -204,7 +204,8 @@ html[lang^="ar"] {
 .sidebar-overlay {
   background: #fff;
   height: 100%;
-  width: 300px;
+  width: 240px;
+  outline: 0;
 
   &__scroll-wrapper {
     height: 100%
@@ -237,23 +238,23 @@ html[lang^="ar"] {
 
       &.ScrollbarsCustom-ThumbX,
       &.ScrollbarsCustom-ThumbY {
-        background: rgba(255, 255, 255, 0.25);
+        background: rgba(0, 0, 0, 0.5);
       }
     }
   }
 
   &__menu {
-    margin: 20px 0;
+    margin: 16px 0;
   }
 
   &__item {
     font-size: 15px;
-    color: #032259;
+    color: #001944;
 
     a {
       color: inherit;
       display: block;
-      padding: 9px 22px;
+      padding: 10px 22px;
       text-decoration: none;
 
       &:hover,
@@ -265,15 +266,56 @@ html[lang^="ar"] {
 
   &__divider {
     height: 1px;
-    margin: 4px 0;
-    background: #ebebeb;
+    margin: 6px 0;
+    background: #e2e5ec;
   }
 
   &__label{
     text-transform: uppercase;
     font-size: 12px;
-    padding: 4px 20px;
-    letter-spacing: 0.8px;
+    padding: 14px 20px 10px;
+    letter-spacing: 1px;
     color: #707a85;
   }
+
+  &__label + .sidebar-overlay__divider{
+    margin-top: 0;
+  }
+}
+
+.sidebar-overlay-transition {
+  transform: translateX(-100%);
+
+  &.bp3-overlay{
+    &-appear,
+    &-enter {
+      transform: translateX(-100%)
+    }
+    
+    &-appear-active,
+    &-enter-active {
+      transform: translateX(0) !important;
+      transition: all 200ms ease-in-out;
+    }
+    
+    &-appear-done,
+    &-enter-done {
+      transform: translateX(0) !important;
+    }
+
+    &-exit {
+      transform: translateX(0) !important;
+    }   
+    &-exit-active {
+      transform: translateX(-100%) !important;
+      transition: all 200ms ease-in-out;
+    }
+    &-exit-done{
+      transform: translateX(-100%) !important;
+    }
+  }
+
+}
+.sidebar-overlay-backdrop{
+  background-color: rgba(0, 10, 30, 0.6);
 }