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

7
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,6 +32,7 @@ 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">
<Tooltip placement="right" title={collapsed ? "Expand Sidebar" : "Collapse Sidebar"}>
<Button <Button
data-alt="toggle-sidebar" data-alt="toggle-sidebar"
variant="ghost" variant="ghost"
@ -43,6 +45,7 @@ export function Sidebar({ collapsed, onToggle }: SidebarProps) {
> >
<PanelRightClose className="h-4 w-4" /> <PanelRightClose className="h-4 w-4" />
</Button> </Button>
</Tooltip>
</div> </div>
{/* Navigation */} {/* Navigation */}
@ -52,7 +55,8 @@ 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}>
<Link href={item.href}>
<Button <Button
data-alt={`nav-item-${item.name}`} data-alt={`nav-item-${item.name}`}
variant={isActive ? 'secondary' : 'ghost'} variant={isActive ? 'secondary' : 'ghost'}
@ -66,6 +70,7 @@ export function Sidebar({ collapsed, onToggle }: SidebarProps) {
{!collapsed && <span>{item.name}</span>} {!collapsed && <span>{item.name}</span>}
</Button> </Button>
</Link> </Link>
</Tooltip>
); );
})} })}
</div> </div>