feat: resize sidebar feature.

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