58 lines
2.2 KiB
TypeScript
58 lines
2.2 KiB
TypeScript
'use client'
|
|
|
|
import Link from 'next/link'
|
|
import { Building2, Menu, PanelLeftClose, PanelLeftOpen } from 'lucide-react'
|
|
import { forwardRef } from 'react'
|
|
|
|
type DepartmentHeaderProps = {
|
|
currentTitle: string
|
|
navigationCollapsed: boolean
|
|
navigationExpanded: boolean
|
|
navigationControls: string
|
|
onToggleNavigation: () => void
|
|
}
|
|
|
|
const DepartmentHeader = forwardRef<HTMLButtonElement, DepartmentHeaderProps>(function DepartmentHeader({
|
|
currentTitle,
|
|
navigationCollapsed,
|
|
navigationExpanded,
|
|
navigationControls,
|
|
onToggleNavigation,
|
|
}, navigationTriggerRef) {
|
|
return (
|
|
<header className="sticky top-0 z-30 flex h-[72px] items-center border-b border-[#e5e9ef] bg-white px-4 sm:px-6">
|
|
<div className="flex min-w-0 items-center gap-3">
|
|
<button
|
|
ref={navigationTriggerRef}
|
|
type="button"
|
|
aria-label="切换部门导航"
|
|
aria-expanded={navigationExpanded}
|
|
aria-controls={navigationControls}
|
|
onClick={onToggleNavigation}
|
|
className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg text-[#344054] transition-colors hover:bg-[#f2f5f8] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#1677ff]"
|
|
>
|
|
<Menu className="h-5 w-5 lg:hidden" aria-hidden="true" />
|
|
{navigationCollapsed
|
|
? <PanelLeftOpen className="hidden h-5 w-5 lg:block" aria-hidden="true" />
|
|
: <PanelLeftClose className="hidden h-5 w-5 lg:block" aria-hidden="true" />}
|
|
</button>
|
|
|
|
<Link href="/" className="flex items-center gap-2 lg:hidden">
|
|
<span className="flex h-9 w-9 items-center justify-center rounded-lg bg-[#eaf3ff] text-[#1677ff]">
|
|
<Building2 className="h-5 w-5" aria-hidden="true" />
|
|
</span>
|
|
<span className="hidden text-sm font-bold text-[#101828] sm:block">品牌中心</span>
|
|
</Link>
|
|
|
|
<div className="hidden min-w-0 lg:block">
|
|
<p className="truncate text-sm font-semibold text-[#101828]">{currentTitle}</p>
|
|
<p className="mt-0.5 text-xs text-[#98a2b3]">品牌中心部门工作台</p>
|
|
</div>
|
|
</div>
|
|
|
|
</header>
|
|
)
|
|
})
|
|
|
|
export default DepartmentHeader
|