[Issue 703] Menu Links (#780)

HHS · Nov 30, 2023 · 69919bc · 69919bc
1 parent fbc50d9
commit 69919bc
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 21 deletions.
diff --git a/frontend/public/locales/en/common.json b/frontend/public/locales/en/common.json
@@ -50,7 +50,8 @@
   },
   "Header": {
     "nav_link_home": "Home",
-    "nav_link_health": "Health",
+    "nav_link_process": "Process",
+    "nav_link_research": "Research",
     "nav_menu_toggle": "Menu",
     "title": "Simpler Grants.gov"
   },

diff --git a/frontend/src/components/FullWidthAlert.tsx b/frontend/src/components/FullWidthAlert.tsx
@@ -25,7 +25,11 @@ const getBGColor = (type: Props["type"]) => {
 
 const FullWidthAlert = ({ type, heading, children }: Props) => {
   return (
-    <div className={`${getBGColor(type)} tablet:position-sticky top-0 z-top`}>
+    <div
+      className={`${getBGColor(
+        type
+      )} tablet:position-sticky top-0 desktop:z-top`}
+    >
       <GridContainer className="padding-y-1 tablet-lg:padding-y-2">
         <Grid>
           <USWDSAlert

diff --git a/frontend/src/components/Header.tsx b/frontend/src/components/Header.tsx
@@ -15,12 +15,17 @@ type PrimaryLinks = {
   href: string;
 }[];
 
+const primaryLinks: PrimaryLinks = [
+  { i18nKey: "nav_link_home", href: "/" },
+  { i18nKey: "nav_link_process", href: "/process" },
+  { i18nKey: "nav_link_research", href: "/research" },
+];
+
 type Props = {
   logoPath?: string;
-  primaryLinks?: PrimaryLinks;
 };
 
-const Header = ({ logoPath, primaryLinks }: Props) => {
+const Header = ({ logoPath }: Props) => {
   const { t, i18n } = useTranslation("common", {
     keyPrefix: "Header",
   });
@@ -30,12 +35,11 @@ const Header = ({ logoPath, primaryLinks }: Props) => {
     setIsMobileNavExpanded(!isMobileNavExpanded);
   };
 
-  const navItems = primaryLinks?.map((link) => (
+  const navItems = primaryLinks.map((link) => (
     <a href={link.href} key={link.href}>
       {t(link.i18nKey)}
     </a>
   ));
-  const showMenu = !!navItems;
 
   return (
     <>
@@ -62,20 +66,16 @@ const Header = ({ logoPath, primaryLinks }: Props) => {
                 <span className="font-sans-lg flex-fill">{t("title")}</span>
               </div>
             </Title>
-            {showMenu && (
-              <NavMenuButton
-                onClick={handleMobileNavToggle}
-                label={t("nav_menu_toggle")}
-              />
-            )}
+            <NavMenuButton
+              onClick={handleMobileNavToggle}
+              label={t("nav_menu_toggle")}
+            />
           </div>
-          {navItems && (
-            <PrimaryNav
-              items={navItems}
-              mobileExpanded={isMobileNavExpanded}
-              onToggleMobileNav={handleMobileNavToggle}
-            ></PrimaryNav>
-          )}
+          <PrimaryNav
+            items={navItems}
+            mobileExpanded={isMobileNavExpanded}
+            onToggleMobileNav={handleMobileNavToggle}
+          ></PrimaryNav>
         </div>
       </USWDSHeader>
     </>

diff --git a/frontend/tests/components/Header.test.tsx b/frontend/tests/components/Header.test.tsx
@@ -28,9 +28,9 @@ describe("Header", () => {
       "href",
       "/"
     );
-    expect(screen.getByRole("link", { name: /health/i })).toHaveAttribute(
+    expect(screen.getByRole("link", { name: /process/i })).toHaveAttribute(
       "href",
-      "/health"
+      "/process"
     );
 
     await userEvent.click(menuButton);