From 52ad091c057f0f4e77ae2ac317d7fae4557d4e51 Mon Sep 17 00:00:00 2001 From: CalebSLane Date: Tue, 30 Jul 2024 13:39:33 -0700 Subject: [PATCH 1/6] add back fixes that don't interfere else where for menu not behaving correctly --- frontend/src/components/Style.css | 11 ++- frontend/src/components/layout/Header.js | 112 +++++++++++------------ 2 files changed, 64 insertions(+), 59 deletions(-) diff --git a/frontend/src/components/Style.css b/frontend/src/components/Style.css index 21b271161..d1f629f5b 100644 --- a/frontend/src/components/Style.css +++ b/frontend/src/components/Style.css @@ -498,13 +498,18 @@ button { padding-left: 1rem !important; } -.cds--side-nav__link:hover { +.top-level-menu-item > a { + pointer-events: auto !important; + text-decoration: none !important; +} + +.top-level-menu-item > a:hover { background-color: var(--cds-background-hover, #072655); } -/* .cds--side-nav__link { +#mainHeader .cds--side-nav__link { pointer-events: none -} */ +} @media screen and (max-width: 792px) { .banner h5 { diff --git a/frontend/src/components/layout/Header.js b/frontend/src/components/layout/Header.js index aa41f26d5..28a0e619c 100644 --- a/frontend/src/components/layout/Header.js +++ b/frontend/src/components/layout/Header.js @@ -192,6 +192,7 @@ function OEHeader(props) { }} > { - setMenuItemExpanded(e, menuItem, path); - }} + // onClick={(e) => { // 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); + // }} > - {menuItem.childMenus.map((childMenuItem, index) => { - return generateMenuItems( - childMenuItem, - index, - level + 1, - path + ".childMenus[" + index + "]", - ); - })} + { + e.preventDefault(); + e.stopPropagation(); + }} + > + {menuItem.childMenus.map((childMenuItem, index) => { + return generateMenuItems( + childMenuItem, + index, + level + 1, + path + ".childMenus[" + index + "]", + ); + })} + @@ -223,6 +231,7 @@ function OEHeader(props) { id={menuItem.menu.elementId} href={menuItem.menu.actionURL} target={menuItem.menu.openInNewWindow ? "_blank" : ""} + className="top-level-menu-item" > {renderSideNavMenuItemLabel(menuItem, level)} @@ -231,7 +240,14 @@ function OEHeader(props) { } else { return ( - + {!menuItem.menu.actionURL && !hasActiveChildMenu(menuItem) && @@ -284,27 +300,19 @@ function OEHeader(props) { const renderSingleNavButton = (menuItem, index, level, path) => { const marginValue = (level - 1) * 0.5 + "rem"; return ( - { + if (menuItem.menu.openInNewWindow) { + window.open(menuItem.menu.actionURL); + } else { + window.location.href = menuItem.menu.actionURL; + } + }} > - - + {renderSideNavMenuItemLabel(menuItem, level)} + ); }; @@ -329,31 +337,23 @@ function OEHeader(props) { const marginValue = (level - 1) * 0.5 + "rem"; return ( <> - - - + }} + > + {renderSideNavMenuItemLabel(menuItem, level)} + {menuItem.childMenus.length > 0 && (