components/Sidebar.js

import { useState } from 'react';
import Link from 'next/link';
import { useRouter } from 'next/router';
import { 
  Menu, 
  X, 
  Book, 
  Mic, 
  Code2, 
  LayoutGrid,
  ChevronRight,
  Home
} from 'lucide-react';

const navItems = [
  { href: '/', label: 'Home', icon: Home },
  { href: '/knowledge', label: 'Knowledge Base', icon: Book },
  { href: '/podcasts', label: 'Podcasts', icon: Mic },
  { href: '/projects', label: 'GenAI Projects', icon: Code2 },
  { href: '/decks', label: 'Slide Decks', icon: LayoutGrid },
];

export default function Sidebar() {
  const [isOpen, setIsOpen] = useState(false);
  const router = useRouter();

  const isActive = (href) => router.pathname === href;

  return (
    <>
      {/* Mobile toggle button */}
      <button
        onClick={() => setIsOpen(!isOpen)}
        className="fixed top-4 left-4 z-50 lg:hidden p-2 bg-brutal-black text-brutal-white border-2 border-brutal-black"
        aria-label="Toggle menu"
      >
        {isOpen ? <X size={24} /> : <Menu size={24} />}
      </button>

      {/* Overlay */}
      {isOpen && (
        <div 
          className="fixed inset-0 bg-black/50 z-40 lg:hidden"
          onClick={() => setIsOpen(false)}
        />
      )}

      {/* Sidebar */}
      <aside className={`
        fixed top-0 left-0 h-full bg-brutal-white border-r-2 border-brutal-black z-40
        transition-transform duration-300 ease-in-out
        ${isOpen ? 'translate-x-0' : '-translate-x-full'}
        lg:translate-x-0 lg:static lg:border-r-0 lg:border-r-2
        w-64 flex flex-col
      `}>
        {/* Logo */}
        <div className="p-6 border-b-2 border-brutal-black">
          <Link href="/" className="flex items-center gap-3">
            <div className="w-10 h-10 bg-brutal-black flex items-center justify-center">
              <span className="text-brutal-white font-mono font-bold text-lg">KB</span>
            </div>
            <div>
              <h1 className="font-bold text-lg leading-tight">KNOWLEDGE</h1>
              <p className="font-mono text-xs text-brutal-gray uppercase tracking-wider">Base v1.0</p>
            </div>
          </Link>
        </div>

        {/* Navigation */}
        <nav className="flex-1 p-4 space-y-2">
          {navItems.map((item) => {
            const Icon = item.icon;
            return (
              <Link
                key={item.href}
                href={item.href}
                onClick={() => setIsOpen(false)}
                className={`
                  flex items-center gap-3 px-4 py-3 font-mono text-sm uppercase tracking-wide
                  border-2 transition-all duration-150
                  ${isActive(item.href) 
                    ? 'bg-brutal-black text-brutal-white border-brutal-black' 
                    : 'border-transparent hover:border-brutal-black hover:bg-brutal-black/5'
                  }
                `}
              >
                <Icon size={18} />
                <span>{item.label}</span>
                {isActive(item.href) && <ChevronRight size={16} className="ml-auto" />}
              </Link>
            );
          })}
        </nav>

        {/* Footer */}
        <div className="p-4 border-t-2 border-brutal-black">
          <p className="font-mono text-xs text-brutal-gray text-center">
            © 2024 Brutal KB
          </p>
        </div>
      </aside>

      {/* Main content wrapper for mobile */}
      <div className={`
        flex-1 min-h-screen transition-all duration-300
        ${isOpen ? 'lg:ml-0' : 'lg:ml-0'}
      `}>
        {/* Spacer for mobile */}
        <div className="lg:hidden h-16" />
      </div>
    </>
  );
}