@claralight-design/abweb-navbar 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 没有用的安龙
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/NavHeader.module.css

@@ -0,0 +1,457 @@
+.header {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    width: 100vw;
+    margin: 0 auto;
+    display: flex;
+    justify-content: center;
+    box-sizing: border-box;
+    align-items: center;
+    z-index: 1000;
+    user-select: none;
+    pointer-events: auto;
+    corner-shape: unset;
+    min-height: 72px;
+    max-height: 72px;
+}
+
+.inner {
+    width: calc(100% - 12px);
+    max-width: calc(1200px - 12px);
+    position: relative;
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr) auto;
+    align-items: center;
+    overflow: hidden;
+    padding: 3px 6px;
+    border-radius: 48px;
+    gap: 12px;
+    transform: translateY(0);
+    transition: transform 0.35s cubic-bezier(0.18, 0.86, 0.34, 1);
+    z-index: 1000;
+    pointer-events: auto;
+    min-height: 56px;
+    max-height: 56px;
+    corner-shape: unset;
+    will-change: transform;
+    box-sizing: border-box;
+}
+
+.blurEffect {
+    position: absolute;
+    inset: -10px 0 auto;
+    height: 60px;
+    width: 120vw;
+    z-index: 0;
+    pointer-events: none;
+    background:
+        linear-gradient(to bottom,
+            var(--color-main-background) 10%,
+            transparent);
+    corner-shape: unset;
+}
+
+.column {
+    display: flex;
+    justify-content: end;
+    align-items: center;
+    min-width: 0;
+    overflow: hidden;
+}
+
+.left {
+    min-width: 40px;
+    order: 3;
+}
+
+.right {
+    gap: 8px;
+}
+
+.rightSlot {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 0;
+}
+
+.centerColumn {
+    min-width: 0;
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    overflow: hidden;
+}
+
+.centerTrackWrapper {
+    min-width: 0;
+    overflow: hidden;
+    flex: 0 1 auto;
+}
+
+.track {
+    display: flex;
+    flex-direction: column;
+    will-change: transform;
+    transform: translate3d(0, 0, 0);
+}
+
+.slide {
+    min-height: 40px;
+    height: 40px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 10px;
+}
+
+.brandName {
+    color: var(--color-text);
+    font-size: 16px;
+    line-height: 1;
+    font-weight: 600;
+    white-space: nowrap;
+}
+
+.logo {
+    height: 16px;
+    width: auto;
+    display: block;
+    color: var(--color-text);
+}
+
+.logotypeWrapper {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 4px 8px;
+    border-radius: 12px;
+    transition: transform 0.25s ease, opacity 0.25s ease;
+    color: inherit;
+    text-decoration: none;
+    white-space: nowrap;
+}
+
+.logotypeWrapper:hover {
+    transform: translateY(-1px);
+    opacity: 0.92;
+}
+
+.breadcrumb {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 6px;
+    padding: 4px 0;
+    white-space: nowrap;
+    min-width: 0;
+}
+
+.title {
+    margin: 0;
+    font-size: 18px;
+    line-height: 20px;
+    font-weight: 500;
+    letter-spacing: 0.01em;
+    color: var(--color-text);
+    margin-block-end: 0 !important;
+    white-space: nowrap;
+}
+
+.slash {
+    opacity: 0.5;
+    font-size: 16px;
+    font-weight: 500;
+}
+
+.iconButton {
+    width: 40px;
+    height: 40px;
+    border-radius: 999px;
+    border: none;
+    background: transparent;
+    color: var(--color-text);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: none;
+    cursor: pointer;
+    transition:
+        transform 0.15s ease,
+        background 0.2s ease,
+        color 0.2s ease;
+    corner-shape: unset;
+    padding: 0;
+}
+
+.iconButton:hover {
+    background: color-mix(in srgb, var(--color-text) 10%, transparent);
+}
+
+.iconButton:active {
+    transform: scale(0.9);
+}
+
+.desktopNav {
+    display: none;
+    min-width: 0;
+    margin-left: auto;
+    overflow-x: auto;
+    scrollbar-width: none;
+}
+
+.desktopNav::-webkit-scrollbar {
+    display: none;
+}
+
+.navList {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    min-width: max-content;
+}
+
+.navItem {
+    display: inline-flex;
+}
+
+.navLink {
+    min-height: 36px;
+    padding: 0 12px;
+    border: none;
+    border-radius: 999px;
+    background: transparent;
+    color: color-mix(in srgb, var(--color-text) 72%, transparent);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    text-decoration: none;
+    cursor: pointer;
+    transition:
+        background 0.2s ease,
+        color 0.2s ease,
+        transform 0.15s ease;
+    white-space: nowrap;
+    font-family: inherit;
+    font-size: 14px;
+    font-weight: 500;
+}
+
+.navLink:hover {
+    background: color-mix(in srgb, var(--color-text) 8%, transparent);
+    color: var(--color-text);
+}
+
+.navLink:active {
+    transform: scale(0.96);
+}
+
+.navLinkActive {
+    color: var(--color-text);
+    background: color-mix(in srgb, var(--color-text) 10%, transparent);
+}
+
+.desktopLabel {
+    display: inline-flex;
+    align-items: center;
+    min-width: 0;
+}
+
+.desktopLabel svg {
+max-height: 12px;
+}
+
+.mobileMenu {
+    display: inline-flex;
+}
+
+.menuOverlay {
+    position: fixed;
+    inset: 0;
+    z-index: 1001;
+    background: rgba(0, 0, 0, 0.52);
+    -webkit-backdrop-filter: blur(6px);
+    backdrop-filter: blur(6px);
+}
+
+.menuDrawerContent {
+    position: fixed;
+    inset: 0;
+    z-index: 1002;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    outline: none;
+    overflow: hidden;
+}
+
+.menuDrawerInner {
+    width: 100%;
+    max-width: 648px;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 1px;
+    padding: clamp(3rem, 6vw, 4.5rem) clamp(1.5rem, 4vw, 2.75rem) clamp(4rem, 8vw, 6rem);
+    box-sizing: border-box;
+}
+
+.menuDrawerHandle {
+    width: 64px;
+    height: 6px;
+    border-radius: 999px;
+    background: color-mix(in srgb, var(--color-text) 30%, transparent);
+    margin: 0 auto 20px;
+    opacity: 0.3;
+    flex-shrink: 0;
+}
+
+.menuDrawerHeader {
+    width: 100%;
+    position: relative;
+}
+
+.menuTitle {
+    margin: 0;
+    font-family: var(--font-family-serif);
+    font-size: 44px;
+    line-height: 1.025;
+    font-weight: 400;
+    letter-spacing: -0.25px;
+    color: var(--color-text);
+    text-align: center;
+}
+
+.menuCloseButton {
+    position: absolute;
+    right: 0;
+    top: 50%;
+    transform: translateY(-50%);
+}
+
+.menuNav {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 11px;
+    overflow-y: auto;
+    padding: 0;
+}
+
+.menuLink {
+    width: 100%;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 72px;
+    height: 72px;
+    padding: 11px 18px 11px 16px;
+    border: none;
+    border-radius: calc(var(--radius-root) * 1.55);
+    background: transparent;
+    color: color-mix(in srgb, var(--color-text) 75%, transparent);
+    text-decoration: none;
+    box-sizing: border-box;
+    gap: 12px;
+    user-select: none;
+    transition: background 0.2s ease-out, opacity 0.2s ease, transform 0.15s ease;
+    font-size: 30px;
+    font-weight: 600;
+    cursor: pointer;
+    font-family: inherit;
+}
+
+.menuLink:hover {
+    color: var(--color-text);
+}
+
+.menuItemMarker {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 16px;
+    opacity: 0;
+    transform: translateX(-10px);
+    transition: transform 0.25s ease, opacity 0.25s ease;
+}
+
+.menuLink:hover .menuItemMarker,
+.menuLinkActive .menuItemMarker {
+    opacity: 1;
+    transform: translateX(0);
+}
+
+.menuLabel {
+    display: inline-flex;
+    align-items: center;
+    min-width: 0;
+}
+
+.menuLink:active {
+    transform: scale(0.95);
+    opacity: 0.75;
+}
+
+.menuLinkActive {
+    color: var(--color-text);
+}
+
+.left .slide,
+.right .slide {
+    width: 40px;
+}
+
+@media (min-width: 960px) {
+    .desktopNav {
+        display: flex;
+    }
+
+    .mobileMenu {
+        display: none;
+    }
+}
+
+@media (max-width: 959px) {
+    .inner {
+        grid-template-columns: auto minmax(0, 1fr) auto auto;
+    }
+
+    .slide {
+        height: 36px;
+    }
+
+    .breadcrumb {
+        padding: 4px 0;
+        gap: 4px;
+    }
+
+    .title {
+        font-size: 14px;
+    }
+
+    .menuDrawerInner {
+        padding: 3rem 1.25rem 4.5rem;
+    }
+
+    .menuTitle {
+        font-size: 36px;
+    }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .inner,
+    .track,
+    .iconButton,
+    .logotypeWrapper,
+    .navLink,
+    .menuLink,
+    .menuItemMarker {
+        transition: none;
+    }
+}

