CommunityRule/community-rule
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update header for additional pages

Browse Source
This commit is contained in:
adilallo
2025-09-29 13:11:50 -06:00
parent e4f3beb662
commit fa257984d6
3 changed files with 38 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/Header.js
+8 -3
View File
@@ -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
+7 -12
View File
@@ -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
app/components/MenuBarItem.js
+23 -1
View File
@@ -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 }),