diff --git a/client/package.json b/client/package.json
index 861134a8d..0fdd0e4ce 100644
--- a/client/package.json
+++ b/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",
diff --git a/client/src/components/Dashboard/Dashboard.js b/client/src/components/Dashboard/Dashboard.js
index a65662853..996587acc 100644
--- a/client/src/components/Dashboard/Dashboard.js
+++ b/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() {
-
-
+
+
+
+
@@ -29,4 +32,4 @@ export default function Dashboard() {
);
-}
+}
\ No newline at end of file
diff --git a/client/src/components/Dashboard/DashboardSplitePane.js b/client/src/components/Dashboard/DashboardSplitePane.js
new file mode 100644
index 000000000..3938f435a
--- /dev/null
+++ b/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 (
+
+ {children}
+
+ );
+}
+
+export default compose(
+ withDashboard(({ sidebarExpended }) => ({ sidebarExpended }))
+)(DashboardSplitPane);
\ No newline at end of file
diff --git a/client/src/components/Sidebar/SidebarContainer.js b/client/src/components/Sidebar/SidebarContainer.js
index 9a0c428bf..d8f4ab5c9 100644
--- a/client/src/components/Sidebar/SidebarContainer.js
+++ b/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';
diff --git a/client/src/style/App.scss b/client/src/style/App.scss
index e0612f6a7..d6a8e44a7 100644
--- a/client/src/style/App.scss
+++ b/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;
-}
\ No newline at end of file
+}
diff --git a/client/src/style/components/resizer.scss b/client/src/style/components/resizer.scss
new file mode 100644
index 000000000..474df64ce
--- /dev/null
+++ b/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;
+ }
+ }
+}
\ No newline at end of file
diff --git a/client/src/style/pages/dashboard.scss b/client/src/style/pages/dashboard.scss
index 5f6132e4c..9df7a3a93 100644
--- a/client/src/style/pages/dashboard.scss
+++ b/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;
diff --git a/client/src/style/views/Sidebar.scss b/client/src/style/views/Sidebar.scss
index 14a42f537..170d27dcf 100644
--- a/client/src/style/views/Sidebar.scss
+++ b/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{