diff --git a/frontend/src/components/layout/Header.js b/frontend/src/components/layout/Header.js index b1692ad196..9b661146ab 100644 --- a/frontend/src/components/layout/Header.js +++ b/frontend/src/components/layout/Header.js @@ -182,8 +182,44 @@ function OEHeader(props) { setSearchBar(!searchBar); }; const generateMenuItems = (menuItem, index, level, path) => { - if (menuItem.menu.isActive) { - if (level === 0 && menuItem.childMenus.length > 0) { + if (!menuItem.menu.isActive) { + return ; + } + + const activeChildMenus = menuItem.childMenus.filter( + (child) => child.menu.isActive, + ); + + if (level === 0) { + // For top level items with exactly one active child, render direct link + if (activeChildMenus.length === 1) { + const singleChildMenu = activeChildMenus[0]; + return ( + + + + {renderSideNavMenuItemLabel(menuItem, level)} + + + + ); + } + + // Multiple active children - show dropdown + if (menuItem.childMenus.length > 0) { return ( { // not supported yet, but if it becomes so we can simplify the functionality here by having this here and not have a span around it - // setMenuItemExpanded(e, menuItem, path); - // }} > { @@ -225,7 +258,7 @@ function OEHeader(props) { ); - } else if (level === 0) { + } else { return ( ); - } else { - return ( - - - - {!menuItem.menu.actionURL && - !hasActiveChildMenu(menuItem) && - console.warn("menu entry has no action url and no child")} - {!hasActiveChildMenu(menuItem) && - renderSingleNavButton(menuItem, index, level, path)} - {!menuItem.menu.actionURL && - hasActiveChildMenu(menuItem) && - renderSingleDropdownButton(menuItem, index, level, path)} - {menuItem.menu.actionURL && - hasActiveChildMenu(menuItem) && - renderDualNavDropdownButton(menuItem, index, level, path)} - - - {menuItem.childMenus.map((childMenuItem, index) => { - return ( - - {generateMenuItems( - childMenuItem, - index, - level + 1, - path + ".childMenus[" + index + "]", - )} - - ); - })} - - ); } } else { - return ; + return ( + + + + {!menuItem.menu.actionURL && + !hasActiveChildMenu(menuItem) && + console.warn("menu entry has no action url and no child")} + {!hasActiveChildMenu(menuItem) && + renderSingleNavButton(menuItem, index, level, path)} + {!menuItem.menu.actionURL && + hasActiveChildMenu(menuItem) && + renderSingleDropdownButton(menuItem, index, level, path)} + {menuItem.menu.actionURL && + hasActiveChildMenu(menuItem) && + renderDualNavDropdownButton(menuItem, index, level, path)} + + + {menuItem.childMenus.map((childMenuItem, index) => { + return ( + + {generateMenuItems( + childMenuItem, + index, + level + 1, + path + ".childMenus[" + index + "]", + )} + + ); + })} + + ); } }; - const hasActiveChildMenu = (menuItem) => { if (menuItem.menu.elementId === "menu_reports_routine") { console.log("reports");