stable-diffusion.cpp-rest/webui/components/sidebar.tsx

'use client';

import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { Image, ImagePlus, Sparkles, Settings, Activity } from 'lucide-react';
import { cn } from '@/lib/utils';

const navigation = [
  { name: 'Text to Image', href: '/text2img', icon: ImagePlus },
  { name: 'Image to Image', href: '/img2img', icon: Image },
  { name: 'Upscaler', href: '/upscaler', icon: Sparkles },
  { name: 'Models', href: '/models', icon: Settings },
  { name: 'Queue', href: '/queue', icon: Activity },
];

export function Sidebar() {
  const pathname = usePathname();

  return (
    <aside className="fixed left-0 top-0 z-40 h-screen w-64 border-r border-border bg-card">
      <div className="flex h-full flex-col gap-2">
        {/* Logo */}
        <div className="flex h-16 items-center border-b border-border px-6">
          <Link href="/" className="flex items-center gap-2 font-semibold">
            <ImagePlus className="h-6 w-6" />
            <span>SD REST UI</span>
          </Link>
        </div>

        {/* Navigation */}
        <nav className="flex-1 space-y-1 px-3 py-4">
          {navigation.map((item) => {
            const isActive = pathname === item.href || pathname?.startsWith(item.href + '/');
            return (
              <Link
                key={item.name}
                href={item.href}
                className={cn(
                  'flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-colors',
                  isActive
                    ? 'bg-primary text-primary-foreground'
                    : 'text-muted-foreground hover:bg-accent hover:text-accent-foreground'
                )}
              >
                <item.icon className="h-5 w-5" />
                {item.name}
              </Link>
            );
          })}
        </nav>

        {/* Footer */}
        <div className="border-t border-border p-4">
          <p className="text-xs text-muted-foreground text-center">
            Stable Diffusion REST API
          </p>
        </div>
      </div>
    </aside>
  );
}