@claralight-design/abweb-navbar 0.1.0 → 0.1.3

package/NavHeader.module.css

@@ -17,6 +17,10 @@
     max-height: 72px;
 }
 
+.header>* {
+    corner-shape: unset;
+}
+
 .inner {
     width: calc(100% - 12px);
     max-width: calc(1200px - 12px);
@@ -91,13 +95,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;
@@ -107,6 +104,12 @@
     gap: 10px;
 }
 
+.leftContent {
+    display: inline-flex;
+    align-items: center;
+    min-width: 0;
+}
+
 .brandName {
     color: var(--color-text);
     font-size: 16px;
@@ -126,44 +129,18 @@
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    padding: 4px 8px;
-    border-radius: 12px;
+    padding: 4px 10px;
+    border-radius: 999px;
     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;
+    transition:
+        background 0.2s ease,
+        color 0.2s ease,
+        transform 0.15s ease;
+    corner-shape: unset;
+    min-height: 40px;
 }
 
 .iconButton {
@@ -218,8 +195,9 @@
 }
 
 .navLink {
-    min-height: 36px;
-    padding: 0 12px;
+    corner-shape: unset;
+    min-height: 40px;
+    padding: 0 15px;
     border: none;
     border-radius: 999px;
     background: transparent;
@@ -228,23 +206,24 @@
     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;
+    font-size: 15px;
+    font-weight: 600;
 }
 
-.navLink:hover {
+.navLink:hover,
+.logotypeWrapper:hover {
     background: color-mix(in srgb, var(--color-text) 8%, transparent);
     color: var(--color-text);
 }
 
-.navLink:active {
+.navLink:active,
+.logotypeWrapper:active {
     transform: scale(0.96);
 }
 
@@ -257,10 +236,11 @@
     display: inline-flex;
     align-items: center;
     min-width: 0;
+    font-weight: 600;
 }
 
 .desktopLabel svg {
-max-height: 12px;
+    max-height: 13px;
 }
 
 .mobileMenu {
@@ -272,8 +252,8 @@ max-height: 12px;
     inset: 0;
     z-index: 1001;
     background: rgba(0, 0, 0, 0.52);
-    -webkit-backdrop-filter: blur(6px);
-    backdrop-filter: blur(6px);
+    -webkit-backdrop-filter: blur(16px);
+    backdrop-filter: blur(16px);
 }
 
 .menuDrawerContent {
@@ -315,6 +295,8 @@ max-height: 12px;
 .menuDrawerHeader {
     width: 100%;
     position: relative;
+    display: none;
+    visibility: hidden;
 }
 
 .menuTitle {
@@ -402,11 +384,6 @@ max-height: 12px;
     color: var(--color-text);
 }
 
-.left .slide,
-.right .slide {
-    width: 40px;
-}
-
 @media (min-width: 960px) {
     .desktopNav {
         display: flex;
@@ -426,15 +403,6 @@ max-height: 12px;
         height: 36px;
     }
 
-    .breadcrumb {
-        padding: 4px 0;
-        gap: 4px;
-    }
-
-    .title {
-        font-size: 14px;
-    }
-
     .menuDrawerInner {
         padding: 3rem 1.25rem 4.5rem;
     }
@@ -442,11 +410,19 @@ max-height: 12px;
     .menuTitle {
         font-size: 36px;
     }
+
+    .logotypeWrapper {
+        margin: 0 auto;
+    }
+
+    .centerColumn {
+        justify-content: center;
+    }
 }
 
 @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, OptionIcon, 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,8 +25,6 @@ export type NavHeaderItem = {
 }
 
 export type NavHeaderProps = {
-    pageTitle?: string
-    secPageTitle?: string
     currentPath?: string
     variant?: 'default' | 'docs' | (string & {})
     showHeaderBlur?: boolean
@@ -40,17 +37,11 @@ export type NavHeaderProps = {
     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 +66,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,8 +153,6 @@ const renderMobileItem = (
 }
 
 const NavHeader: React.FC<NavHeaderProps> = ({
-    pageTitle,
-    secPageTitle,
     currentPath = '/',
     variant = 'default',
     showHeaderBlur = true,
@@ -210,118 +165,13 @@ const NavHeader: React.FC<NavHeaderProps> = ({
     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 (
@@ -338,7 +188,6 @@ const NavHeader: React.FC<NavHeaderProps> = ({
                             open={menuOpen}
                             onOpenChange={setMenuOpen}
                             shouldScaleBackground
-                            disablePreventScroll={false}
                             direction='top'
                         >
                             <Drawer.Trigger asChild>
@@ -347,7 +196,7 @@ const NavHeader: React.FC<NavHeaderProps> = ({
                                     className={styles.iconButton}
                                     aria-label={resolvedLabels.menu}
                                 >
-                                    <OptionIcon size={18} weight='bold' />
+                                    <DotsNineIcon size={18} weight='bold' />
                                 </button>
                             </Drawer.Trigger>
 
@@ -417,72 +266,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>
 

package/package.json

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