feat: Dashboar sidebar styled.

client/src/components/MenuItem.js

@@ -143,6 +143,7 @@ export default class MenuItem extends AbstractPureComponent2 {
             textClassName,
             tagName = "a",
             dropdownType,
+            caretIconSize = 16,
             ...htmlProps
         } = this.props;
         const hasSubmenu = children != null;
@@ -181,7 +182,7 @@ export default class MenuItem extends AbstractPureComponent2 {
                 {text}
             </Text>,
             this.maybeRenderLabel(labelElement),
-            hasSubmenu ? <Icon icon="caret-right" /> : undefined,
+            hasSubmenu ? <Icon icon="caret-right" iconSize={caretIconSize} /> : undefined,
         );
 
         const liClasses = classNames({ [Classes.MENU_SUBMENU]: hasSubmenu });

client/src/components/Sidebar/SidebarContainer.js

@@ -3,7 +3,9 @@ import React from 'react';
 export default function SidebarContainer(props) {
   return (
     <div className="sidebar" id="sidebar">
-      {props.children}
+      <div class="sidebar__inner">
+        {props.children}
+      </div>
     </div>
   )
 }

client/src/components/Sidebar/SidebarMenu.js

@@ -23,6 +23,7 @@ export default function SidebarMenu() {
             disabled={item.disabled}
             children={children}
             dropdownType={item.dropdownType || 'collapse'}
+            caretIconSize={15}
             onClick={() => {
               if (item.href) {
                 history.push(item.href);

client/src/style/views/Sidebar.scss

@@ -11,6 +11,13 @@ $sidebar-popover-submenu-bg: rgb(1, 20, 62);
   color: $sidebar-text-color;
   width: $sidebar-width;
 
+  &__inner{
+    overflow-y: scroll;
+    overflow-x: hidden;
+    height: 100%;
+  }
+
+
   &__head{
     padding: 16px 10px;
    
@@ -33,6 +40,7 @@ $sidebar-popover-submenu-bg: rgb(1, 20, 62);
     padding: 0;
     min-width: $sidebar-width;
     border-radius: 0;
+    padding-bottom: 2rem;
 
     .#{$ns}-menu-item{
       color: $sidebar-menu-item-color;
@@ -56,37 +64,33 @@ $sidebar-popover-submenu-bg: rgb(1, 20, 62);
       }
 
       > .#{$ns}-icon-caret-right{
-        margin-right: -2px;
-        margin-top: 2px;
-        color: #767B9B;
+        margin-right: -4px;
+        margin-top: 3px;
+        color: #5B5F7B;
       }
     }
 
     .#{$ns}-submenu{
 
-      .#{$ns}-menu{
-        padding: 10px 0;
-        margin: 0;
-        background: $sidebar-popover-submenu-bg;
-        border-radius: 0;
+      .#{$ns}-collapse{
 
-        &-item{
-          padding-top: 7px;
-          padding-bottom: 7px;
-          padding-left: 16px;
-          padding-right: 16px;
-          font-size: 14px;
+        &-body{
+          background-color: rgb(11, 34, 85);
+          padding-bottom: 6px;
+          padding-top: 6px;
+        }
 
-          &,
-          &:hover,
-          &:active,
-          &:focus{
-            color: #fff;
+        .#{$ns}-menu-item{
+          padding: 7px 16px 7px 18px;
+          font-size: 15px;
+          color: #C5CBE3;
+
+          &:hover{
             background: transparent;
+            color: #fff;
           }
         }
       }
-
       .#{$ns}-popover{
         padding: 0;
 
@@ -100,8 +104,8 @@ $sidebar-popover-submenu-bg: rgb(1, 20, 62);
     }
     .#{$ns}-menu-divider{
       border-top-color: #183C86;
-      margin-left: 0;
-      margin-right: 0;
+      color: #6B708C;
+      margin: 4px 0;
     }
   }
 }