init

components/navigation.tsx

@@ -0,0 +1,69 @@
+"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>
+    </>
+  )
+}