From 2d5e602b2d1e21232d09c6ef66cba7fbcecfcb55 Mon Sep 17 00:00:00 2001
From: Ashley Harrison <ashley.harrison@grafana.com>
Date: Wed, 1 Nov 2023 11:56:58 +0000
Subject: [PATCH] Navigation: Minor tweak to `dockedMegaMenu` to make it
 slightly tighter (#77493)

minor tweak to dockedMegaMenu to make it slightly tighter
---
 .../AppChrome/DockedMegaMenu/MegaMenuItem.tsx       | 13 +++++++++----
 .../AppChrome/DockedMegaMenu/MegaMenuItemText.tsx   |  1 -
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/public/app/core/components/AppChrome/DockedMegaMenu/MegaMenuItem.tsx b/public/app/core/components/AppChrome/DockedMegaMenu/MegaMenuItem.tsx
index 4801007f4b9..afe44fded86 100644
--- a/public/app/core/components/AppChrome/DockedMegaMenu/MegaMenuItem.tsx
+++ b/public/app/core/components/AppChrome/DockedMegaMenu/MegaMenuItem.tsx
@@ -63,7 +63,7 @@ export function MegaMenuItem({ link, activeItem, level = 0, onClick }: Props) {
     <li ref={item} className={styles.listItem}>
       <div
         className={cx(styles.menuItem, {
-          [styles.hasIcon]: Boolean(level === 0 && link.icon),
+          [styles.menuItemWithIcon]: Boolean(level === 0 && link.icon),
         })}
       >
         {level !== 0 && <Indent level={level === MAX_DEPTH ? level - 1 : level} spacing={3} />}
@@ -93,6 +93,7 @@ export function MegaMenuItem({ link, activeItem, level = 0, onClick }: Props) {
             <div
               className={cx(styles.labelWrapper, {
                 [styles.hasActiveChild]: hasActiveChild,
+                [styles.labelWrapperWithIcon]: Boolean(level === 0 && link.icon),
               })}
             >
               {level === 0 && link.icon && (
@@ -141,9 +142,12 @@ const getStyles = (theme: GrafanaTheme2) => ({
     alignItems: 'center',
     gap: theme.spacing(1),
     height: theme.spacing(4),
-    paddingLeft: theme.spacing(1),
+    paddingLeft: theme.spacing(0.5),
     position: 'relative',
   }),
+  menuItemWithIcon: css({
+    paddingLeft: theme.spacing(0),
+  }),
   collapseButtonWrapper: css({
     display: 'flex',
     justifyContent: 'center',
@@ -178,9 +182,10 @@ const getStyles = (theme: GrafanaTheme2) => ({
     alignItems: 'center',
     gap: theme.spacing(2),
     minWidth: 0,
+    paddingLeft: theme.spacing(1),
   }),
-  hasIcon: css({
-    paddingLeft: theme.spacing(0),
+  labelWrapperWithIcon: css({
+    paddingLeft: theme.spacing(0.5),
   }),
   hasActiveChild: css({
     color: theme.colors.text.primary,
diff --git a/public/app/core/components/AppChrome/DockedMegaMenu/MegaMenuItemText.tsx b/public/app/core/components/AppChrome/DockedMegaMenu/MegaMenuItemText.tsx
index 910a571e2af..6510fda9a27 100644
--- a/public/app/core/components/AppChrome/DockedMegaMenu/MegaMenuItemText.tsx
+++ b/public/app/core/components/AppChrome/DockedMegaMenu/MegaMenuItemText.tsx
@@ -88,7 +88,6 @@ const getStyles = (theme: GrafanaTheme2, isActive: Props['isActive']) => ({
     display: 'flex',
     gap: '0.5rem',
     height: '100%',
-    paddingLeft: theme.spacing(1),
     width: '100%',
   }),
 });