Update header for additional pages

app/components/HomeHeader.js

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState } from "react";
+import { usePathname } from "next/navigation";
 import Logo from "./Logo";
 import MenuBar from "./MenuBar";
 import MenuBarItem from "./MenuBarItem";
@@ -8,10 +8,9 @@ import Button from "./Button";
 import AvatarContainer from "./AvatarContainer";
 import Avatar from "./Avatar";
 import HeaderTab from "./HeaderTab";
-import Header from "./Header";
 
 export default function HomeHeader() {
-  const [showRegularHeader, setShowRegularHeader] = useState(false);
+  const pathname = usePathname();
 
   // Schema markup for site navigation (home page specific)
   const schemaData = {
@@ -79,10 +78,10 @@ export default function HomeHeader() {
             ? size === "home" || size === "homeMd"
               ? "homeMd"
               : size === "large"
-                ? "large"
-                : size === "homeXlarge"
-                  ? "homeXlarge"
-                  : "xsmallUseCases"
+              ? "large"
+              : size === "homeXlarge"
+              ? "homeXlarge"
+              : "xsmallUseCases"
             : size
         }
         variant={
@@ -95,7 +94,7 @@ export default function HomeHeader() {
             ? "home"
             : "default"
         }
-        onClick={() => setShowRegularHeader(!showRegularHeader)}
+        isActive={pathname === item.href}
         ariaLabel={`Navigate to ${item.text} page`}
       >
         {item.text}
@@ -148,10 +147,6 @@ export default function HomeHeader() {
     return <Logo size={size} showText={showText} />;
   };
 
-  if (showRegularHeader) {
-    return <Header onToggle={() => setShowRegularHeader(false)} />;
-  }
-
   return (
     <>
       <script