seec-analysis/components/Sidebar.tsx

"use client";

import {
  GraduationCap,
  LayoutDashboard,
  BarChart2,
  Users,
  Settings,
} from "lucide-react";
import Image from "next/image";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { useLayout } from "@/components/LayoutProvider";

export default function Sidebar() {
  const pathname = usePathname();
  const { mobileMenuOpen, setMobileMenuOpen } = useLayout();
  return (
    <>
      {/* Mobile backdrop */}
      {mobileMenuOpen && (
        <div 
          className="fixed inset-0 bg-background/80 backdrop-blur-sm z-30 lg:hidden"
          onClick={() => setMobileMenuOpen(false)}
        />
      )}
      
      <aside 
        className={`fixed inset-y-0 left-0 bg-surface border-r border-outline-variant flex flex-col justify-between z-40 w-64 lg:w-72 lg:static shrink-0 transition-transform duration-300 ease-in-out ${
          mobileMenuOpen ? "translate-x-0" : "-translate-x-full lg:translate-x-0"
        }`}
      >
      <div>
        <div className="h-20 flex items-center justify-center px-4 lg:px-6 w-full border-b border-outline-variant/30">
          <Link href="/" className="flex items-center justify-center hover:opacity-80 transition-opacity w-full">
            <Image 
              src="/banner.png" 
              alt="SEEC Metrics Banner" 
              width={160} 
              height={40} 
              className="object-contain mx-auto"
              priority
            />
          </Link>
        </div>
        <nav className="mt-4 px-3 space-y-2">
          {[
            { name: "总览面板", href: "/", icon: LayoutDashboard },
            { name: "能力分析", href: "/analysis", icon: BarChart2 },
            { name: "学生管理", href: "/students", icon: Users },
            { name: "系统设置", href: "/settings", icon: Settings },
          ].map((item) => {
            const isActive = pathname === item.href || (pathname?.startsWith("/metrics") && item.href === "/analysis");
            const activeClass = isActive 
              ? "bg-primary-container text-on-primary-container" 
              : "text-secondary hover:bg-surface-container-high hover:text-on-surface";
            
            return (
              <Link
                key={item.name}
                className={`flex items-center px-4 py-3 rounded-full group transition-colors ${activeClass}`}
                href={item.href}
              >
                <item.icon className="w-5 h-5 shrink-0" />
                <span className="ml-3 font-medium text-sm">
                  {item.name}
                </span>
              </Link>
            )
          })}
        </nav>
      </div>
      <div className="p-4 lg:p-6 mt-auto">
        <Link 
          href="/profile" 
          className="flex items-center justify-start p-3 rounded-xl bg-surface-container border border-outline-variant/30 hover:bg-surface-container-high cursor-pointer transition-colors group"
          onClick={() => setMobileMenuOpen(false)}
        >
          <div className="relative shrink-0">
            <Image
              alt="User Profile"
              className="h-10 w-10 rounded-lg object-contain ring-2 ring-surface group-hover:ring-primary/50 transition-all bg-white"
              src="/images/profile-avatar.png"
              width={40}
              height={40}
              referrerPolicy="no-referrer"
            />
            <span className="absolute bottom-0 right-0 h-2.5 w-2.5 bg-green-400 rounded-full ring-2 ring-surface-container group-hover:ring-surface-container-high transition-colors"></span>
          </div>
          <div className="ml-3">
            <p className="text-sm font-medium text-on-surface group-hover:text-primary transition-colors">刘钦</p>
            <p className="text-xs text-outline group-hover:text-secondary transition-colors">指导教师</p>
          </div>
        </Link>
      </div>
    </aside>
    </>
  );
}