- Data table sticky header.

- Mini sidebar toggle.
- Refactor withDashboard and withDashboardActions.

client/src/style/App.scss

@@ -11,15 +11,16 @@ $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: 15;
+$pt-font-family: Noto Sans, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Open Sans, Helvetica Neue, Icons16, sans-serif;
+
+
 // Blueprint framework.
 @import '@blueprintjs/core/src/blueprint.scss';
 @import '@blueprintjs/datetime/src/blueprint-datetime.scss';
 
 @import 'basscss';
 
-$pt-font-family: Noto Sans, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
-  Oxygen, Ubuntu, Cantarell, Open Sans, Helvetica Neue, Icons16, sans-serif;
-
 @import 'functions';
 
 // Objects

client/src/style/components/data-table.scss

@@ -1,8 +1,6 @@
 
 .bigcapital-datatable{
   display: block;
-  overflow-x: auto;
-  overflow-y: hidden;
 
   .dashboard__page-content &{
 
@@ -111,6 +109,9 @@
     }
 
     .tbody{
+      width: 100%;
+      overflow: scroll;
+
       .tr .td{
         border-bottom: 1px solid #E8E8E8;
         align-items: center;
@@ -198,6 +199,41 @@
     }
   }
 
+  &.has-sticky {
+
+    .thead,
+    .tfoot {
+      position: sticky;
+      z-index: 1;
+    }
+
+    .thead {
+      top: 0;
+      // box-shadow: 0px 3px 3px #ccc;
+    }
+
+    .tfoot {
+      bottom: 0;
+      // box-shadow: 0px -3px 3px #ccc;
+    }
+    .tbody {
+      position: relative;
+      z-index: 0;
+    }
+
+    [data-sticky-td] {
+      position: sticky;
+    }
+
+    [data-sticky-last-left-td] {
+      // box-shadow: 2px 0px 3px #ccc;
+    }
+
+    [data-sticky-first-right-td] {
+      // box-shadow: -2px 0px 3px #ccc;
+    }
+  }
+
   &.has-virtualized-rows{
     .tbody{
       overflow-y: scroll;

client/src/style/objects/form.scss

@@ -11,6 +11,10 @@ $form-check-input-indeterminate-bg-image: url("data:image/svg+xml,<svg xmlns='ht
     background: #fff;
     padding: 14px 16px;
     border-top: 1px solid #ececec;
+
+    .has-mini-sidebar &{
+      left: 50px;
+    }
   }
 }
 

client/src/style/pages/dashboard.scss

@@ -202,6 +202,11 @@
     display: flex;
     flex-direction: column;
     margin-left: 220px;
+
+    .sidebar--mini-sidebar + &{
+      margin-left: 50px;
+      width: calc(100% - 50px);
+    }
   }
 
   &__insider{
@@ -215,7 +220,6 @@
   }
 
   &__page-content{
-    // padding: 22px;
 
     .bigcapital-datatable{
 
@@ -307,9 +311,8 @@
   left: calc(50% - 250px);
   z-index: 21;
   border-radius: 3px;
-  -webkit-box-shadow: 0 0 0 1px rgba(16, 22, 26, 0.1),
-    0 4px 8px rgba(16, 22, 26, 0.2), 0 18px 46px 6px rgba(16, 22, 26, 0.2);
-  box-shadow: 0 0 0 1px rgba(16, 22, 26, 0.1), 0 4px 8px rgba(16, 22, 26, 0.2),
+  box-shadow: 0 0 0 1px rgba(16, 22, 26, 0.1),
+    0 4px 8px rgba(16, 22, 26, 0.2),
     0 18px 46px 6px rgba(16, 22, 26, 0.2);
   background-color: #fff;
   width: 500px;

client/src/style/pages/financial-statements.scss

@@ -40,7 +40,6 @@
     align-items: center;
   }
 
-
   &__header.is-hidden + .financial-statement__body{
     border-top: 20px solid #FDFDFD;
 
@@ -84,17 +83,26 @@
   &__table{
     margin-top: 24px;
 
-    .tbody{
-      .code.td{
-        color: #777;
+    .table{
+      .tbody,
+      .thead{
+        .tr .td,
+        .tr .th{
+          background: #fff;
+        }
       }
-    }
-    .tr.no-results{
-      .td{
-        flex-direction: column;
-        padding: 20px;
-        color: #666;
-        align-items: center;
+      .tbody{
+        .code.td{
+          color: #777;
+        }
+      }
+      .tr.no-results{
+        .td{
+          flex-direction: column;
+          padding: 20px;
+          color: #666;
+          align-items: center;
+        }
       }
     }
   }

client/src/style/views/Sidebar.scss

@@ -7,10 +7,11 @@ $sidebar-popover-submenu-bg: rgb(1, 20, 62);
 
 .sidebar {
   background: $sidebar-background;
-  color: $sidebar-text-color;
   width: $sidebar-width;
+  color: $sidebar-text-color;
   position: fixed;
   height: 100%;
+  z-index: $sidebar-zindex;
 
   .ScrollbarsCustom-Track {
     &.ScrollbarsCustom-TrackY,
@@ -45,6 +46,10 @@ $sidebar-popover-submenu-bg: rgb(1, 20, 62);
     }
   }
 
+  &__scroll-wrapper{
+    height: 100%;
+  }
+
   &-menu {
     background: transparent;
     padding: 0;
@@ -120,4 +125,75 @@ $sidebar-popover-submenu-bg: rgb(1, 20, 62);
       margin: 4px 0;
     }
   }
+
+  &--mini-sidebar{
+    white-space: nowrap;
+    width: 50px;
+
+
+    // Hide text of bigcapital logo.
+    .sidebar__head-logo{
+
+      .bp3-icon-bigcapital{
+        path:not(.path-1):not(.path-2) {
+          opacity: 0;
+        }
+      }
+    }
+
+    // Hide text of menu items and right caret icon.
+    .bp3-collapse,
+    .bp3-icon-caret-right,
+    .bp3-menu-item .bp3-text-overflow-ellipsis{
+      display: none;
+    }
+
+    .sidebar__menu{
+
+      .bp3-menu{
+        > li:not(.bp3-submenu):not(.bp3-menu-divider):not(.has-icon){
+
+          .bp3-menu-item{
+            &:before{
+              content: "";
+              height: 18px;
+              width: 18px;
+              background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' data-icon='ellipsis-h' width='18' height='18' fill='%235c7080' viewBox='0 0 512 512'%3E%3Cdesc%3Eellipsis-h%3C/desc%3E%3Cpath d='M304 256c0 26.5-21.5 48-48 48s-48-21.5-48-48 21.5-48 48-48 48 21.5 48 48zm120-48c-26.5 0-48 21.5-48 48s21.5 48 48 48 48-21.5 48-48-21.5-48-48-48zm-336 0c-26.5 0-48 21.5-48 48s21.5 48 48 48 48-21.5 48-48-21.5-48-48-48z' class='path-1' fill-rule='evenodd'%3E%3C/path%3E%3C/svg%3E");
+            }
+          }
+        }
+      }
+    }
+
+    .sidebar__scroll-wrapper{
+      background: $sidebar-background;
+      transition: min-width 0.15s ease-in-out;
+      min-width: 50px;
+
+      &:hover{
+        min-width: $sidebar-width;
+
+        .sidebar__head-logo{
+
+          .bp3-icon-bigcapital{
+            path:not(.path-1):not(.path-2) {
+              opacity: 1;
+            }
+          }
+        }
+
+        .bp3-collapse,
+        .bp3-icon-caret-right,
+        .bp3-menu-item .bp3-text-overflow-ellipsis{
+          display: block;
+        }
+        .sidebar__menu .bp3-menu > li:not(.bp3-submenu):not(.bp3-menu-divider) .bp3-menu-item{
+          
+          &:before{
+            display: none;
+          }
+        }
+      }      
+    }
+  }
 }