fix(header): reset subnav state on page change + position fixed

reset subnav state on page change. Plus added a hook into the burger menu toggle event so parent app
can do things like lock the page scroll when nav is open. Also changed back to position fixed for
more stable sticky behaviour

BREAKING CHANGE: Header changed from position sticky to position fixed

HEYUI-365

packages/header/src/Header.tsx

@@ -42,6 +42,7 @@ const Header = React.forwardRef<HTMLElement, HeaderProps>(
       locale = DEFAULT_LOCALE,
       logoHref,
       navigation,
+      onToggleBurgerMenu,
       searchItemConfig,
       trackingFn,
     },
@@ -54,10 +55,20 @@ const Header = React.forwardRef<HTMLElement, HeaderProps>(
     );
     const [isSearchOpen, setIsSearchOpen] = useState(false);
 
+    const toggleBurgerMenu = (isOpen: boolean) => {
+      setIsNavTrayOpen(isOpen);
+      if (typeof onToggleBurgerMenu === 'function') onToggleBurgerMenu(isOpen);
+    };
+
+    const resetMenuState = () => {
+      setActiveNavItem(undefined);
+      toggleBurgerMenu(false);
+    };
+
     const { itemOnClick } = useNavigationItem(
       activeNavItem,
       setActiveNavItem,
-      setIsNavTrayOpen,
+      resetMenuState,
     );
 
     // Link component
@@ -300,7 +311,7 @@ const Header = React.forwardRef<HTMLElement, HeaderProps>(
                         action: isNavTrayOpen ? 'close' : 'open',
                       },
                     },
-                    () => setIsNavTrayOpen(!isNavTrayOpen),
+                    () => toggleBurgerMenu(!isNavTrayOpen),
                     false,
                   )
                 }

packages/header/src/Header.types.ts

@@ -205,6 +205,10 @@ interface HeaderProps {
    * Data representing the nav and sub nav
    */
   navigation: NavItem[];
+  /**
+   * Event called when the burger menu is open or closed. Intended to be used by the parent app to block scrolling while burger menu is open
+   */
+  onToggleBurgerMenu?: (isOpen: boolean) => void;
 }
 
 export { HeaderLinkProps, HeaderTrackingObj, HeaderProps, LangOption, Locale };

packages/header/src/__tests__/Header.test.tsx

@@ -255,6 +255,21 @@ describe('Header', () => {
 
       expect(accountFn).toBeCalledTimes(1);
     });
+
+    it('calls passed onToggleBurgerMenu event when clicking burger menu toggle', () => {
+      const onToggleBurgerMenuFn = jest.fn();
+      const { getByRole } = render(
+        <Header
+          {...defaultData}
+          dataTestId={dataTestId}
+          onToggleBurgerMenu={onToggleBurgerMenuFn}
+        />,
+      );
+
+      fireEvent.click(getByRole('button', { name: 'Navigation menu' }));
+
+      expect(onToggleBurgerMenuFn).toBeCalledWith(true);
+    });
   });
 
   /**

packages/header/src/__tests__/useNavigationItem.test.tsx

@@ -144,20 +144,20 @@ describe('useNavigationItem', () => {
       expect(onClickCB).toHaveBeenCalledTimes(2);
     });
 
-    it('calls setIsNavTrayOpen with false after calling itemOnClick', () => {
+    it('calls resetMenuState after calling itemOnClick', () => {
       const newLabel = 'Test 2';
 
-      const setIsNavTrayOpen = jest.fn();
+      const resetMenuState = jest.fn();
       const { result } = renderHook(() =>
-        useNavigationItem('test', setActiveNavItem, setIsNavTrayOpen),
+        useNavigationItem('test', setActiveNavItem, resetMenuState),
       );
 
       result.current.itemOnClick({
         fn: trackingFn,
         obj: { label: newLabel },
       });
 
-      expect(setIsNavTrayOpen).toBeCalledWith(false);
+      expect(resetMenuState).toBeCalledWith();
     });
 
     it('doesnt call setIsNavTrayOpen after calling itemOnClick if closeMenu is set to false', () => {

packages/header/src/hooks/useNavigationItem.ts

@@ -6,7 +6,7 @@ import { HeaderTrackingObj } from '../Header.types';
 const useNavigationItem = (
   activeNavItem: string | undefined,
   setActiveNavItem: (id: string | undefined) => void,
-  setIsNavTrayOpen?: (state: boolean) => void,
+  resetMenuState?: () => void,
 ) => {
   const toggleSubNav = useCallback(
     (id: string, isActive: boolean, force?: boolean) => {
@@ -46,7 +46,7 @@ const useNavigationItem = (
     onClick?: () => void,
     closeMenu = true,
   ) => {
-    if (closeMenu && setIsNavTrayOpen) setIsNavTrayOpen(false);
+    if (closeMenu && resetMenuState) resetMenuState();
     if (track && typeof track?.fn === 'function')
       track.fn({ ...headerClickTracking, ...track.obj } as HeaderTrackingObj);
     if (typeof onClick === 'function') onClick();

packages/header/src/styles/default.module.css

@@ -4,11 +4,11 @@
 * Base
 */
 .header {
-  position: sticky;
+  position: fixed;
   top: 0;
   left: 0;
   z-index: 100;
-  overflow-x: hidden;
+  overflow: hidden;
   width: 100%;
   height: 64px;
 
@@ -25,7 +25,7 @@
 
   @media (--tablet-l) {
     height: auto;
-    overflow-x: visible;
+    overflow: visible;
   }
 
   @media (--desktop) {