@claralight-design/abweb-navbar 0.1.2 → 0.1.4

package/NavHeader.module.css

@@ -17,13 +17,13 @@
     max-height: 72px;
 }
 
-.header > * {
+.header>* {
     corner-shape: unset;
 }
 
 .inner {
-    width: calc(100% - 12px);
-    max-width: calc(1200px - 12px);
+    width: calc(100% + 32px);
+    max-width: calc(1200px + 32px);
     position: relative;
     display: grid;
     grid-template-columns: auto minmax(0, 1fr) auto;
@@ -70,17 +70,6 @@
     order: 3;
 }
 
-.right {
-    gap: 8px;
-}
-
-.rightSlot {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    min-width: 0;
-}
-
 .centerColumn {
     min-width: 0;
     display: flex;
@@ -95,13 +84,6 @@
     flex: 0 1 auto;
 }
 
-.track {
-    display: flex;
-    flex-direction: column;
-    will-change: transform;
-    transform: translate3d(0, 0, 0);
-}
-
 .slide {
     min-height: 40px;
     height: 40px;
@@ -111,6 +93,12 @@
     gap: 10px;
 }
 
+.leftContent {
+    display: inline-flex;
+    align-items: center;
+    min-width: 0;
+}
+
 .brandName {
     color: var(--color-text);
     font-size: 16px;
@@ -130,44 +118,18 @@
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    padding: 4px 8px;
+    padding: 4px 10px;
     border-radius: 999px;
     transition: transform 0.25s ease, opacity 0.25s ease;
     color: inherit;
     text-decoration: none;
     white-space: nowrap;
-    min-height: 36px;
     transition:
         background 0.2s ease,
         color 0.2s ease,
         transform 0.15s ease;
-}
-
-.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;
+    corner-shape: unset;
+    min-height: 40px;
 }
 
 .iconButton {
@@ -222,8 +184,9 @@
 }
 
 .navLink {
-    min-height: 36px;
-    padding: 0 12px;
+    corner-shape: unset;
+    min-height: 40px;
+    padding: 0 15px;
     border: none;
     border-radius: 999px;
     background: transparent;
@@ -238,16 +201,18 @@
         transform 0.15s ease;
     white-space: nowrap;
     font-family: inherit;
-    font-size: 14px;
-    font-weight: 500;
+    font-size: 15px;
+    font-weight: 600;
 }
 
-.navLink:hover, .logotypeWrapper:hover {
+.navLink:hover,
+.logotypeWrapper:hover {
     background: color-mix(in srgb, var(--color-text) 8%, transparent);
     color: var(--color-text);
 }
 
-.navLink:active, .logotypeWrapper:active {
+.navLink:active,
+.logotypeWrapper:active {
     transform: scale(0.96);
 }
 
@@ -264,7 +229,7 @@
 }
 
 .desktopLabel svg {
-max-height: 12px;
+    max-height: 13px;
 }
 
 .mobileMenu {
@@ -408,11 +373,6 @@ max-height: 12px;
     color: var(--color-text);
 }
 
-.left .slide,
-.right .slide {
-    width: 40px;
-}
-
 @media (min-width: 960px) {
     .desktopNav {
         display: flex;
@@ -425,22 +385,14 @@ max-height: 12px;
 
 @media (max-width: 959px) {
     .inner {
-        grid-template-columns: auto minmax(0, 1fr) auto auto;
+        display: flex;
+        width: calc(100% - 14px);
     }
 
     .slide {
         height: 36px;
     }
 
-    .breadcrumb {
-        padding: 4px 0;
-        gap: 4px;
-    }
-
-    .title {
-        font-size: 14px;
-    }
-
     .menuDrawerInner {
         padding: 3rem 1.25rem 4.5rem;
     }
@@ -455,12 +407,13 @@ max-height: 12px;
 
     .centerColumn {
         justify-content: center;
+        width: 100%;
     }
 }
 
 @media (prefers-reduced-motion: reduce) {
+
     .inner,
-    .track,
     .iconButton,
     .logotypeWrapper,
     .navLink,

package/NavHeader.tsx

@@ -1,13 +1,12 @@
-import React, { useEffect, useMemo, useRef, useState } from 'react'
+import React, { useState } from 'react'
 import styles from './NavHeader.module.css'
-import { ArrowLeftIcon, DotsNineIcon, XIcon } from '@phosphor-icons/react'
+import { DotsNineIcon, 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 = {
@@ -26,31 +25,22 @@ export type NavHeaderItem = {
 }
 
 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: '返回'
+    close: '关闭'
 }
 
 const normalizePath = (path: string): string => {
@@ -75,40 +65,6 @@ const isMenuItemActive = (currentPath: string, itemPath: string): boolean => {
     )
 }
 
-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(' ')
 
@@ -196,132 +152,24 @@ const renderMobileItem = (
 }
 
 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 (
@@ -416,72 +264,19 @@ const NavHeader: React.FC<NavHeaderProps> = ({
                     </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>
+                    {leftSlot && <div className={styles.leftContent}>{leftSlot}</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 className={styles.slide}>
+                            <a
+                                className={styles.logotypeWrapper}
+                                href={homeHref}
+                                aria-label={resolvedLogoAriaLabel}
+                            >
+                                {brandContent}
+                            </a>
                         </div>
                     </div>
 
@@ -518,9 +313,6 @@ const NavHeader: React.FC<NavHeaderProps> = ({
                         </nav>
                     )}
                 </div>
-                <div className={cx(styles.column, styles.right)}>
-                    {rightSlot && <div className={styles.rightSlot}>{rightSlot}</div>}
-                </div>
             </header>
         </div>
     )

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@claralight-design/abweb-navbar",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "description": "A react components for AstroBox websites.",
   "scripts": {
     "dev": "vite",