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';

/**
 * Sidebar - Navigation component
 *
 * Modern architecture:
 * - Simple, focused component with single responsibility
 * - No complex positioning logic - handled by parent grid layout
 * - TypeScript interfaces for navigation items
 * - Proper semantic HTML
 */

interface NavigationItem {
  name: string;
  href: string;
  icon: React.ComponentType<{ className?: string }>;
}

const navigation: NavigationItem[] = [
  { 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 (
    <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>
  );
}