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