Add dropdown to navigation links

- add download page
- move main pages tests to their own folder
- add download and public eng snapshot test
- remove public engagement button on each page
- swap index with cejst
- update cypress ENDPOINTS
- upate gatsby-config sitemap
- update snapshots
- cypress tests are failing

client/src/components/J40Header/J40Header.tsx

@@ -6,6 +6,8 @@ import {
   PrimaryNav,
   Grid,
   Alert,
+  NavDropDownButton,
+  Menu,
 } from '@trussworks/react-uswds';
 import BetaBanner from '../BetaBanner';
 import J40MainGridContainer from '../J40MainGridContainer';
@@ -21,29 +23,34 @@ const isAlertValid = new Date < COMMON_COPY.ALERTS.EXPIRATION_DATE;
 
 const J40Header = () => {
   const intl = useIntl();
-  const [mobileNavOpen, setMobileNavOpen] = useState(false);
 
   const titleL1 = intl.formatMessage(COMMON_COPY.HEADER.TITLE_LINE_1);
   const titleL2 = intl.formatMessage(COMMON_COPY.HEADER.TITLE_LINE_2);
 
+  /**
+   * State variable to control the mobile menu toggle
+   */
+  const [mobileNavOpen, setMobileNavOpen] = useState(false);
   const toggleMobileNav = (): void =>
     setMobileNavOpen((prevOpen) => !prevOpen);
 
-  const navLinks = [
-    <Link
-      to={'/'}
-      key={'about'}
-      activeClassName="usa-current"
-      data-cy={'nav-link-about'}>
-      {intl.formatMessage(COMMON_COPY.HEADER.ABOUT)}
-    </Link>,
-    <Link
-      to={'/cejst'}
-      key={'cejst'}
-      activeClassName="usa-current"
-      data-cy={'nav-link-explore-the-tool'}>
-      {intl.formatMessage(COMMON_COPY.HEADER.EXPLORE)}
-    </Link>,
+  /**
+   * State variable to hold the open/close state of each nav dropdown. There are currently two
+   * dropdowns that are being used, each corresponding to an index in the state array:
+   *
+   * index 0 = Data & Methodology dropdown
+   * index 1 = About dropdown
+   */
+  const [isOpen, setIsOpen] = useState([false, false]);
+  const onToggle = (index: number): void => {
+    setIsOpen((prevIsOpen) => {
+      const newIsOpen = [false, false];
+      newIsOpen[index] = !prevIsOpen[index];
+      return newIsOpen;
+    });
+  };
+
+  const methPageSubNavLinks = [
     <Link
       to={'/methodology'}
       key={'methodology'}
@@ -51,6 +58,90 @@ const J40Header = () => {
       data-cy={'nav-link-methodology'}>
       {intl.formatMessage(COMMON_COPY.HEADER.METHODOLOGY)}
     </Link>,
+    <Link
+      to={'/downloads'}
+      key={'downloads'}
+      activeClassName="usa-current"
+      data-cy={'nav-link-downloads'}>
+      {intl.formatMessage(COMMON_COPY.HEADER.DOWNLOADS)}
+    </Link>,
+    <Link
+      to={'/technical-support-docs'}
+      key={'tsd'}
+      activeClassName="usa-current"
+      data-cy={'nav-link-technical-support-docs'}>
+      {intl.formatMessage(COMMON_COPY.HEADER.TSD)}
+    </Link>,
+  ];
+
+  const aboutSubNavLinks = [
+    <Link
+      to={'/about'}
+      key={'about'}
+      activeClassName="usa-current"
+      data-cy={'nav-link-about'}>
+      {intl.formatMessage(COMMON_COPY.HEADER.ABOUT)}
+    </Link>,
+    <Link
+      to={'/faqs'}
+      key={'faqs'}
+      activeClassName="usa-current"
+      data-cy={'nav-link-faqs'}>
+      {intl.formatMessage(COMMON_COPY.HEADER.FAQs)}
+    </Link>,
+    <Link
+      to={'/public-engagement'}
+      key={'publicEng'}
+      activeClassName="usa-current"
+      data-cy={'nav-link-public-engagement'}>
+      {intl.formatMessage(COMMON_COPY.HEADER.PUBLIC_ENG)}
+    </Link>,
+  ];
+
+  const navLinks = [
+    <Link
+      to={'/'}
+      key={'explore-tool'}
+      activeClassName="usa-current"
+      data-cy={'nav-link-explore-the-tool'}>
+      {intl.formatMessage(COMMON_COPY.HEADER.EXPLORE)}
+    </Link>,
+    <>
+      <NavDropDownButton
+        key="methDropDown"
+        label={intl.formatMessage(COMMON_COPY.HEADER.METHODOLOGY)}
+        menuId="methMenu"
+        isOpen={isOpen[0]}
+        onToggle={(): void => onToggle(0)}
+        data-cy={'nav-dropdown-methodology'}
+      >
+      </NavDropDownButton>
+      <Menu
+        id='methMenu'
+        type='subnav'
+        items={methPageSubNavLinks}
+        isOpen={isOpen[0]}
+      >
+      </Menu>
+    </>,
+    <>
+      <NavDropDownButton
+        key="aboutDropDown"
+        label={intl.formatMessage(COMMON_COPY.HEADER.ABOUT)}
+        menuId="aboutMenu"
+        isOpen={isOpen[1]}
+        onToggle={(): void => onToggle(1)}
+        data-cy={'nav-dropdown-about'}
+      >
+      </NavDropDownButton>
+      <Menu
+        id='aboutMenu'
+        type='subnav'
+        items={aboutSubNavLinks}
+        isOpen={isOpen[1]}
+      >
+      </Menu>
+    </>,
     <Link
       to={'/contact'}
       key={'contact'}
@@ -93,6 +184,7 @@ const J40Header = () => {
 
           {/* Nav links */}
           <Grid col={'fill'} className={styles.navLinks}>
+
             <NavMenuButton
               key={'mobileMenuButton'}
               onClick={toggleMobileNav}
@@ -102,7 +194,8 @@ const J40Header = () => {
               items={navLinks}
               mobileExpanded={mobileNavOpen}
               onToggleMobileNav={toggleMobileNav}
-            />
+            >
+            </PrimaryNav>
           </Grid>
 
         </Grid>