Upload components/Sidebar.jsx with huggingface_hub

components/Sidebar.jsx

@@ -33,18 +33,12 @@ const secondaryNavigation = [
 
 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">
+          <div className="w-8 h-8 bg-primary-600 rounded-lg flex items-center justify-center text-white font-bold shadow-lg shadow-primary-500/30">
             N
           </div>
           <span className="text-xl font-bold text-gray-900 dark:text-white tracking-tight">
@@ -59,7 +53,6 @@ export default function Sidebar({ isOpen, onClose }) {
         </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
@@ -67,15 +60,15 @@ export default function Sidebar({ isOpen, onClose }) {
         {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 ${
+              className={`group flex items-center justify-between px-3 py-2 text-sm font-medium rounded-md transition-all duration-200 ${
                 router.pathname === item.href
-                  ? 'bg-primary-50 text-primary-700 dark:bg-primary-900/20 dark:text-primary-400'
+                  ? 'bg-primary-50 text-primary-700 dark:bg-primary-900/20 dark:text-primary-400 shadow-sm'
                   : '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 ${
+                  className={`mr-3 h-5 w-5 flex-shrink-0 transition-colors ${
                     router.pathname === item.href
                       ? 'text-primary-500'
                       : 'text-gray-400 group-hover:text-gray-500'
@@ -85,7 +78,7 @@ export default function Sidebar({ isOpen, onClose }) {
                 {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">
+                <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 ring-1 ring-inset ring-primary-700/10">
                   {item.count}
                 </span>
               )}
@@ -98,7 +91,7 @@ export default function Sidebar({ isOpen, onClose }) {
         </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">
+            <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-200">
               <item.icon
                 className="mr-3 h-5 w-5 flex-shrink-0 text-gray-400 group-hover:text-gray-500"
                 aria-hidden="true"
@@ -109,8 +102,7 @@ export default function Sidebar({ isOpen, onClose }) {
         ))}
       </div>
 
-      {/* User Profile (Bottom) */}
-      <div className="border-t border-gray-200 dark:border-dark-border p-4">
+      <div className="border-t border-gray-200 dark:border-dark-border p-4 bg-gray-50 dark:bg-gray-800/50">
         <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"
@@ -132,15 +124,13 @@ export default function Sidebar({ isOpen, onClose }) {
 
   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">
+        <div className="fixed inset-y-0 left-0 flex flex-col w-64 max-w-xs animate-slide-up">
           <SidebarContent />
         </div>
       </div>
 
-      {/* Desktop Sidebar */}
       <div className="hidden lg:fixed lg:inset-y-0 lg:flex lg:w-64 lg:flex-col">
         <SidebarContent />
       </div>