Upload components/Sidebar.js with huggingface_hub

components/Sidebar.js

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