diff --git a/client/src/components/MenuItem.js b/client/src/components/MenuItem.js index 4b3d0e82f..97921f8d2 100644 --- a/client/src/components/MenuItem.js +++ b/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} , this.maybeRenderLabel(labelElement), - hasSubmenu ? : undefined, + hasSubmenu ? : undefined, ); const liClasses = classNames({ [Classes.MENU_SUBMENU]: hasSubmenu }); diff --git a/client/src/components/Sidebar/SidebarContainer.js b/client/src/components/Sidebar/SidebarContainer.js index f9d2df228..77c0c670f 100644 --- a/client/src/components/Sidebar/SidebarContainer.js +++ b/client/src/components/Sidebar/SidebarContainer.js @@ -3,7 +3,9 @@ import React from 'react'; export default function SidebarContainer(props) { return ( ) } \ No newline at end of file diff --git a/client/src/components/Sidebar/SidebarMenu.js b/client/src/components/Sidebar/SidebarMenu.js index 9d0d4a86b..9d78bc8fb 100644 --- a/client/src/components/Sidebar/SidebarMenu.js +++ b/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); diff --git a/client/src/style/views/Sidebar.scss b/client/src/style/views/Sidebar.scss index 5605e8a09..d9d40edd6 100644 --- a/client/src/style/views/Sidebar.scss +++ b/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; } } } \ No newline at end of file