new ux start

components/ui/modern-side-bar.tsx

@@ -0,0 +1,300 @@
+"use client";
+import React, { useState, useEffect } from 'react';
+import { 
+  Home, 
+  User, 
+  Settings, 
+  LogOut, 
+  Menu, 
+  X, 
+  ChevronLeft, 
+  ChevronRight,
+  BarChart3,
+  FileText,
+  Bell,
+  Search,
+  HelpCircle
+} from 'lucide-react';
+
+interface NavigationItem {
+  id: string;
+  name: string;
+  icon: React.ComponentType<{ className?: string }>;
+  href: string;
+  badge?: string;
+}
+
+interface SidebarProps {
+  className?: string;
+}
+
+// Updated navigation items - remove logout from here
+const navigationItems: NavigationItem[] = [
+  { id: "dashboard", name: "Dashboard", icon: Home, href: "/dashboard" },
+  { id: "analytics", name: "Analytics", icon: BarChart3, href: "/analytics" },
+  { id: "documents", name: "Documents", icon: FileText, href: "/documents", badge: "3" },
+  { id: "notifications", name: "Notifications", icon: Bell, href: "/notifications", badge: "12" },
+  { id: "profile", name: "Profile", icon: User, href: "/profile" },
+  { id: "settings", name: "Settings", icon: Settings, href: "/settings" },
+  { id: "help", name: "Help & Support", icon: HelpCircle, href: "/help" },
+];
+
+export function Sidebar({ className = "" }: SidebarProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [isCollapsed, setIsCollapsed] = useState(false);
+  const [activeItem, setActiveItem] = useState("dashboard");
+
+  // Auto-open sidebar on desktop
+  useEffect(() => {
+    const handleResize = () => {
+      if (window.innerWidth >= 768) {
+        setIsOpen(true);
+      } else {
+        setIsOpen(false);
+      }
+    };
+    
+    handleResize();
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
+
+  const toggleSidebar = () => setIsOpen(!isOpen);
+  const toggleCollapse = () => setIsCollapsed(!isCollapsed);
+
+  const handleItemClick = (itemId: string) => {
+    setActiveItem(itemId);
+    if (window.innerWidth < 768) {
+      setIsOpen(false);
+    }
+  };
+
+  return (
+    <>
+      {/* Mobile hamburger button */}
+      <button
+        onClick={toggleSidebar}
+        className="fixed top-6 left-6 z-50 p-3 rounded-lg bg-white shadow-md border border-slate-100 md:hidden hover:bg-slate-50 transition-all duration-200"
+        aria-label="Toggle sidebar"
+      >
+        {isOpen ? 
+          <X className="h-5 w-5 text-slate-600" /> : 
+          <Menu className="h-5 w-5 text-slate-600" />
+        }
+      </button>
+
+      {/* Mobile overlay */}
+      {isOpen && (
+        <div 
+          className="fixed inset-0 bg-black/40 backdrop-blur-sm z-30 md:hidden transition-opacity duration-300" 
+          onClick={toggleSidebar} 
+        />
+      )}
+
+      {/* Sidebar */}
+      <div
+        className={`
+          fixed top-0 left-0 h-full bg-white border-r border-slate-200 z-40 transition-all duration-300 ease-in-out flex flex-col
+          ${isOpen ? "translate-x-0" : "-translate-x-full"}
+          ${isCollapsed ? "w-28" : "w-78"}
+          md:translate-x-0 md:static md:z-auto
+          ${className}
+        `}
+      >
+        {/* Header with logo and collapse button */}
+        <div className="flex items-center justify-between p-5 border-b border-slate-200 bg-slate-50/60">
+          {!isCollapsed && (
+            <div className="flex items-center space-x-2.5">
+              <div className="w-9 h-9 bg-blue-600 rounded-lg flex items-center justify-center shadow-sm">
+                <span className="text-white font-bold text-base">A</span>
+              </div>
+              <div className="flex flex-col">
+                <span className="font-semibold text-slate-800 text-base">Acme Corp</span>
+                <span className="text-xs text-slate-500">Enterprise Dashboard</span>
+              </div>
+            </div>
+          )}
+
+          {isCollapsed && (
+            <div className="w-9 h-9 bg-blue-600 rounded-lg flex items-center justify-center mx-auto shadow-sm">
+              <span className="text-white font-bold text-base">A</span>
+            </div>
+          )}
+
+          {/* Desktop collapse button */}
+          <button
+            onClick={toggleCollapse}
+            className="hidden md:flex p-1.5 rounded-md hover:bg-slate-100 transition-all duration-200"
+            aria-label={isCollapsed ? "Expand sidebar" : "Collapse sidebar"}
+          >
+            {isCollapsed ? (
+              <ChevronRight className="h-4 w-4 text-slate-500" />
+            ) : (
+              <ChevronLeft className="h-4 w-4 text-slate-500" />
+            )}
+          </button>
+        </div>
+
+        {/* Search Bar */}
+        {!isCollapsed && (
+          <div className="px-4 py-3">
+            <div className="relative">
+              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-3.5 w-3.5 text-slate-400" />
+              <input
+                type="text"
+                placeholder="Search..."
+                className="w-full pl-9 pr-4 py-2 bg-slate-50 border border-slate-200 rounded-md text-sm placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200"
+              />
+            </div>
+          </div>
+        )}
+
+        {/* Navigation */}
+        <nav className="flex-1 px-3 py-2 overflow-y-auto">
+          <ul className="space-y-0.5">
+            {navigationItems.map((item) => {
+              const Icon = item.icon;
+              const isActive = activeItem === item.id;
+
+              return (
+                <li key={item.id}>
+                  <button
+                    onClick={() => handleItemClick(item.id)}
+                    className={`
+                      w-full flex items-center space-x-2.5 px-3 py-2.5 rounded-md text-left transition-all duration-200 group
+                      ${isActive
+                        ? "bg-blue-50 text-blue-700"
+                        : "text-slate-600 hover:bg-slate-50 hover:text-slate-900"
+                      }
+                      ${isCollapsed ? "justify-center px-2" : ""}
+                    `}
+                    title={isCollapsed ? item.name : undefined}
+                  >
+                    <div className="flex items-center justify-center min-w-[24px]">
+                      <Icon
+                        className={`
+                          h-4.5 w-4.5 flex-shrink-0
+                          ${isActive 
+                            ? "text-blue-600" 
+                            : "text-slate-500 group-hover:text-slate-700"
+                          }
+                        `}
+                      />
+                    </div>
+                    
+                    {!isCollapsed && (
+                      <div className="flex items-center justify-between w-full">
+                        <span className={`text-sm ${isActive ? "font-medium" : "font-normal"}`}>{item.name}</span>
+                        {item.badge && (
+                          <span className={`
+                            px-1.5 py-0.5 text-xs font-medium rounded-full
+                            ${isActive
+                              ? "bg-blue-100 text-blue-700"
+                              : "bg-slate-100 text-slate-600"
+                            }
+                          `}>
+                            {item.badge}
+                          </span>
+                        )}
+                      </div>
+                    )}
+
+                    {/* Badge for collapsed state */}
+                    {isCollapsed && item.badge && (
+                      <div className="absolute top-1 right-1 w-4 h-4 flex items-center justify-center rounded-full bg-blue-100 border border-white">
+                        <span className="text-[10px] font-medium text-blue-700">
+                          {parseInt(item.badge) > 9 ? '9+' : item.badge}
+                        </span>
+                      </div>
+                    )}
+
+                    {/* Tooltip for collapsed state */}
+                    {isCollapsed && (
+                      <div className="absolute left-full ml-2 px-2 py-1 bg-slate-800 text-white text-xs rounded opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 whitespace-nowrap z-50">
+                        {item.name}
+                        {item.badge && (
+                          <span className="ml-1.5 px-1 py-0.5 bg-slate-700 rounded-full text-[10px]">
+                            {item.badge}
+                          </span>
+                        )}
+                        <div className="absolute left-0 top-1/2 transform -translate-y-1/2 -translate-x-1 w-1.5 h-1.5 bg-slate-800 rotate-45" />
+                      </div>
+                    )}
+                  </button>
+                </li>
+              );
+            })}
+          </ul>
+        </nav>
+
+        {/* Bottom section with profile and logout */}
+        <div className="mt-auto border-t border-slate-200">
+          {/* Profile Section */}
+          <div className={`border-b border-slate-200 bg-slate-50/30 ${isCollapsed ? 'py-3 px-2' : 'p-3'}`}>
+            {!isCollapsed ? (
+              <div className="flex items-center px-3 py-2 rounded-md bg-white hover:bg-slate-50 transition-colors duration-200">
+                <div className="w-8 h-8 bg-slate-200 rounded-full flex items-center justify-center">
+                  <span className="text-slate-700 font-medium text-sm">JD</span>
+                </div>
+                <div className="flex-1 min-w-0 ml-2.5">
+                  <p className="text-sm font-medium text-slate-800 truncate">John Doe</p>
+                  <p className="text-xs text-slate-500 truncate">Senior Administrator</p>
+                </div>
+                <div className="w-2 h-2 bg-green-500 rounded-full ml-2" title="Online" />
+              </div>
+            ) : (
+              <div className="flex justify-center">
+                <div className="relative">
+                  <div className="w-9 h-9 bg-slate-200 rounded-full flex items-center justify-center">
+                    <span className="text-slate-700 font-medium text-sm">JD</span>
+                  </div>
+                  <div className="absolute -bottom-1 -right-1 w-3 h-3 bg-green-500 rounded-full border-2 border-white" />
+                </div>
+              </div>
+            )}
+          </div>
+
+          {/* Logout Button */}
+          <div className="p-3">
+            <button
+              onClick={() => handleItemClick("logout")}
+              className={`
+                w-full flex items-center rounded-md text-left transition-all duration-200 group
+                text-red-600 hover:bg-red-50 hover:text-red-700
+                ${isCollapsed ? "justify-center p-2.5" : "space-x-2.5 px-3 py-2.5"}
+              `}
+              title={isCollapsed ? "Logout" : undefined}
+            >
+              <div className="flex items-center justify-center min-w-[24px]">
+                <LogOut className="h-4.5 w-4.5 flex-shrink-0 text-red-500 group-hover:text-red-600" />
+              </div>
+              
+              {!isCollapsed && (
+                <span className="text-sm">Logout</span>
+              )}
+              
+              {/* Tooltip for collapsed state */}
+              {isCollapsed && (
+                <div className="absolute left-full ml-2 px-2 py-1 bg-slate-800 text-white text-xs rounded opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 whitespace-nowrap z-50">
+                  Logout
+                  <div className="absolute left-0 top-1/2 transform -translate-y-1/2 -translate-x-1 w-1.5 h-1.5 bg-slate-800 rotate-45" />
+                </div>
+              )}
+            </button>
+          </div>
+        </div>
+      </div>
+
+      {/* Main Content Area */}
+      <div
+        className={`
+          transition-all duration-300 ease-in-out w-full
+          ${isCollapsed ? "md:ml-20" : "md:ml-72"}
+        `}
+      >
+        {/* Your content remains the same */}
+        
+      </div>
+    </>
+  );
+}