xueteng/video-flow-b
1
0
Fork 0
forked from 77media/video-flow
Code Pull Requests Activity

侧边栏加Tooltip

Browse Source
This commit is contained in:
北枳 2025-10-22 18:48:36 +08:00
parent 4680f2229a
commit 174b2a4d1d
1 changed files with 31 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
components/layout/sidebar.tsx
View File

@ -8,6 +8,7 @@ import {
PanelRightClose PanelRightClose
} from 'lucide-react'; } from 'lucide-react';
import { navigationItems } from './type'; import { navigationItems } from './type';
import { Tooltip } from "antd";
interface SidebarProps { interface SidebarProps {
collapsed: boolean; collapsed: boolean;
@ -31,18 +32,20 @@ export function Sidebar({ collapsed, onToggle }: SidebarProps) {
<div className="flex h-full flex-col"> <div className="flex h-full flex-col">
{/* Toggle Button */} {/* Toggle Button */}
<div className="flex h-16 items-center px-4"> <div className="flex h-16 items-center px-4">
<Button <Tooltip placement="right" title={collapsed ? "Expand Sidebar" : "Collapse Sidebar"}>
data-alt="toggle-sidebar" <Button
variant="ghost" data-alt="toggle-sidebar"
size="icon" variant="ghost"
className={cn( size="icon"
'h-4 w-4 rounded-full transition-transform duration-300 text-gray-300', className={cn(
!collapsed && 'rotate-180' 'h-4 w-4 rounded-full transition-transform duration-300 text-gray-300',
)} !collapsed && 'rotate-180'
onClick={() => onToggle(!collapsed)} )}
> onClick={() => onToggle(!collapsed)}
<PanelRightClose className="h-4 w-4" /> >
</Button> <PanelRightClose className="h-4 w-4" />
</Button>
</Tooltip>
</div> </div>
{/* Navigation */} {/* Navigation */}
@ -52,20 +55,22 @@ export function Sidebar({ collapsed, onToggle }: SidebarProps) {
{section.items.map((item) => { {section.items.map((item) => {
const isActive = pathname === item.href; const isActive = pathname === item.href;
return ( return (
<Link key={item.name} href={item.href}> <Tooltip placement="right" title={item.name} key={item.name}>
<Button <Link href={item.href}>
data-alt={`nav-item-${item.name}`} <Button
variant={isActive ? 'secondary' : 'ghost'} data-alt={`nav-item-${item.name}`}
className={cn( variant={isActive ? 'secondary' : 'ghost'}
'w-full justify-start', className={cn(
collapsed ? 'px-3' : 'px-4', 'w-full justify-start',
isActive && 'bg-primary/10 text-primary hover:bg-primary/20' collapsed ? 'px-3' : 'px-4',
)} isActive && 'bg-primary/10 text-primary hover:bg-primary/20'
> )}
<item.icon className={cn('h-4 w-4 shrink-0 text-gray-300', !collapsed && 'mr-2')} /> >
{!collapsed && <span>{item.name}</span>} <item.icon className={cn('h-4 w-4 shrink-0 text-gray-300', !collapsed && 'mr-2')} />
</Button> {!collapsed && <span>{item.name}</span>}
</Link> </Button>
</Link>
</Tooltip>
); );
})} })}
</div> </div>