changes

CDCgov · Nov 19, 2024 · f40a742 · f40a742
1 parent 1e9f289
commit f40a742
Show file tree

Hide file tree

Showing 2 changed files with 55 additions and 31 deletions.
diff --git a/src/app/components/Header/Header.module.scss b/src/app/components/Header/Header.module.scss
@@ -17,10 +17,7 @@
   &::before {
     content: '';
     position: absolute;
-    top: -20%;
-    left: -10%;
-    right: -10%;
-    bottom: 0;
+    inset: -20% -10% 0;
     background: linear-gradient(
         90deg,
         rgba(76, 43, 100, 0.85) 12%,
@@ -35,15 +32,27 @@
   }
 
   :global {
-    .usa-navbar {
+    .usa-navbar,
+    .usa-hero {
       position: relative;
       z-index: 1;
     }
   }
-
   section h1,
   section p {
-    z-index: 1;
     color: white;
+    z-index: 1;
   }
 }
+
+.navbarLogoText {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
diff --git a/src/app/components/Header/Header.tsx b/src/app/components/Header/Header.tsx
@@ -1,21 +1,21 @@
 'use client';
+import { useState } from 'react';
 import { Header as USWDSHeader, PrimaryNav } from '@trussworks/react-uswds';
 import Image from 'next/image';
-import React from 'react';
+import { usePathname } from 'next/navigation';
 import classNames from 'classnames';
+import styles from './Header.module.scss';
 import { basePath } from '../../utils/constants';
 import { NavigationLink } from '../NavigationLink/NavigationLink';
-import styles from './Header.module.scss';
 import Hero from '../Hero/Hero';
-import { usePathname } from 'next/navigation';
 
 interface HeroContent {
   heroClass?: string;
   heroHeader: string;
   heroSubheader: string;
 }
 
-type SpecialContent = Record<string, HeroContent | undefined>;
+type SpecialContent = Record<string, HeroContent>;
 
 const specialContent: SpecialContent = {
   '/': {
@@ -28,44 +28,57 @@ const specialContent: SpecialContent = {
   },
 };
 
+const navigationItems = [
+  {
+    key: 'products',
+    href: '/our-products',
+    text: 'Our products',
+  },
+  {
+    key: 'case-studies',
+    href: '/case-studies',
+    text: 'Case studies',
+  },
+  {
+    key: 'engage',
+    href: '/engage-with-us',
+    text: 'Engage with us',
+  },
+];
+
 export default function Header() {
   const pathname = usePathname();
   const customContent = specialContent[pathname];
+  const [expanded, setExpanded] = useState(false);
 
-  const [expanded, setExpanded] = React.useState(false);
-  const onClick = () => {
-    if (window.innerWidth < 1024) setExpanded((prvExpanded) => !prvExpanded);
+  const handleClick = () => {
+    if (window.innerWidth < 1024) {
+      setExpanded((prev) => !prev);
+    }
   };
 
-  const testItemsMenu = [
-    <NavigationLink key="one" href="/our-products" onClick={onClick}>
-      Our products
-    </NavigationLink>,
-    <NavigationLink key="two" href="/case-studies" onClick={onClick}>
-      Case studies
-    </NavigationLink>,
-    <NavigationLink key="three" href="/engage-with-us" onClick={onClick}>
-      Engage with us
-    </NavigationLink>,
-  ];
+  const navigationLinks = navigationItems.map(({ key, href, text }) => (
+    <NavigationLink key={key} href={href} onClick={handleClick}>
+      {text}
+    </NavigationLink>
+  ));
 
   return (
     <div
       className={classNames(
-        customContent?.heroClass ? styles[customContent.heroClass] : '',
-        customContent?.heroClass,
+        customContent?.heroClass && styles[customContent.heroClass],
       )}
     >
       <a className="usa-skipnav" href="#main-content">
         Skip to main content
       </a>
 
-      <USWDSHeader basic={true} className="bg-background-teal">
+      <USWDSHeader basic className="bg-background-teal">
         <div className="usa-nav-container flex-vertical-center">
           <div className="usa-navbar">
             <div className="usa-logo">
               <em className="usa-logo__text">
-                <a href={`${basePath}/`} title="<Project title>">
+                <a href={`${basePath}/`} title="DIBBs">
                   <span
                     className={classNames('sr-only', styles.navbarLogoText)}
                   >
@@ -77,6 +90,7 @@ export default function Header() {
                     alt=""
                     className="margin-x-0"
                     src={`${basePath}/images/dibbs-logo.svg`}
+                    priority
                   />
                 </a>
               </em>
@@ -86,12 +100,13 @@ export default function Header() {
             </button>
           </div>
           <PrimaryNav
-            items={testItemsMenu}
+            items={navigationLinks}
             mobileExpanded={expanded}
-            onToggleMobileNav={onClick}
+            onToggleMobileNav={handleClick}
           />
         </div>
       </USWDSHeader>
+
       {customContent && (
         <Hero
           header={customContent.heroHeader}