| 1 | /** |
| 2 | * LogoSection - 侧边栏 Logo 区域 |
| 3 | */ |
| 4 | |
| 5 | 'use client' |
| 6 | |
| 7 | import type { LogoSectionProps } from '../types' |
| 8 | import { PanelLeftClose, PanelLeftOpen } from 'lucide-react' |
| 9 | import Image from 'next/image' |
| 10 | import Link from 'next/link' |
| 11 | import { BRAND_TITLE, BrandWordmark } from '@/app/layout/shared' |
| 12 | import logo from '@/assets/images/logo.png' |
| 13 | import { cn } from '@/utils/className' |
| 14 | |
| 15 | export function LogoSection({ collapsed, onToggle }: LogoSectionProps) { |
| 16 | return ( |
| 17 | <div |
| 18 | className={cn( |
| 19 | 'mb-3 flex items-center', |
| 20 | collapsed ? 'justify-center px-1 py-2' : 'justify-between px-2 py-2', |
| 21 | )} |
| 22 | > |
| 23 | {collapsed ? ( |
| 24 | // 收起状态：默认显示 logo，hover 时显示展开按钮 |
| 25 | <div className="relative flex h-8 w-8 items-center justify-center"> |
| 26 | {/* Logo - 默认显示，hover 时隐藏 */} |
| 27 | <Link |
| 28 | href="/" |
| 29 | className="flex items-center justify-center transition-opacity group-hover:opacity-0" |
| 30 | data-testid="sidebar-logo-link" |
| 31 | > |
| 32 | <Image src={logo} alt={BRAND_TITLE} width={32} height={32} /> |
| 33 | </Link> |
| 34 | {/* 展开按钮 - 默认隐藏，hover 时显示 */} |
| 35 | <button |
| 36 | onClick={onToggle} |
| 37 | className="absolute inset-0 flex items-center justify-center rounded-md border-none bg-transparent text-muted-foreground/70 opacity-0 transition-opacity hover:bg-brand-cyan/10 hover:text-brand-cyan group-hover:opacity-100" |
| 38 | data-testid="sidebar-toggle-btn" |
| 39 | > |
| 40 | <PanelLeftOpen size={18} /> |
| 41 | </button> |
| 42 | </div> |
| 43 | ) : ( |
| 44 | <> |
| 45 | <Link |
| 46 | href="/" |
| 47 | className="group/logo flex items-center gap-2 text-foreground no-underline hover:opacity-85" |
| 48 | data-testid="sidebar-logo-link" |
| 49 | > |
| 50 | <Image src={logo} alt={BRAND_TITLE} width={32} height={32} /> |
| 51 | <BrandWordmark as="h1" size="sidebar" /> |
| 52 | </Link> |
| 53 | <button |
| 54 | onClick={onToggle} |
| 55 | className="flex h-8 w-8 items-center justify-center rounded-md border-none bg-transparent text-muted-foreground/70 transition-colors hover:bg-brand-cyan/10 hover:text-brand-cyan" |
| 56 | data-testid="sidebar-toggle-btn" |
| 57 | > |
| 58 | <PanelLeftClose size={18} /> |
| 59 | </button> |
| 60 | </> |
| 61 | )} |
| 62 | </div> |
| 63 | ) |
| 64 | } |
| 65 |