[Art/97602] - update ARP header

src/applications/accredited-representative-portal/app-entry.jsx

@@ -10,6 +10,7 @@ import { connectFeatureToggle } from 'platform/utilities/feature-toggles';
 import './sass/accredited-representative-portal.scss';
 import './sass/POARequestCard.scss';
 import './sass/POARequestDetails.scss';
+import './sass/Header.scss';
 
 import manifest from './manifest.json';
 import router from './routes';

src/applications/accredited-representative-portal/components/common/Header/Header.jsx

@@ -1,15 +1,12 @@
 import React from 'react';
-
-import MobileHeader from './MobileHeader/MobileHeader';
-import WiderThanMobileHeader from './WiderThanMobileHeader/WiderThanMobileHeader';
-
-import './Header.scss';
+import OfficialGovtWebsite from './OfficialGovtWebsite';
+import Navigation from './Navigation';
 
 const Header = () => {
   return (
-    <header data-testid="arp-header" className="header arp-header">
-      <MobileHeader />
-      <WiderThanMobileHeader />
+    <header data-testid="arp-header" className="header">
+      <OfficialGovtWebsite />
+      <Navigation />
     </header>
   );
 };

src/applications/accredited-representative-portal/components/common/Header/Navigation.jsx

@@ -0,0 +1,63 @@
+import React, { useContext } from 'react';
+import { Link } from 'react-router-dom';
+import UserNav from './UserNav';
+import UserContext from '../../../userContext';
+
+export const Navigation = () => {
+  const user = useContext(UserContext);
+  const profile = user?.profile;
+
+  return (
+    <nav className="nav vads-u-background-color--primary-darker ">
+      <div className="nav__container vads-u-display--flex">
+        <Link
+          data-testid="nav-home-link"
+          aria-label="VA logo"
+          className="nav__link vads-u-display--flex"
+          to="/"
+        >
+          <img
+            data-testid="mobile-logo"
+            className="nav__logo mobile"
+            src="/img/va.svg"
+            alt="Veteran Affairs logo"
+          />
+          <span className="nav__logo-text mobile">
+            Accredited Representative Portal
+          </span>
+          <img
+            data-testid="desktop-logo"
+            className="nav__logo nav__logo--desktop desktop"
+            src="/img/arp-header-logo.png"
+            alt="VA Accredited Representative Portal Logo, U.S. Department of Veterans Affairs"
+          />
+        </Link>
+        <UserNav profile={profile} isLoading={false} />
+      </div>
+      <span
+        aria-hidden="true"
+        className={
+          profile ? 'nav__decorator nav__decorator--login' : 'nav__decorator'
+        }
+      />
+      {profile && (
+        <div className="nav__container vads-u-display--flex">
+          <Link
+            className="usa-button nav__user-btn nav__user-btn--user desktop"
+            to="/poa-requests"
+          >
+            POA requests
+          </Link>
+          <Link
+            to="/get-help"
+            className="usa-button nav__user-btn nav__user-btn--user desktop"
+          >
+            Get Help
+          </Link>
+        </div>
+      )}
+    </nav>
+  );
+};
+
+export default Navigation;

src/applications/accredited-representative-portal/components/common/Header/NavigationDropdown.jsx

@@ -0,0 +1,91 @@
+import React, { useState, useRef, useEffect } from 'react';
+import PropTypes from 'prop-types';
+
+const NavigationDropdown = ({
+  btnText,
+  icon,
+  className,
+  name,
+  iconClassName,
+  secondaryIcon,
+  srText,
+  children,
+  dataTestId,
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const toggleDropdown = () => {
+    setIsOpen(!isOpen);
+  };
+  const dropdownRef = useRef(null);
+  useEffect(
+    () => {
+      const handleClickOutside = event => {
+        if (
+          dropdownRef.current &&
+          !dropdownRef.current.contains(event.target)
+        ) {
+          setIsOpen(false);
+        }
+      };
+
+      if (isOpen) {
+        document.addEventListener('mousedown', handleClickOutside);
+      }
+
+      return () => {
+        document.removeEventListener('mousedown', handleClickOutside);
+      };
+    },
+    [isOpen],
+  );
+  return (
+    <div className="va-dropdown" ref={dropdownRef}>
+      {/* eslint-disable-next-line @department-of-veterans-affairs/prefer-button-component */}
+      <button
+        data-testid={`${icon}-toggle-dropdown`}
+        className={className}
+        aria-controls={icon}
+        aria-expanded={isOpen}
+        onClick={toggleDropdown}
+        type="button"
+      >
+        {btnText}
+        <va-icon
+          icon={icon}
+          size={2}
+          srtext={srText}
+          class="nav__user-btn-icon"
+        />
+        <span data-testid={dataTestId}>{name}</span>
+        {secondaryIcon && (
+          <va-icon
+            icon={secondaryIcon}
+            size={2}
+            srtext={srText}
+            class={iconClassName}
+          />
+        )}
+      </button>
+      {isOpen && (
+        <div className="va-dropdown-panel  nav__dropdown" id={icon}>
+          <ul className="nav__user-list">{children}</ul>
+        </div>
+      )}
+    </div>
+  );
+};
+
+NavigationDropdown.propTypes = {
+  btnText: PropTypes.string,
+  children: PropTypes.object,
+  className: PropTypes.string,
+  dataTestId: PropTypes.string,
+  icon: PropTypes.string,
+  iconClassName: PropTypes.string,
+  name: PropTypes.string,
+  secondaryIcon: PropTypes.string,
+  srText: PropTypes.string,
+};
+
+export default NavigationDropdown;