package/NavHeader.tsx

@@ -0,0 +1,530 @@
+import React, { useEffect, useMemo, useRef, useState } from 'react'
+import styles from './NavHeader.module.css'
+import { ArrowLeftIcon, OptionIcon, XIcon } from '@phosphor-icons/react'
+import { Drawer } from 'vaul'
+import BlurEffect from 'react-progressive-blur'
+
+export type NavHeaderLabels = {
+    menu: string
+    close: string
+    back: string
+}
+
+export type NavHeaderItem = {
+    id?: string
+    label?: React.ReactNode
+    ariaLabel: string
+    href?: string
+    external?: boolean
+    active?: boolean
+    matchPath?: string
+    onClick?: (
+        event: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement>
+    ) => void
+    target?: React.HTMLAttributeAnchorTarget
+    rel?: string
+}
+
+export type NavHeaderProps = {
+    pageTitle?: string
+    secPageTitle?: string
+    currentPath?: string
+    variant?: 'default' | 'docs' | (string & {})
+    showHeaderBlur?: boolean
+    navItems?: NavHeaderItem[]
+    leftSlot?: React.ReactNode
+    rightSlot?: React.ReactNode
+    logo?: React.ReactNode
+    brandName?: string
+    homeHref?: string
+    logoAriaLabel?: string
+    labels?: Partial<NavHeaderLabels>
+    className?: string
+    scrollTransitionDistance?: number
+    onBack?: () => void
+}
+
+type HeaderState = 'home' | 'level1' | 'level2'
+type LeftState = 'slot' | 'back'
+
+const DEFAULT_LABELS: NavHeaderLabels = {
+    menu: '菜单',
+    close: '关闭',
+    back: '返回'
+}
+
+const normalizePath = (path: string): string => {
+    if (!path) return '/'
+    const cleanPath = path.split('?')[0]?.split('#')[0] ?? '/'
+    const withLeading = cleanPath.startsWith('/') ? cleanPath : `/${cleanPath}`
+    if (withLeading === '/') return '/'
+    return withLeading.endsWith('/') ? withLeading.slice(0, -1) : withLeading
+}
+
+const isMenuItemActive = (currentPath: string, itemPath: string): boolean => {
+    const normalizedCurrent = normalizePath(currentPath)
+    const normalizedItem = normalizePath(itemPath)
+
+    if (normalizedItem === '/') {
+        return normalizedCurrent === '/'
+    }
+
+    return (
+        normalizedCurrent === normalizedItem ||
+        normalizedCurrent.startsWith(`${normalizedItem}/`)
+    )
+}
+
+const useHeaderStates = (pageTitle?: string, secPageTitle?: string) => {
+    return useMemo<HeaderState[]>(() => {
+        if (!pageTitle && !secPageTitle) {
+            return ['home']
+        }
+
+        if (!pageTitle && secPageTitle) {
+            return ['home', 'level1']
+        }
+
+        if (pageTitle && !secPageTitle) {
+            return ['home', 'level1']
+        }
+
+        return ['level1', 'level2']
+    }, [pageTitle, secPageTitle])
+}
+
+const useLeftStates = (leftSlot?: React.ReactNode, secPageTitle?: string) => {
+    return useMemo<LeftState[]>(() => {
+        const states: LeftState[] = []
+
+        if (leftSlot) {
+            states.push('slot')
+        }
+
+        if (secPageTitle) {
+            states.push('back')
+        }
+
+        return states
+    }, [leftSlot, secPageTitle])
+}
+
+const cx = (...classNames: Array<string | false | null | undefined>) =>
+    classNames.filter(Boolean).join(' ')
+
+const renderItemLabel = (item: NavHeaderItem) => item.label ?? item.ariaLabel
+
+const renderDesktopItem = (
+    item: NavHeaderItem,
+    className: string,
+    isActive: boolean
+) => {
+    const resolvedClassName = isActive
+        ? `${className} ${styles.navLinkActive}`
+        : className
+
+    if (item.href) {
+        return (
+            <a
+                href={item.href}
+                className={resolvedClassName}
+                aria-label={item.ariaLabel}
+                onClick={item.onClick}
+                target={item.external ? item.target ?? '_blank' : item.target}
+                rel={item.external ? item.rel ?? 'noreferrer' : item.rel}
+            >
+                <span className={styles.desktopLabel}>{renderItemLabel(item)}</span>
+            </a>
+        )
+    }
+
+    return (
+        <button
+            type='button'
+            className={resolvedClassName}
+            aria-label={item.ariaLabel}
+            onClick={item.onClick}
+        >
+            <span className={styles.desktopLabel}>{renderItemLabel(item)}</span>
+        </button>
+    )
+}
+
+const renderMobileItem = (
+    item: NavHeaderItem,
+    className: string,
+    isActive: boolean
+) => {
+    const resolvedClassName = isActive
+        ? `${className} ${styles.menuLinkActive}`
+        : className
+
+    const content = (
+        <>
+            <span aria-hidden className={styles.menuItemMarker}>
+                /
+            </span>
+            <span className={styles.menuLabel}>{renderItemLabel(item)}</span>
+        </>
+    )
+
+    if (item.href) {
+        return (
+            <a
+                href={item.href}
+                className={resolvedClassName}
+                aria-label={item.ariaLabel}
+                onClick={item.onClick}
+                target={item.external ? item.target ?? '_blank' : item.target}
+                rel={item.external ? item.rel ?? 'noreferrer' : item.rel}
+            >
+                {content}
+            </a>
+        )
+    }
+
+    return (
+        <button
+            type='button'
+            className={resolvedClassName}
+            aria-label={item.ariaLabel}
+            onClick={item.onClick}
+        >
+            {content}
+        </button>
+    )
+}
+
+const NavHeader: React.FC<NavHeaderProps> = ({
+    pageTitle,
+    secPageTitle,
+    currentPath = '/',
+    variant = 'default',
+    showHeaderBlur = true,
+    navItems = [],
+    leftSlot,
+    rightSlot,
+    logo,
+    brandName = 'Brand',
+    homeHref = '/',
+    logoAriaLabel,
+    labels,
+    className,
+    scrollTransitionDistance = 72,
+    onBack
+}) => {
+    const leftTrackRef = useRef<HTMLDivElement>(null)
+    const centerTrackRef = useRef<HTMLDivElement>(null)
+    const [menuOpen, setMenuOpen] = useState(false)
+
+    const resolvedLabels = { ...DEFAULT_LABELS, ...labels }
+    const states = useHeaderStates(pageTitle, secPageTitle)
+    const leftStates = useLeftStates(leftSlot, secPageTitle)
+    const hasTransition = states.length > 1
+    const hasNavItems = navItems.length > 0
+    const resolvedLogoAriaLabel = logoAriaLabel ?? brandName
+
+    useEffect(() => {
+        if (typeof window === 'undefined') return
+
+        const leftTrack = leftTrackRef.current
+        const centerTrack = centerTrackRef.current
+        const animatableTracks = [
+            leftStates.length > 1 ? leftTrack : null,
+            states.length > 1 ? centerTrack : null
+        ].filter(Boolean) as HTMLDivElement[]
+
+        if (!animatableTracks.length) return
+
+        let slideHeight = 0
+        let centerOffset = 0
+        let leftOffset = 0
+        let rafId = 0
+        let nextProgress = 0
+        let lastProgress = -1
+
+        const refreshOffsets = () => {
+            const el =
+                centerTrack?.querySelector<HTMLElement>('[data-slide]') ??
+                leftTrack?.querySelector<HTMLElement>('[data-slide]')
+            slideHeight = el?.offsetHeight ?? 0
+            centerOffset = hasTransition ? -(states.length - 1) * slideHeight : 0
+            leftOffset =
+                leftStates.length > 1 ? -((leftStates.length - 1) * slideHeight) : 0
+        }
+
+        const applyProgress = (progress: number) => {
+            if (leftTrack && leftStates.length > 1) {
+                leftTrack.style.transform = `translate3d(0, ${leftOffset * progress}px, 0)`
+            }
+
+            if (centerTrack && hasTransition) {
+                centerTrack.style.transform = `translate3d(0, ${centerOffset * progress}px, 0)`
+            }
+        }
+
+        const queueApply = (progress: number) => {
+            nextProgress = progress
+            if (rafId) return
+
+            rafId = window.requestAnimationFrame(() => {
+                rafId = 0
+                if (nextProgress === lastProgress) return
+                lastProgress = nextProgress
+                applyProgress(nextProgress)
+            })
+        }
+
+        const syncFromScroll = () => {
+            if (!slideHeight) refreshOffsets()
+            if (!slideHeight || (!hasTransition && leftStates.length <= 1)) return
+            const progress = Math.max(
+                0,
+                Math.min(1, window.scrollY / Math.max(scrollTransitionDistance, 1))
+            )
+            queueApply(progress)
+        }
+
+        refreshOffsets()
+        syncFromScroll()
+
+        window.addEventListener('scroll', syncFromScroll, { passive: true })
+
+        const ro = new ResizeObserver(() => {
+            refreshOffsets()
+            syncFromScroll()
+        })
+
+        animatableTracks.forEach((track) => ro.observe(track))
+
+        return () => {
+            if (rafId) window.cancelAnimationFrame(rafId)
+            window.removeEventListener('scroll', syncFromScroll)
+            ro.disconnect()
+            if (leftTrack) leftTrack.style.transform = ''
+            if (centerTrack) centerTrack.style.transform = ''
+        }
+    }, [hasTransition, leftStates.length, scrollTransitionDistance, states])
+
+    const handleBack = () => {
+        if (typeof window === 'undefined') return
+
+        if (onBack) {
+            onBack()
+            return
+        }
+
+        if (window.history.length > 1) {
+            window.history.back()
+            return
+        }
+
+        window.location.href = homeHref
+    }
+
+    const brandContent = logo ?? <span className={styles.brandName}>{brandName}</span>
+
+    return (
+        <div
+            className={cx(styles.header, className)}
+            data-nav-header
+            data-variant={variant}
+        >
+            {showHeaderBlur && <BlurEffect className={styles.blurEffect} position="top" intensity={100} aria-hidden />}
+            <header className={styles.inner}>
+                {hasNavItems && (
+                    <div className={styles.mobileMenu}>
+                        <Drawer.Root
+                            open={menuOpen}
+                            onOpenChange={setMenuOpen}
+                            shouldScaleBackground
+                            disablePreventScroll={false}
+                            direction='top'
+                        >
+                            <Drawer.Trigger asChild>
+                                <button
+                                    type='button'
+                                    className={styles.iconButton}
+                                    aria-label={resolvedLabels.menu}
+                                >
+                                    <OptionIcon size={18} weight='bold' />
+                                </button>
+                            </Drawer.Trigger>
+
+                            <Drawer.Portal>
+                                <Drawer.Overlay className={styles.menuOverlay} />
+                                <Drawer.Content className={styles.menuDrawerContent}>
+                                    <div className={styles.menuDrawerInner}>
+                                        <div className={styles.menuDrawerHeader}>
+                                            <Drawer.Title className={styles.menuTitle}>
+                                                {resolvedLabels.menu}
+                                            </Drawer.Title>
+                                            <Drawer.Close asChild>
+                                                <button
+                                                    type='button'
+                                                    className={cx(
+                                                        styles.iconButton,
+                                                        styles.menuCloseButton
+                                                    )}
+                                                    aria-label={resolvedLabels.close}
+                                                >
+                                                    <XIcon size={18} weight='bold' />
+                                                </button>
+                                            </Drawer.Close>
+                                        </div>
+
+                                        <nav
+                                            className={styles.menuNav}
+                                            aria-label={resolvedLabels.menu}
+                                        >
+                                            {navItems.map((item) => {
+                                                const key =
+                                                    item.id ??
+                                                    item.href ??
+                                                    item.ariaLabel
+                                                const isActive =
+                                                    item.active ??
+                                                    Boolean(
+                                                        item.href &&
+                                                        !item.external &&
+                                                        isMenuItemActive(
+                                                            currentPath,
+                                                            item.matchPath ??
+                                                            item.href
+                                                        )
+                                                    )
+
+                                                return (
+                                                    <Drawer.Close asChild key={key}>
+                                                        {renderMobileItem(
+                                                            item,
+                                                            styles.menuLink,
+                                                            isActive
+                                                        )}
+                                                    </Drawer.Close>
+                                                )
+                                            })}
+                                        </nav>
+                                    </div>
+
+                                    <div
+                                        aria-hidden
+                                        className={styles.menuDrawerHandle}
+                                    />
+                                </Drawer.Content>
+                            </Drawer.Portal>
+                        </Drawer.Root>
+                    </div>
+                )}
+                <div className={cx(styles.column, styles.left)}>
+                    <div className={styles.track} ref={leftTrackRef}>
+                        {leftStates.map((state, index) => (
+                            <div
+                                className={styles.slide}
+                                data-slide
+                                key={`left-${state}-${index}`}
+                            >
+                                {state === 'back' ? (
+                                    <button
+                                        type='button'
+                                        className={styles.iconButton}
+                                        onClick={handleBack}
+                                        aria-label={resolvedLabels.back}
+                                    >
+                                        <ArrowLeftIcon size={18} weight='bold' />
+                                    </button>
+                                ) : (
+                                    leftSlot
+                                )}
+                            </div>
+                        ))}
+                    </div>
+                </div>
+
+                <div className={styles.centerColumn}>
+                    <div className={styles.centerTrackWrapper}>
+                        <div className={styles.track} ref={centerTrackRef}>
+                            {states.map((state, index) => (
+                                <div
+                                    className={styles.slide}
+                                    data-slide
+                                    key={`center-${state}-${index}`}
+                                >
+                                    {state === 'home' && (
+                                        <a
+                                            className={styles.logotypeWrapper}
+                                            href={homeHref}
+                                            aria-label={resolvedLogoAriaLabel}
+                                        >
+                                            {brandContent}
+                                        </a>
+                                    )}
+
+                                    {state === 'level1' && (
+                                        <div className={styles.breadcrumb}>
+                                            <p className={styles.title}>
+                                                {pageTitle ?? secPageTitle}
+                                            </p>
+                                        </div>
+                                    )}
+
+                                    {state === 'level2' && (
+                                        <div className={styles.breadcrumb}>
+                                            {pageTitle && (
+                                                <>
+                                                    <p className={styles.title}>
+                                                        {pageTitle}
+                                                    </p>
+                                                    <span className={styles.slash}>/</span>
+                                                </>
+                                            )}
+                                            <p className={styles.title}>{secPageTitle}</p>
+                                        </div>
+                                    )}
+                                </div>
+                            ))}
+                        </div>
+                    </div>
+
+                    {hasNavItems && (
+                        <nav
+                            className={styles.desktopNav}
+                            aria-label={resolvedLabels.menu}
+                        >
+                            <div className={styles.navList}>
+                                {navItems.map((item) => {
+                                    const key = item.id ?? item.href ?? item.ariaLabel
+                                    const isActive =
+                                        item.active ??
+                                        Boolean(
+                                            item.href &&
+                                            !item.external &&
+                                            isMenuItemActive(
+                                                currentPath,
+                                                item.matchPath ?? item.href
+                                            )
+                                        )
+
+                                    return (
+                                        <div className={styles.navItem} key={key}>
+                                            {renderDesktopItem(
+                                                item,
+                                                styles.navLink,
+                                                isActive
+                                            )}
+                                        </div>
+                                    )
+                                })}
+                            </div>
+                        </nav>
+                    )}
+                </div>
+                <div className={cx(styles.column, styles.right)}>
+                    {rightSlot && <div className={styles.rightSlot}>{rightSlot}</div>}
+                </div>
+            </header>
+        </div>
+    )
+}
+
+export default NavHeader

