diff --git a/app/scripts/components/common/page-header/nav/create-dynamic-nav-menu-list.tsx b/app/scripts/components/common/page-header/nav/create-dynamic-nav-menu-list.tsx index c946c349a..49d5539c7 100644 --- a/app/scripts/components/common/page-header/nav/create-dynamic-nav-menu-list.tsx +++ b/app/scripts/components/common/page-header/nav/create-dynamic-nav-menu-list.tsx @@ -12,6 +12,11 @@ export const createDynamicNavMenuList = ( isOpen?: boolean[], setIsOpen?: SetState ): JSX.Element[] => { + const setDropDownState = () => { + if (isOpen !== undefined && setIsOpen !== undefined) { + return setIsOpen(() => isOpen.fill(false)); + } + }; return navItems.map((item, index) => { switch (item.type) { case NavItemType.DROPDOWN: @@ -23,7 +28,8 @@ export const createDynamicNavMenuList = ( isOpen, setIsOpen, index, - linkProperties + linkProperties, + setDropDownState }} /> ); @@ -32,10 +38,15 @@ export const createDynamicNavMenuList = ( return ; case NavItemType.EXTERNAL_LINK: - return ; + return ( + + ); case NavItemType.ACTION: - return ; + return ; default: return <>; diff --git a/app/scripts/components/common/page-header/nav/nav-dropdown-button.tsx b/app/scripts/components/common/page-header/nav/nav-dropdown-button.tsx index f76d5f9b9..7d475e0f4 100644 --- a/app/scripts/components/common/page-header/nav/nav-dropdown-button.tsx +++ b/app/scripts/components/common/page-header/nav/nav-dropdown-button.tsx @@ -12,6 +12,7 @@ interface NavDropDownButtonProps { setIsOpen: SetState; index: number; linkProperties: LinkProperties; + setDropDownState: () => void; } export const NavDropDownButton = ({ @@ -19,7 +20,8 @@ export const NavDropDownButton = ({ isOpen, setIsOpen, index, - linkProperties + linkProperties, + setDropDownState }: NavDropDownButtonProps) => { const onToggle = (index: number, setIsOpen: SetState): void => { setIsOpen((prevIsOpen) => { @@ -47,6 +49,7 @@ export const NavDropDownButton = ({ items={submenuItems} isOpen={isOpen[index]} id={`${item.id}-dropdown`} + onClick={setDropDownState()} /> );