Merge pull request #383 from netdata/bugfix/3049

Reduce spacing of menu items in right bar

Author: burbuli8ra

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@netdata/dashboard",
-  "version": "2.22.5",
+  "version": "2.22.6",
   "homepage": ".",
   "main": "./lib/src/index-npm.js",
   "files": [

package.json

@@ -27,7 +27,8 @@ const Container = styled(Flex)`
   &&& {
     border-left: 2px solid transparent;
     ${props => props.active && styledActive}
-    ${props => props.active && `${MenuGroupLabelWrapper} { font-weight: bold; }`}
+    ${props =>
+      props.active && `${MenuGroupLabelWrapper} { font-weight: bold; }`}
 
     text-decoration: none;
     &:hover {
@@ -45,7 +46,7 @@ export const MenuGroupIcon = ({ icon }) => <Icon dangerouslySetInnerHTML={{ __ht
 export const MenuGroupIconContainer = withMenuGroup(MenuGroupIcon, ({ icon }) => ({ icon }))
 
 export const MenuGroupItemWrapper = forwardRef(({ id, ...rest }, ref) => (
-  <Container ref={ref} as="a" gap={2} padding={[1, 5]} data-sidebar-menugroupid={id} {...rest} />
+  <Container ref={ref} as="a" gap={2} padding={[1, 2]} data-sidebar-menugroupid={id} {...rest} />
 ))
 
 export const MenuGroupItemContainer = withMenuGroup(MenuGroupItemWrapper, ({ id, link }) => ({

src/domains/charts/menuGroup/menuGroup.js

@@ -12,7 +12,7 @@ const styledActive = css`
 const MenuItem = styled(TextSmall).attrs(({ active, id, title, link, children }) => ({
   as: "a",
   strong: active,
-  padding: [0.5, 7],
+  padding: [0.5, 3],
   role: "listitem",
   children: title || children,
   href: `#${link}`,

src/domains/charts/subMenu/menuItem.js

@@ -211,7 +211,7 @@ $CLOUD_SECONDARY_HEADER_HEIGHT: 64px;
 
   &__sidebar-submenu-li--active {
     .node-view__sidebar-link {
-      padding-left: 28px;
+      padding-left: 7px;
       font-weight: 500;
     }
   }

src/domains/dashboard/components/node-view/node-view.scss

@@ -172,20 +172,24 @@ body.modal-open {
 /* All levels of nav */
 .dashboard-sidebar .nav > li > a {
     display: block;
-    padding: 4px 20px;
+    padding: 4px 8px;
     font-size: 13px;
     font-weight: 500;
     color: #767676;
 }
 
+.dashboard-sidebar .nav > li > .nav > li > a {
+    padding: 2px 12px;
+}
+
 .dashboard-sidebar .nav > li > a > .svg-inline--fa {
     width: 20px;
     text-align: center;
 }
 
 .dashboard-sidebar .nav > li > a:hover,
 .dashboard-sidebar .nav > li > a:focus {
-    padding-left: 19px;
+    padding-left: 7px;
     color: #563d7c;
     text-decoration: none;
     background-color: transparent;
@@ -195,7 +199,7 @@ body.modal-open {
 .dashboard-sidebar .nav > .active > a,
 .dashboard-sidebar .nav > .active:hover > a,
 .dashboard-sidebar .nav > .active:focus > a {
-    padding-left: 18px;
+    padding-left: 6px;
     font-weight: bold;
     color: #563d7c;
     background-color: transparent;
@@ -211,20 +215,19 @@ body.modal-open {
 .dashboard-sidebar .nav .nav > li > a {
     padding-top: 1px;
     padding-bottom: 1px;
-    padding-left: 30px;
     font-size: 12px;
     font-weight: normal;
 }
 
 .dashboard-sidebar .nav .nav > li > a:hover,
 .dashboard-sidebar .nav .nav > li > a:focus {
-    padding-left: 29px;
+    padding-left: 11px;
 }
 
 .dashboard-sidebar .nav .nav > .active > a,
 .dashboard-sidebar .nav .nav > .active:hover > a,
 .dashboard-sidebar .nav .nav > .active:focus > a {
-    padding-left: 28px;
+    padding-left: 6px;
     font-weight: 500;
 }