remove underline from footer nav items

CDCgov · Dec 10, 2024 · d4e0c51 · d4e0c51
1 parent a574e24
commit d4e0c51
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 7 deletions.
diff --git a/src/app/components/Footer/Footer.tsx b/src/app/components/Footer/Footer.tsx
@@ -13,17 +13,32 @@ export default function Footer() {
     if (window.innerWidth < 1024) setExpanded((prvExpanded) => !prvExpanded);
   };
 
-  const testItemsMenu = [
-    <NavigationLink key="one" href="/" onClick={onClick}>
+  const footerMenu = [
+    <NavigationLink key="one" href="/" onClick={onClick} showActive={false}>
       Home
     </NavigationLink>,
-    <NavigationLink key="two" href="/products" onClick={onClick}>
+    <NavigationLink
+      key="two"
+      href="/products"
+      onClick={onClick}
+      showActive={false}
+    >
       Our products
     </NavigationLink>,
-    <NavigationLink key="three" href="/case-studies" onClick={onClick}>
+    <NavigationLink
+      key="three"
+      href="/case-studies"
+      onClick={onClick}
+      showActive={false}
+    >
       Case studies
     </NavigationLink>,
-    <NavigationLink key="four" href="/engage-with-us" onClick={onClick}>
+    <NavigationLink
+      key="four"
+      href="/engage-with-us"
+      onClick={onClick}
+      showActive={false}
+    >
       Engage with us
     </NavigationLink>,
   ];
@@ -56,7 +71,7 @@ export default function Footer() {
             </div>
           </div>
           <PrimaryNav
-            items={testItemsMenu}
+            items={footerMenu}
             mobileExpanded={expanded}
             onToggleMobileNav={onClick}
           />

diff --git a/src/app/components/NavigationLink/NavigationLink.tsx b/src/app/components/NavigationLink/NavigationLink.tsx
@@ -4,12 +4,14 @@ import { usePathname } from 'next/navigation';
 
 interface NavigationLinkProps extends Pick<LinkProps, 'href' | 'onClick'> {
   children: React.ReactNode;
+  showActive?: boolean;
 }
 
 export function NavigationLink({
   href,
   children,
   onClick,
+  showActive = true,
 }: NavigationLinkProps) {
   const isActive = useIsActive(href);
 
@@ -24,7 +26,7 @@ export function NavigationLink({
         className={classNames(
           "lg:text-l font-['Public Sans'] font-bold leading-7 lg:text-white",
           {
-            'underline underline-offset-8': isActive,
+            'underline underline-offset-8': isActive && showActive,
           },
         )}
       >