From f9a89e5cd231a79eea7e054f3908ab62bbd80483 Mon Sep 17 00:00:00 2001
From: Ashley Harrison <ashley.harrison@grafana.com>
Date: Mon, 23 Oct 2023 10:55:25 +0100
Subject: [PATCH] Navigation: correctly mark a `MegaMenuItem` as active if it
 has active children (#76944)

correctly mark a MegaMenuItem as active if it has active children
---
 .../core/components/AppChrome/DockedMegaMenu/MegaMenuItem.tsx   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/public/app/core/components/AppChrome/DockedMegaMenu/MegaMenuItem.tsx b/public/app/core/components/AppChrome/DockedMegaMenu/MegaMenuItem.tsx
index fdd90c06352..26ee801d35c 100644
--- a/public/app/core/components/AppChrome/DockedMegaMenu/MegaMenuItem.tsx
+++ b/public/app/core/components/AppChrome/DockedMegaMenu/MegaMenuItem.tsx
@@ -22,8 +22,8 @@ const MAX_DEPTH = 2;
 
 export function MegaMenuItem({ link, activeItem, level = 0, onClick }: Props) {
   const FeatureHighlightWrapper = link.highlightText ? FeatureHighlight : React.Fragment;
-  const isActive = link === activeItem;
   const hasActiveChild = hasChildMatch(link, activeItem);
+  const isActive = link === activeItem || (level === MAX_DEPTH && hasActiveChild);
   const [sectionExpanded, setSectionExpanded] =
     useLocalStorage(`grafana.navigation.expanded[${link.text}]`, false) ?? Boolean(hasActiveChild);
   const showExpandButton = level < MAX_DEPTH && Boolean(linkHasChildren(link) || link.emptyMessage);