fix: sidebar overlay style.

client/src/config/sidebarMenu.js

@@ -311,8 +311,4 @@ export default [
     text: <T id={'billing'} />,
     href: '/billing',
   },
-  {
-    text: <T id={'auditing_system'} />,
-    href: '/auditing/list',
-  },
 ];

client/src/style/App.scss

@@ -26,6 +26,7 @@
 @import 'components/PageForm';
 @import 'components/Tooltip';
 @import 'components/Postbox';
+@import 'components/Overlay';
 @import 'components/SidebarOverlay';
 
 // Pages
@@ -101,9 +102,6 @@ body.hide-scrollbar .Pane2 {
   background-color: #0066ff;
 }
 
-.bp3-overlay-backdrop {
-  background-color: rgba(0, 10, 30, 0.7);
-}
 
 .ReactVirtualized__Collection {}
 
@@ -209,4 +207,5 @@ html[lang^="ar"] {
 
 .bp3-tooltip2 .bp3-popover2-arrow:before{
   box-shadow: 0 0 0;
-}
+}
+

client/src/style/components/Overlay.scss

@@ -0,0 +1,6 @@
+
+
+
+.bp3-overlay-backdrop {
+    background-color: rgba(0, 10, 30, 0.7);
+  }

client/src/style/components/SidebarOverlay.scss

@@ -1,129 +1,130 @@
-
-
 .sidebar-overlay {
-    background: #fff;
+  background: #fff;
+  height: 100%;
+  width: 225px;
+  outline: 0;
+  box-shadow: 0 0 2px rgba(0, 0, 0, 0.1);
+  z-index: 15;
+
+  &__scroll-wrapper {
+    height: 100%
+  }
+
+  .ScrollbarsCustom-Track {
+
+    &.ScrollbarsCustom-TrackY,
+    &.ScrollbarsCustom-TrackX {
+      background: rgba(0, 0, 0, 0);
+    }
+  }
+
+  .ScrollbarsCustom-Thumb {
+
+    &.ScrollbarsCustom-ThumbX,
+    &.ScrollbarsCustom-ThumbY {
+      background: rgba(0, 0, 0, 0);
+    }
+  }
+
+  .ScrollbarsCustom-Content {
+    display: flex;
+    flex-direction: column;
     height: 100%;
-    width: 225px;
+  }
-    outline: 0;
+
-    box-shadow: 0 0 2px rgba(0, 0, 0, 0.1);
+  &:hover {
-  
-    &__scroll-wrapper {
-      height: 100%
-    }
-  
-    .ScrollbarsCustom-Track {
-  
-      &.ScrollbarsCustom-TrackY,
-      &.ScrollbarsCustom-TrackX {
-        background: rgba(0, 0, 0, 0);
-      }
-    }
-  
     .ScrollbarsCustom-Thumb {
-  
+
       &.ScrollbarsCustom-ThumbX,
       &.ScrollbarsCustom-ThumbY {
-        background: rgba(0, 0, 0, 0);
+        background: rgba(0, 0, 0, 0.5);
       }
     }
-  
-    .ScrollbarsCustom-Content {
-      display: flex;
-      flex-direction: column;
-      height: 100%;
-    }
-  
-    &:hover {
-      .ScrollbarsCustom-Thumb {
-  
-        &.ScrollbarsCustom-ThumbX,
-        &.ScrollbarsCustom-ThumbY {
-          background: rgba(0, 0, 0, 0.5);
-        }
-      }
-    }
-  
-    &__menu {
-      margin: 16px 0;
-    }
-  
-    &__item {
-      font-size: 15px;
-      color: #00102b;
-  
-      a {
-        color: inherit;
-        display: block;
-        padding: 10px 22px;
-        text-decoration: none;
-  
-        &:hover,
-        &:focus{
-          background: #f3f3f3;
-        }
-      }
-    }
-  
-    &__divider {
-      height: 1px;
-      margin: 6px 0;
-      background: #e2e5ec;
-    }
-  
-    &__label{
-      text-transform: uppercase;
-      font-size: 12px;
-      padding: 14px 20px 10px;
-      letter-spacing: 1px;
-      color: #707a85;
-  
-      html[lang^="ar"] & {
-        font-size: 13px;
-        letter-spacing: 0;
-        font-weight: 500;
-      }
-    }
-  
-    &__label + .sidebar-overlay__divider{
-      margin-top: 0;
-    }
   }
-  
+
-  .sidebar-overlay-transition {
+  &__menu {
-    transform: translateX(-100%);
+    margin: 16px 0;
-  
+  }
-    &.bp3-overlay{
+
-      &-appear,
+  &__item {
-      &-enter {
+    font-size: 15px;
-        transform: translateX(-100%)
+    color: #00102b;
-      }
+
-      
+    a {
-      &-appear-active,
+      color: inherit;
-      &-enter-active {
+      display: block;
-        transform: translateX(0) !important;
+      padding: 10px 22px;
-        transition: all 100ms ease-in-out;
+      text-decoration: none;
-      }
+
-      
+      &:hover,
-      &-appear-done,
+      &:focus {
-      &-enter-done {
+        background: #f3f3f3;
-        transform: translateX(0) !important;
-      }
-  
-      &-exit {
-        transform: translateX(0) !important;
-      }   
-      &-exit-active {
-        transform: translateX(-100%) !important;
-        transition: all 100ms ease-in-out;
-      }
-      &-exit-done{
-        transform: translateX(-100%) !important;
       }
     }
-  
   }
-  .sidebar-overlay-backdrop{
+
-    background-color: rgba(0, 10, 30, 0.15);
+  &__divider {
+    height: 1px;
+    margin: 6px 0;
+    background: #e2e5ec;
   }
-  
+
-  
+  &__label {
+    text-transform: uppercase;
+    font-size: 12px;
+    padding: 14px 20px 10px;
+    letter-spacing: 1px;
+    color: #707a85;
+
+    html[lang^="ar"] & {
+      font-size: 13px;
+      letter-spacing: 0;
+      font-weight: 500;
+    }
+  }
+
+  &__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 100ms ease-in-out;
+    }
+
+    &-appear-done,
+    &-enter-done {
+      transform: translateX(0) !important;
+    }
+
+    &-exit {
+      transform: translateX(0) !important;
+    }
+
+    &-exit-active {
+      transform: translateX(-100%) !important;
+      transition: all 100ms ease-in-out;
+    }
+
+    &-exit-done {
+      transform: translateX(-100%) !important;
+    }
+  }
+}
+
+.sidebar-overlay-backdrop {
+  background-color: rgba(0, 10, 30, 0.15);
+  z-index: 14;
+}

client/src/style/pages/Dashboard/Dashboard.scss

@@ -54,7 +54,6 @@ $dashboard-views-bar-height: 45px;
         }
         .#{$ns}-icon {
           color: #1552c8;
-          margin-right: 5px;
         }
       }
 

client/src/style/variables.scss

@@ -15,7 +15,7 @@ $menu-item-color-active: $light-gray3;
 
 $breadcrumbs-collapsed-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#6B8193' enable-background='new 0 0 16 16' xml:space='preserve'><g><circle cx='2' cy='8.03' r='2'/><circle cx='14' cy='8.03' r='2'/><circle cx='8' cy='8.03' r='2'/></g></svg>");
 
-$sidebar-zindex: 21;
+$sidebar-zindex: 16;
 $pt-font-family: 'Noto Sans', -apple-system, BlinkMacSystemFont,
   Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Open Sans, Helvetica Neue,
   Icons16, sans-serif;