Upload components/Sidebar.jsx with huggingface_hub

components/Sidebar.jsx

@@ -0,0 +1,149 @@
+import React, { useState } from 'react';
+import Link from 'next/link';
+import { useRouter } from 'next/router';
+import { 
+  LayoutDashboard, 
+  FolderKanban, 
+  CheckSquare, 
+  Users, 
+  BarChart2, 
+  Calendar, 
+  MessageSquare, 
+  Settings, 
+  LogOut,
+  X,
+  ChevronDown,
+  HelpCircle
+} from 'lucide-react';
+
+const navigation = [
+  { name: 'Dashboard', href: '/', icon: LayoutDashboard, current: true },
+  { name: 'Projects', href: '/projects', icon: FolderKanban, current: false },
+  { name: 'Tasks', href: '/tasks', icon: CheckSquare, current: false },
+  { name: 'Team', href: '/team', icon: Users, current: false },
+  { name: 'Analytics', href: '/analytics', icon: BarChart2, current: false },
+  { name: 'Messages', href: '/messages', icon: MessageSquare, current: false, count: 3 },
+  { name: 'Calendar', href: '/calendar', icon: Calendar, current: false },
+];
+
+const secondaryNavigation = [
+  { name: 'Settings', href: '/settings', icon: Settings },
+  { name: 'Help & Support', href: '/help', icon: HelpCircle },
+];
+
+export default function Sidebar({ isOpen, onClose }) {
+  const router = useRouter();
+  const [expandedMenus, setExpandedMenus] = useState({});
+
+  const toggleMenu = (name) => {
+    setExpandedMenus(prev => ({ ...prev, [name]: !prev[name] }));
+  };
+
+  const SidebarContent = () => (
+    <div className="flex flex-col h-full bg-white dark:bg-dark-surface border-r border-gray-200 dark:border-dark-border">
+      {/* Logo Area */}
+      <div className="flex items-center justify-between h-16 px-6 border-b border-gray-200 dark:border-dark-border">
+        <div className="flex items-center gap-2">
+          <div className="w-8 h-8 bg-primary-600 rounded-lg flex items-center justify-center text-white font-bold">
+            N
+          </div>
+          <span className="text-xl font-bold text-gray-900 dark:text-white tracking-tight">
+            Nexus
+          </span>
+        </div>
+        <button 
+          onClick={onClose}
+          className="lg:hidden text-gray-400 hover:text-gray-500"
+        >
+          <X className="w-6 h-6" />
+        </button>
+      </div>
+
+      {/* Navigation */}
+      <div className="flex-1 overflow-y-auto py-4 px-3 space-y-1">
+        <div className="px-3 mb-2 text-xs font-semibold text-gray-400 uppercase tracking-wider">
+          Main Menu
+        </div>
+        {navigation.map((item) => (
+          <Link key={item.name} href={item.href}>
+            <div
+              className={`group flex items-center justify-between px-3 py-2 text-sm font-medium rounded-md transition-colors duration-150 ${
+                router.pathname === item.href
+                  ? 'bg-primary-50 text-primary-700 dark:bg-primary-900/20 dark:text-primary-400'
+                  : 'text-gray-700 hover:bg-gray-50 hover:text-gray-900 dark:text-gray-300 dark:hover:bg-gray-800 dark:hover:text-white'
+              }`}
+            >
+              <div className="flex items-center">
+                <item.icon
+                  className={`mr-3 h-5 w-5 flex-shrink-0 ${
+                    router.pathname === item.href
+                      ? 'text-primary-500'
+                      : 'text-gray-400 group-hover:text-gray-500'
+                  }`}
+                  aria-hidden="true"
+                />
+                {item.name}
+              </div>
+              {item.count && (
+                <span className="bg-primary-100 text-primary-600 py-0.5 px-2 rounded-full text-xs font-medium dark:bg-primary-900 dark:text-primary-300">
+                  {item.count}
+                </span>
+              )}
+            </div>
+          </Link>
+        ))}
+
+        <div className="px-3 mt-8 mb-2 text-xs font-semibold text-gray-400 uppercase tracking-wider">
+          System
+        </div>
+        {secondaryNavigation.map((item) => (
+          <Link key={item.name} href={item.href}>
+            <div className="group flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-700 hover:bg-gray-50 hover:text-gray-900 dark:text-gray-300 dark:hover:bg-gray-800 dark:hover:text-white transition-colors duration-150">
+              <item.icon
+                className="mr-3 h-5 w-5 flex-shrink-0 text-gray-400 group-hover:text-gray-500"
+                aria-hidden="true"
+              />
+              {item.name}
+            </div>
+          </Link>
+        ))}
+      </div>
+
+      {/* User Profile (Bottom) */}
+      <div className="border-t border-gray-200 dark:border-dark-border p-4">
+        <div className="flex items-center">
+          <img
+            className="h-9 w-9 rounded-full object-cover border-2 border-white dark:border-gray-600 shadow-sm"
+            src="https://picsum.photos/seed/user1/200/200"
+            alt=""
+          />
+          <div className="ml-3">
+            <p className="text-sm font-medium text-gray-700 dark:text-gray-200">Alex Morgan</p>
+            <p className="text-xs text-gray-500 dark:text-gray-400">Product Manager</p>
+          </div>
+        </div>
+        <button className="mt-3 w-full flex items-center justify-center px-3 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 dark:bg-gray-700 dark:text-gray-200 dark:border-gray-600 dark:hover:bg-gray-600 transition-colors">
+          <LogOut className="w-4 h-4 mr-2" />
+          Sign Out
+        </button>
+      </div>
+    </div>
+  );
+
+  return (
+    <>
+      {/* Mobile Sidebar */}
+      <div className={`fixed inset-0 z-50 lg:hidden ${isOpen ? 'block' : 'hidden'}`}>
+        <div className="fixed inset-0 bg-gray-600 bg-opacity-75" onClick={onClose}></div>
+        <div className="fixed inset-y-0 left-0 flex flex-col w-64 max-w-xs">
+          <SidebarContent />
+        </div>
+      </div>
+
+      {/* Desktop Sidebar */}
+      <div className="hidden lg:fixed lg:inset-y-0 lg:flex lg:w-64 lg:flex-col">
+        <SidebarContent />
+      </div>
+    </>
+  );
+}