70 lines
2.5 KiB
TypeScript
70 lines
2.5 KiB
TypeScript
"use client"
|
|
|
|
import Link from "next/link"
|
|
import { usePathname } from "next/navigation"
|
|
import { cn } from "@/lib/utils"
|
|
import { Button } from "@/components/ui/button"
|
|
import { LayoutDashboard, Target, Calendar, TrendingUp, Settings, FileText, Menu } from "lucide-react"
|
|
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
|
|
|
|
const navigation = [
|
|
{ name: "儀表板", href: "/", icon: LayoutDashboard },
|
|
{ name: "KPI 管理", href: "/kpi", icon: Target },
|
|
{ name: "進度追蹤", href: "/progress", icon: TrendingUp },
|
|
{ name: "審查管理", href: "/reviews", icon: Calendar },
|
|
{ name: "報表分析", href: "/reports", icon: FileText },
|
|
{ name: "系統管理", href: "/admin", icon: Settings },
|
|
]
|
|
|
|
export function Navigation() {
|
|
const pathname = usePathname()
|
|
|
|
return (
|
|
<>
|
|
{/* Desktop Navigation */}
|
|
<nav className="hidden lg:flex space-x-1 bg-white p-2 rounded-lg shadow-sm">
|
|
{navigation.map((item) => {
|
|
const isActive = pathname === item.href
|
|
return (
|
|
<Link key={item.name} href={item.href}>
|
|
<Button
|
|
variant={isActive ? "default" : "ghost"}
|
|
size="sm"
|
|
className={cn("flex items-center space-x-2", isActive && "bg-primary text-primary-foreground")}
|
|
>
|
|
<item.icon className="h-4 w-4" />
|
|
<span className="hidden xl:inline">{item.name}</span>
|
|
</Button>
|
|
</Link>
|
|
)
|
|
})}
|
|
</nav>
|
|
|
|
{/* Mobile Navigation */}
|
|
<div className="lg:hidden">
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<Button variant="outline" size="sm">
|
|
<Menu className="h-4 w-4" />
|
|
<span className="ml-2">選單</span>
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent align="end" className="w-48">
|
|
{navigation.map((item) => {
|
|
const isActive = pathname === item.href
|
|
return (
|
|
<DropdownMenuItem key={item.name} asChild>
|
|
<Link href={item.href} className={cn("flex items-center space-x-2", isActive && "bg-accent")}>
|
|
<item.icon className="h-4 w-4" />
|
|
<span>{item.name}</span>
|
|
</Link>
|
|
</DropdownMenuItem>
|
|
)
|
|
})}
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
</div>
|
|
</>
|
|
)
|
|
}
|