95 lines
3.3 KiB
TypeScript
95 lines
3.3 KiB
TypeScript
"use client"
|
||
|
||
import { useState } from "react"
|
||
import Link from "next/link"
|
||
import { usePathname } from "next/navigation"
|
||
import { cn } from "@/lib/utils"
|
||
import { Button } from "@/components/ui/button"
|
||
import { Card } from "@/components/ui/card"
|
||
import { FileText, Upload, Settings, BarChart3, Home, Menu, X } from "lucide-react"
|
||
|
||
const navigation = [
|
||
{ name: "首頁", href: "/", icon: Home },
|
||
{ name: "上傳文件", href: "/upload", icon: Upload },
|
||
{ name: "評分結果", href: "/results", icon: BarChart3 },
|
||
{ name: "歷史記錄", href: "/history", icon: FileText },
|
||
{ name: "評分標準", href: "/criteria", icon: Settings },
|
||
]
|
||
|
||
export function Sidebar() {
|
||
const [isOpen, setIsOpen] = useState(false)
|
||
const pathname = usePathname()
|
||
|
||
return (
|
||
<>
|
||
{/* Mobile menu button */}
|
||
<Button
|
||
variant="ghost"
|
||
size="icon"
|
||
className="fixed top-4 left-4 z-50 md:hidden"
|
||
onClick={() => setIsOpen(!isOpen)}
|
||
>
|
||
{isOpen ? <X className="h-6 w-6" /> : <Menu className="h-6 w-6" />}
|
||
</Button>
|
||
|
||
{/* Sidebar */}
|
||
<div
|
||
className={cn(
|
||
"fixed inset-y-0 left-0 z-40 w-64 bg-sidebar border-r border-sidebar-border transform transition-transform duration-200 ease-in-out md:translate-x-0",
|
||
isOpen ? "translate-x-0" : "-translate-x-full",
|
||
)}
|
||
>
|
||
<div className="flex flex-col h-full">
|
||
{/* Logo */}
|
||
<div className="flex items-center px-6 py-8">
|
||
<div className="flex items-center space-x-3">
|
||
<div className="w-8 h-8 bg-primary rounded-lg flex items-center justify-center">
|
||
<BarChart3 className="w-5 h-5 text-primary-foreground" />
|
||
</div>
|
||
<h1 className="text-xl font-bold text-sidebar-foreground font-[var(--font-playfair)]">AI 評審系統</h1>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Navigation */}
|
||
<nav className="flex-1 px-4 space-y-2">
|
||
{navigation.map((item) => {
|
||
const isActive = pathname === item.href
|
||
return (
|
||
<Link
|
||
key={item.name}
|
||
href={item.href}
|
||
className={cn(
|
||
"flex items-center px-4 py-3 text-sm font-medium rounded-lg transition-colors",
|
||
isActive
|
||
? "bg-sidebar-accent text-sidebar-accent-foreground"
|
||
: "text-sidebar-foreground hover:bg-sidebar-accent/50 hover:text-sidebar-accent-foreground",
|
||
)}
|
||
onClick={() => setIsOpen(false)}
|
||
>
|
||
<item.icon className="mr-3 h-5 w-5" />
|
||
{item.name}
|
||
</Link>
|
||
)
|
||
})}
|
||
</nav>
|
||
|
||
{/* Footer */}
|
||
<div className="p-4">
|
||
<Card className="p-4 bg-sidebar-primary">
|
||
<div className="text-sm text-sidebar-primary-foreground">
|
||
<p className="font-medium mb-1">需要幫助？</p>
|
||
<p className="text-xs opacity-80">查看使用說明或聯繫技術支援</p>
|
||
</div>
|
||
</Card>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Overlay for mobile */}
|
||
{isOpen && (
|
||
<div className="fixed inset-0 z-30 bg-black bg-opacity-50 md:hidden" onClick={() => setIsOpen(false)} />
|
||
)}
|
||
</>
|
||
)
|
||
}
|