feat: resize sidebar feature.

client/package.json

@@ -80,6 +80,7 @@
     "react-scroll-sync": "^0.7.1",
     "react-scrollbars-custom": "^4.0.21",
     "react-sortablejs": "^2.0.11",
+    "react-split-pane": "^0.1.91",
     "react-table": "^7.0.0",
     "react-table-sticky": "^1.1.2",
     "react-use": "^13.26.1",

client/src/components/Dashboard/Dashboard.js

@@ -8,6 +8,7 @@ import DialogsContainer from 'components/DialogsContainer';
 import PreferencesContent from 'components/Preferences/PreferencesContent';
 import PreferencesSidebar from 'components/Preferences/PreferencesSidebar';
 import Search from 'containers/GeneralSearch/Search';
+import DashboardSplitPane from 'components/Dashboard/DashboardSplitePane';
 
 export default function Dashboard() {
   return (
@@ -20,8 +21,10 @@ export default function Dashboard() {
         </Route>
 
         <Route path="/">
-          <Sidebar />
-          <DashboardContent />
+          <DashboardSplitPane>
+            <Sidebar />
+            <DashboardContent />
+          </DashboardSplitPane>
         </Route>
       </Switch>
 
@@ -29,4 +32,4 @@ export default function Dashboard() {
       <DialogsContainer />
     </div>
   );
-}
+}

client/src/components/Dashboard/DashboardSplitePane.js

@@ -0,0 +1,42 @@
+import React, { useState, useRef } from 'react';
+import SplitPane from 'react-split-pane';
+import { debounce } from 'lodash';
+
+import withDashboard from 'containers/Dashboard/withDashboard';
+import { compose } from 'utils';
+
+function DashboardSplitPane({
+  sidebarExpended,
+  children
+}) {
+  const [defaultSize, setDefaultSize] = useState(
+    parseInt(localStorage.getItem('dashboard-size'), 10) || 220,
+  );
+  const debounceSaveSize = useRef(
+    debounce((size) => {
+      localStorage.setItem('dashboard-size', size);
+    }, 500),
+  );
+  const handleChange = (size) => {
+    debounceSaveSize.current(size);
+    setDefaultSize(size);
+  }
+  return (
+    <SplitPane
+      allowResize={sidebarExpended}
+      split="vertical"
+      minSize={180}
+      maxSize={300}
+      defaultSize={sidebarExpended ? defaultSize : 50}
+      size={sidebarExpended ? defaultSize : 50}
+      onChange={handleChange}
+      className="primary"
+    >
+      {children}
+    </SplitPane>
+  );
+}
+
+export default compose(
+  withDashboard(({ sidebarExpended }) => ({ sidebarExpended }))
+)(DashboardSplitPane);

client/src/components/Sidebar/SidebarContainer.js

@@ -1,7 +1,6 @@
 import React, { useEffect } from 'react';
 import { Scrollbar } from 'react-scrollbars-custom';
 import classNames from 'classnames';
-
 import withDashboardActions from 'containers/Dashboard/withDashboardActions';
 import withDashboard from 'containers/Dashboard/withDashboard';
 

client/src/style/App.scss

@@ -39,6 +39,7 @@ $pt-font-family: Noto Sans, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
 @import 'components/custom-scrollbar';
 @import 'components/dragzone';
 @import 'components/pagination';
+@import 'components/resizer';
 
 // Pages
 @import 'pages/dashboard';
@@ -170,4 +171,4 @@ body.authentication {
 
 .bp3-popover.bp3-tooltip{
   max-width: 300px;
-}
+}

client/src/style/components/resizer.scss

@@ -0,0 +1,50 @@
+
+.Pane.Pane2 {
+  overflow: auto;  
+}
+
+.Resizer {
+  background: #000;
+  z-index: 1;
+  box-sizing: border-box;
+  background-clip: padding-box;
+  position: relative;
+  z-index: 999;
+
+  &:hover {
+    transition: all 0.3s ease;
+  }
+
+  &.horizontal {
+    height: 4px;
+    margin: -2px 0;
+    opacity: 0;
+    border-top: 2px solid #1d9bd1;
+    border-bottom: 2px solid #1d9bd1;
+    cursor: row-resize;
+    width: 100%;
+
+    &:hover {
+      opacity: 1;      
+    }
+  }
+
+  &.vertical {
+    width: 4px;
+    margin: 0 -2px;
+    opacity: 0;
+    border-left: 2px solid #1d9bd1;
+    border-right: 2px solid #1d9bd1;
+    cursor: col-resize;
+
+    &:hover{
+      opacity: 1;      
+    }
+  }
+
+  &.disabled {    
+    &:hover{
+      border-color: transparent;
+    }
+  }
+}

client/src/style/pages/dashboard.scss

@@ -245,10 +245,9 @@
   }
 
   &-content{
-    width: calc(100% - 220px);
     display: flex;
     flex-direction: column;
-    margin-left: 220px;
+    height: 100%;
 
     .sidebar--mini-sidebar + &{
       margin-left: 50px;
@@ -307,7 +306,7 @@
 .tabs--dashboard-views{
 
   .#{$ns}-tab{
-    color: #666;
+    color: #5b606d;
     font-size: 14px;
     line-height: 50px;
     font-weight: 400;

client/src/style/views/Sidebar.scss

@@ -1,6 +1,6 @@
 $sidebar-background: #01194e;
 $sidebar-text-color: #fff;
-$sidebar-width: 220px;
+$sidebar-width: 100%;
 $sidebar-menu-item-color: rgba(255, 255, 255, 0.85);
 $sidebar-popover-submenu-bg: rgb(1, 20, 62);
 $sidebar-menu-label-color: rgba(255, 255, 255, 0.5);
@@ -13,7 +13,6 @@ $sidebar-submenu-item-bg-color: #01287d;
   background: $sidebar-background;
   width: $sidebar-width;
   color: $sidebar-text-color;
-  position: fixed;
   height: 100%;
   z-index: $sidebar-zindex;
 
@@ -87,7 +86,7 @@ $sidebar-submenu-item-bg-color: #01287d;
       > .#{$ns}-icon-caret-right {
         margin-right: -4px;
         margin-top: 3px;
-        color: rgba(255, 255, 255, 0.2);
+        color: rgba(255, 255, 255, 0.25);
       }
       &-label{
         display: block;
@@ -146,6 +145,7 @@ $sidebar-submenu-item-bg-color: #01287d;
   }
 
   &--mini-sidebar{
+    position: fixed;
     white-space: nowrap;
     width: 50px;
 
@@ -173,7 +173,7 @@ $sidebar-submenu-item-bg-color: #01287d;
       min-width: 50px;
 
       &:hover{
-        min-width: $sidebar-width;
+        min-width: 220px;
 
         .sidebar__head-logo{