package/README.md

@@ -0,0 +1,4 @@
+# AstroBox-WebNavbar
+A react components for AstroBox websites.
+
+note: The Demo is built by AI

package/index.ts

@@ -0,0 +1,7 @@
+export { default } from './NavHeader'
+export { default as NavHeader } from './NavHeader'
+export type {
+    NavHeaderItem,
+    NavHeaderLabels,
+    NavHeaderProps
+} from './NavHeader'

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@claralight-design/abweb-navbar",
+  "version": "0.1.0",
+  "description": "A react components for AstroBox websites.",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build"
+  },
+  "type": "module",
+  "main": "./index.ts",
+  "module": "./index.ts",
+  "types": "./index.ts",
+  "exports": {
+    ".": "./index.ts"
+  },
+  "files": [
+    "index.ts",
+    "NavHeader.tsx",
+    "NavHeader.module.css"
+  ],
+  "sideEffects": [
+    "./NavHeader.module.css"
+  ],
+  "peerDependencies": {
+    "react": "^18.2.0 || ^19.0.0",
+    "react-dom": "^18.2.0 || ^19.0.0"
+  },
+  "dependencies": {
+    "@phosphor-icons/react": "^2.1.7",
+    "react-progressive-blur": "^1.0.6",
+    "vaul": "^1.1.2"
+  },
+  "devDependencies": {
+    "@types/react": "^19.1.4",
+    "@types/react-dom": "^19.1.5",
+    "@vitejs/plugin-react": "^4.7.0",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "typescript": "^5.8.3",
+    "vite": "^7.3.3"
+  }
+}