feat: resize sidebar feature.

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{