adilallo
c7e3048c09
CI Pipeline / test (20) (pull_request) Successful in 3m13s
CI Pipeline / test (18) (pull_request) Successful in 3m57s
CI Pipeline / e2e (firefox) (pull_request) Successful in 5m6s
CI Pipeline / e2e (webkit) (pull_request) Successful in 5m16s
CI Pipeline / e2e (chromium) (pull_request) Successful in 14m47s
CI Pipeline / performance (pull_request) Successful in 4m32s
CI Pipeline / storybook (pull_request) Successful in 1m35s
CI Pipeline / visual-regression (pull_request) Failing after 9m55s
CI Pipeline / lint (pull_request) Failing after 49s
CI Pipeline / build (pull_request) Successful in 1m48s
288 lines
8.8 KiB
TypeScript
288 lines
8.8 KiB
TypeScript
"use client";
|
|
|
|
import React, { memo } from "react";
|
|
import { usePathname } from "next/navigation";
|
|
import Logo from "./Logo";
|
|
import MenuBar from "./MenuBar";
|
|
import MenuBarItem from "./MenuBarItem";
|
|
import Button from "./Button";
|
|
import AvatarContainer from "./AvatarContainer";
|
|
import Avatar from "./Avatar";
|
|
import HeaderTab from "./HeaderTab";
|
|
|
|
const HomeHeader = memo(() => {
|
|
const pathname = usePathname();
|
|
|
|
// Schema markup for site navigation (home page specific)
|
|
const schemaData = {
|
|
"@context": "https://schema.org",
|
|
"@type": "WebSite",
|
|
name: "CommunityRule",
|
|
url: "https://communityrule.com",
|
|
description: "Build operating manuals for successful communities",
|
|
potentialAction: {
|
|
"@type": "SearchAction",
|
|
target: "https://communityrule.com/search?q={search_term_string}",
|
|
"query-input": "required name=search_term_string",
|
|
},
|
|
};
|
|
|
|
const navigationItems = [
|
|
{ href: "#", text: "Use cases", extraPadding: true },
|
|
{ href: "/learn", text: "Learn" },
|
|
{ href: "#", text: "About" },
|
|
];
|
|
|
|
const avatarImages = [
|
|
{ src: "/assets/Avatar_1.png", alt: "Avatar 1" },
|
|
{ src: "/assets/Avatar_2.png", alt: "Avatar 2" },
|
|
{ src: "/assets/Avatar_3.png", alt: "Avatar 3" },
|
|
];
|
|
|
|
const logoConfig = [
|
|
{
|
|
breakpoint: "block sm:hidden",
|
|
size: "homeHeaderXsmall" as const,
|
|
showText: false,
|
|
},
|
|
{
|
|
breakpoint: "hidden sm:block md:hidden",
|
|
size: "homeHeaderSm" as const,
|
|
showText: true,
|
|
},
|
|
{
|
|
breakpoint: "hidden md:block lg:hidden",
|
|
size: "homeHeaderMd" as const,
|
|
showText: true,
|
|
},
|
|
{
|
|
breakpoint: "hidden lg:block xl:hidden",
|
|
size: "homeHeaderLg" as const,
|
|
showText: true,
|
|
},
|
|
{
|
|
breakpoint: "hidden xl:block",
|
|
size: "homeHeaderXl" as const,
|
|
showText: true,
|
|
},
|
|
];
|
|
|
|
type NavSize =
|
|
| "default"
|
|
| "xsmall"
|
|
| "xsmallUseCases"
|
|
| "home"
|
|
| "homeMd"
|
|
| "homeUseCases"
|
|
| "large"
|
|
| "largeUseCases"
|
|
| "homeXlarge"
|
|
| "xlarge";
|
|
|
|
const renderNavigationItems = (size: NavSize) => {
|
|
return navigationItems.map((item, index) => (
|
|
<MenuBarItem
|
|
key={index}
|
|
href={item.href}
|
|
size={
|
|
item.extraPadding &&
|
|
(size === "xsmall" ||
|
|
size === "default" ||
|
|
size === "home" ||
|
|
size === "homeMd" ||
|
|
size === "large" ||
|
|
size === "homeXlarge")
|
|
? size === "home" || size === "homeMd"
|
|
? "homeMd"
|
|
: size === "large"
|
|
? "large"
|
|
: size === "homeXlarge"
|
|
? "homeXlarge"
|
|
: "xsmallUseCases"
|
|
: size
|
|
}
|
|
variant={
|
|
size === "xsmall" ||
|
|
size === "default" ||
|
|
size === "home" ||
|
|
size === "homeMd" ||
|
|
size === "large" ||
|
|
size === "homeXlarge"
|
|
? "home"
|
|
: "default"
|
|
}
|
|
isActive={pathname === item.href}
|
|
ariaLabel={`Navigate to ${item.text} page`}
|
|
>
|
|
{item.text}
|
|
</MenuBarItem>
|
|
));
|
|
};
|
|
|
|
const renderAvatarGroup = (
|
|
containerSize: "small" | "medium" | "large" | "xlarge",
|
|
avatarSize: "small" | "medium" | "large" | "xlarge",
|
|
) => {
|
|
return (
|
|
<AvatarContainer size={containerSize}>
|
|
{avatarImages.map((avatar, index) => (
|
|
<Avatar
|
|
key={index}
|
|
src={avatar.src}
|
|
alt={avatar.alt}
|
|
size={avatarSize}
|
|
/>
|
|
))}
|
|
</AvatarContainer>
|
|
);
|
|
};
|
|
|
|
const renderLoginButton = (size: NavSize) => {
|
|
return (
|
|
<MenuBarItem
|
|
href="#"
|
|
size={size}
|
|
variant={size === "xsmall" || size === "default" ? "home" : "default"}
|
|
ariaLabel="Log in to your account"
|
|
>
|
|
Log in
|
|
</MenuBarItem>
|
|
);
|
|
};
|
|
|
|
const renderCreateRuleButton = (
|
|
buttonSize: "xsmall" | "small" | "medium" | "large" | "xlarge",
|
|
containerSize: "small" | "medium" | "large" | "xlarge",
|
|
avatarSize: "small" | "medium" | "large" | "xlarge",
|
|
) => {
|
|
return (
|
|
<Button
|
|
size={buttonSize}
|
|
variant="secondary"
|
|
ariaLabel="Create a new rule with avatar decoration"
|
|
>
|
|
{renderAvatarGroup(containerSize, avatarSize)}
|
|
<span>Create rule</span>
|
|
</Button>
|
|
);
|
|
};
|
|
|
|
const renderLogo = (
|
|
size:
|
|
| "default"
|
|
| "homeHeaderXsmall"
|
|
| "homeHeaderSm"
|
|
| "homeHeaderMd"
|
|
| "homeHeaderLg"
|
|
| "homeHeaderXl"
|
|
| "header"
|
|
| "headerMd"
|
|
| "headerLg"
|
|
| "headerXl"
|
|
| "footer"
|
|
| "footerLg",
|
|
showText: boolean,
|
|
) => {
|
|
return <Logo size={size} showText={showText} />;
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<script
|
|
type="application/ld+json"
|
|
dangerouslySetInnerHTML={{ __html: JSON.stringify(schemaData) }}
|
|
/>
|
|
<header
|
|
className="w-full bg-transparent overflow-hidden"
|
|
role="banner"
|
|
aria-label="Home page navigation header"
|
|
>
|
|
<nav
|
|
className="relative flex items-center justify-between mx-auto h-[50px] sm:h-[62px] md:h-[68px] lg:h-[68px] xl:h-[88px] px-[var(--spacing-scale-008)] pr-[var(--spacing-scale-016)] pt-[var(--spacing-scale-010)] sm:px-[var(--spacing-scale-010)] sm:pr-[var(--spacing-scale-020)] sm:pt-[var(--spacing-scale-010)] md:px-[var(--spacing-scale-016)] md:pr-[var(--spacing-scale-032)] md:pt-[var(--spacing-scale-016)] lg:pl-[var(--spacing-scale-024)] lg:pt-[var(--spacing-scale-016)] lg:pr-[var(--spacing-scale-056)] xl:pl-[var(--spacing-scale-048)] xl:pt-[var(--spacing-scale-024)] xl:pr-[var(--spacing-scale-056)]"
|
|
role="navigation"
|
|
aria-label="Main navigation"
|
|
>
|
|
<HeaderTab className="flex items-center self-end" stretch={true}>
|
|
{/* Logo - Consistent left positioning within HeaderTab */}
|
|
<div>
|
|
{logoConfig.map((config, index) => (
|
|
<div key={index} className={config.breakpoint}>
|
|
{renderLogo(config.size, config.showText)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{/* XSmall menu bar - positioned next to logo */}
|
|
<div className="block sm:hidden -me-[2px]">
|
|
<MenuBar size="default">
|
|
{renderNavigationItems("xsmall")}
|
|
{renderLoginButton("xsmall")}
|
|
</MenuBar>
|
|
</div>
|
|
</HeaderTab>
|
|
|
|
{/* Navigation Links - Centered in header for SM and up */}
|
|
<div className="absolute left-1/2 transform -translate-x-1/2 hidden sm:block">
|
|
<div className="hidden sm:block md:hidden">
|
|
<MenuBar size="default">
|
|
{renderNavigationItems("xsmall")}
|
|
{renderLoginButton("xsmall")}
|
|
</MenuBar>
|
|
</div>
|
|
|
|
<div className="hidden md:block lg:hidden">
|
|
<MenuBar size="medium">{renderNavigationItems("homeMd")}</MenuBar>
|
|
</div>
|
|
|
|
<div className="hidden lg:block xl:hidden">
|
|
<MenuBar size="large">{renderNavigationItems("large")}</MenuBar>
|
|
</div>
|
|
|
|
<div className="hidden xl:block">
|
|
<MenuBar size="large">
|
|
{renderNavigationItems("homeXlarge")}
|
|
</MenuBar>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Authentication Elements - Consistent right alignment outside HeaderTab */}
|
|
<div className="flex items-center">
|
|
{/* XSmall and Small breakpoints - create rule button outside HeaderTab */}
|
|
<div className="block md:hidden">
|
|
{renderCreateRuleButton("xsmall", "small", "small")}
|
|
</div>
|
|
|
|
{/* Medium breakpoint - login outside HeaderTab, create rule outside */}
|
|
<div className="hidden md:block lg:hidden absolute right-[var(--spacing-measures-spacing-016)]">
|
|
<div className="flex items-center gap-[var(--spacing-scale-010)]">
|
|
{renderLoginButton("homeMd")}
|
|
{renderCreateRuleButton("small", "medium", "medium")}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Large breakpoint */}
|
|
<div className="hidden lg:flex xl:hidden items-center">
|
|
<div className="flex items-center gap-[var(--spacing-scale-004)]">
|
|
{renderLoginButton("large")}
|
|
{renderCreateRuleButton("large", "large", "large")}
|
|
</div>
|
|
</div>
|
|
|
|
{/* XLarge breakpoint */}
|
|
<div className="hidden xl:flex items-center">
|
|
<div className="flex items-center gap-[var(--spacing-scale-004)]">
|
|
{renderLoginButton("homeXlarge")}
|
|
{renderCreateRuleButton("xlarge", "xlarge", "xlarge")}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
</header>
|
|
</>
|
|
);
|
|
});
|
|
|
|
HomeHeader.displayName = "HomeHeader";
|
|
|
|
export default HomeHeader;
|