qpp-style 9.24.3 → 9.24.4

package/components/Header/HeaderContainer.jsx

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import HeaderLogo from './HeaderLogo';
 import NotificationBanner from '../NotificationBanner';
 import GovBanner from '../GovBanner';
-
+import { useHeaderState } from './hooks';
 /**
  * Accessibility enhancement that moves focus to an element for "Skip" links
  * @param {Object} e - The native JS event
@@ -21,32 +21,41 @@ const HeaderContainer = ({
   showCancelButton,
   skipToContentId,
   isIESupportPage,
-}) => (
-  <>
-    <a
-      className="skip"
-      onClick={(e) => jumpToLink(e, `${skipToContentId || 'mainContent'}`)}
-      href={`#${skipToContentId || 'mainContent'}`}
-    >
-      Skip to content
-    </a>
-    {includeSkipToSidebar && (
+}) => {
+  const { currentOpenMenu } = useHeaderState();
+  const cssCancelBtn = showCancelButton ? 'show-cancel-button' : '';
+  const cssMenuDropdownStatus =
+    currentOpenMenu === ''
+      ? 'header-dropdown--closed'
+      : 'header-dropdown--open';
+
+  return (
+    <>
       <a
         className="skip"
-        onClick={(e) => jumpToLink(e, 'qppSidebar')}
-        href="#qppSidebar"
+        onClick={(e) => jumpToLink(e, `${skipToContentId || 'mainContent'}`)}
+        href={`#${skipToContentId || 'mainContent'}`}
       >
-        Skip to sidebar
+        Skip to content
       </a>
-    )}
-    <GovBanner />
-    {!isIESupportPage && <NotificationBanner />}
-    <header id="top" className={showCancelButton ? 'show-cancel-button' : ''}>
-      <HeaderLogo />
-      {children}
-    </header>
-  </>
-);
+      {includeSkipToSidebar && (
+        <a
+          className="skip"
+          onClick={(e) => jumpToLink(e, 'qppSidebar')}
+          href="#qppSidebar"
+        >
+          Skip to sidebar
+        </a>
+      )}
+      <GovBanner />
+      {!isIESupportPage && <NotificationBanner />}
+      <header id="top" className={`${cssCancelBtn} ${cssMenuDropdownStatus}`}>
+        <HeaderLogo />
+        {children}
+      </header>
+    </>
+  );
+};
 
 HeaderContainer.propTypes = {
   children: PropTypes.node.isRequired,