- Data table sticky header.

- Mini sidebar toggle.
- Refactor withDashboard and withDashboardActions.

client/src/components/Dashboard/Dashboard.js

@@ -1,23 +1,30 @@
 import React from 'react';
 import { Switch, Route } from 'react-router';
+import classNames from 'classnames';
+
 import Sidebar from 'components/Sidebar/Sidebar';
 import DashboardContent from 'components/Dashboard/DashboardContent';
 import DialogsContainer from 'components/DialogsContainer';
 import PreferencesContent from 'components/Preferences/PreferencesContent';
 import PreferencesSidebar from 'components/Preferences/PreferencesSidebar';
 import Search from 'containers/GeneralSearch/Search';
+import withDashboard from 'containers/Dashboard/withDashboard';
 
-export default function Dashboard() {
+import { compose } from 'utils';
+
+function Dashboard({ sidebarExpended }) {
   return (
-    <div className='dashboard'>
+    <div className={classNames('dashboard', {
+      'has-mini-sidebar': !sidebarExpended,
+    })}>
       <Switch>
-        <Route path='/preferences'>
+        <Route path="/preferences">
           <Sidebar />
           <PreferencesSidebar />
           <PreferencesContent />
         </Route>
 
-        <Route path='/'>
+        <Route path="/">
           <Sidebar />
           <DashboardContent />
         </Route>
@@ -28,3 +35,9 @@ export default function Dashboard() {
     </div>
   );
 }
+
+export default compose(
+  withDashboard(({ sidebarExpended }) => ({
+    sidebarExpended,
+  })),
+)(Dashboard);

client/src/components/Dashboard/DashboardTopbar.js

@@ -14,14 +14,23 @@ import DashboardBreadcrumbs from 'components/Dashboard/DashboardBreadcrumbs';
 import SearchConnect from 'connectors/Search.connect';
 import Icon from 'components/Icon';
 
+import withDashboardActions from 'containers/Dashboard/withDashboardActions';
+import withDashboard from 'containers/Dashboard/withDashboard';
+
 import { compose } from 'utils';
 
 
 function DashboardTopbar({
+
+  // #withDashboard
   pageTitle,
   pageSubtitle,
   editViewId,
-  globalSearchShow,
+
+  // #withDashboardActions
+  toggleSidebarExpend,
+
+  // #withGlobalSearch
   openGlobalSearch,
 }) {
   const history = useHistory();
@@ -38,11 +47,15 @@ function DashboardTopbar({
       onClick={handlerClickEditView}
     />
   );
+
+  const handleSidebarToggleBtn = () => {
+    toggleSidebarExpend();
+  };
   return (
     <div class='dashboard__topbar'>
       <div class='dashboard__topbar-left'>
         <div class='dashboard__topbar-sidebar-toggle'>
-          <Button minimal={true}>
+          <Button minimal={true} onClick={handleSidebarToggleBtn}>
             <svg
               xmlns='http://www.w3.org/2000/svg'
               width='20'
@@ -106,13 +119,10 @@ function DashboardTopbar({
   );
 }
 
-const mapStateToProps = (state) => ({
-  pageTitle: state.dashboard.pageTitle,
-  pageSubtitle: state.dashboard.pageSubtitle,
-  editViewId: state.dashboard.topbarEditViewId,
-});
-
 export default compose(
   SearchConnect,
-  connect(mapStateToProps)
+  withDashboard(({ pageTitle, pageSubtitle, editViewId }) => ({ 
+    pageTitle, pageSubtitle, editViewId
+  })),
+  withDashboardActions,
 )(DashboardTopbar);