Update header for additional pages

app/components/Header.js

@@ -1,3 +1,6 @@
+"use client";
+
+import { usePathname } from "next/navigation";
 import Logo from "./Logo";
 import MenuBar from "./MenuBar";
 import MenuBarItem from "./MenuBarItem";
@@ -35,7 +38,9 @@ export const logoConfig = [
   { breakpoint: "hidden xl:block", size: "headerXl", showText: true },
 ];
 
-export default function Header({ onToggle }) {
+export default function Header() {
+  const pathname = usePathname();
+
   // Schema markup for site navigation
   const schemaData = {
     "@context": "https://schema.org",
@@ -55,7 +60,7 @@ export default function Header({ onToggle }) {
         key={index}
         href={item.href}
         size={item.extraPadding && size === "xsmall" ? "xsmallUseCases" : size}
-        onClick={onToggle}
+        isActive={pathname === item.href}
         ariaLabel={`Navigate to ${item.text} page`}
       >
         {item.text}
@@ -109,7 +114,7 @@ export default function Header({ onToggle }) {
         dangerouslySetInnerHTML={{ __html: JSON.stringify(schemaData) }}
       />
       <header
-        className="bg-[var(--color-surface-default-primary)] w-full border-b border-[var(--border-color-default-tertiary)]"
+        className="sticky top-0 z-50 bg-[var(--color-surface-default-primary)] w-full border-b border-[var(--border-color-default-tertiary)]"
         role="banner"
         aria-label="Main navigation header"
       >

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"
+              ? "large"
-                : size === "homeXlarge"
+              : size === "homeXlarge"
-                  ? "homeXlarge"
+              ? "homeXlarge"
-                  : "xsmallUseCases"
+              : "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

app/components/MenuBarItem.js

@@ -5,6 +5,7 @@ export default function MenuBarItem({
   size = "default",
   className = "",
   disabled = false,
+  isActive = false,
   ariaLabel,
   ...props
 }) {
@@ -56,6 +57,27 @@ export default function MenuBarItem({
       "active:outline-2 active:outline-[var(--color-content-default-primary)] focus:outline-2 focus:outline-[var(--color-content-default-primary)]",
   };
 
+  const activeStateStyles = {
+    xsmall:
+      "!outline-1 !outline-[var(--color-content-default-brand-primary)] !text-[var(--color-content-default-brand-primary)] focus:!outline-1 focus:!outline-[var(--color-content-default-brand-primary)]",
+    xsmallUseCases:
+      "!outline-1 !outline-[var(--color-content-default-brand-primary)] !text-[var(--color-content-default-brand-primary)] focus:!outline-1 focus:!outline-[var(--color-content-default-brand-primary)]",
+    default:
+      "!outline-[1.5px] !outline-[var(--color-content-default-brand-primary)] !text-[var(--color-content-default-brand-primary)] focus:!outline-[1.5px] focus:!outline-[var(--color-content-default-brand-primary)]",
+    homeMd:
+      "!outline-[1.5px] !outline-[var(--color-content-default-brand-primary)] !text-[var(--color-content-default-brand-primary)] focus:!outline-[1.5px] focus:!outline-[var(--color-content-default-brand-primary)]",
+    homeUseCases:
+      "!outline-[1.5px] !outline-[var(--color-content-default-brand-primary)] !text-[var(--color-content-default-brand-primary)] focus:!outline-[1.5px] focus:!outline-[var(--color-content-default-brand-primary)]",
+    large:
+      "!outline-[1.75px] !outline-[var(--color-content-default-brand-primary)] !text-[var(--color-content-default-brand-primary)] focus:!outline-[1.75px] focus:!outline-[var(--color-content-default-brand-primary)]",
+    largeUseCases:
+      "!outline-[1.75px] !outline-[var(--color-content-default-brand-primary)] !text-[var(--color-content-default-brand-primary)] focus:!outline-[1.75px] focus:!outline-[var(--color-content-default-brand-primary)]",
+    homeXlarge:
+      "!outline-[2px] !outline-[var(--color-content-default-brand-primary)] !text-[var(--color-content-default-brand-primary)] focus:!outline-[2px] focus:!outline-[var(--color-content-default-brand-primary)]",
+    xlarge:
+      "!outline-2 !outline-[var(--color-content-default-brand-primary)] !text-[var(--color-content-default-brand-primary)] focus:!outline-2 focus:!outline-[var(--color-content-default-brand-primary)]",
+  };
+
   const sizeStyles = {
     default:
       "px-[var(--spacing-measures-spacing-016)] py-[var(--spacing-measures-spacing-016)] gap-[var(--spacing-scale-004)]",
@@ -110,7 +132,7 @@ export default function MenuBarItem({
     finalVariant === "home"
       ? homeOutlineStyles[size]
       : activeOutlineStyles[size]
-  } ${className}`;
+  } ${isActive ? activeStateStyles[size] : ""} ${className}`;
 
   const accessibilityProps = {
     ...(ariaLabel && { "aria-label": ariaLabel }),