react/components/SidebarComp.tsx - gemini-react - ivaninvv/dashboard

react/components/SidebarComp.tsx
96 строк3 KB
VladimirIvanin
react
30 ноя 2025, 03:42
30 ноя 2025, 03:4245b555a
import React from 'react';
import { Icons } from './icons';

interface SidebarProps {
  isOpen: boolean;
  onClose: () => void;
}

const Sidebar = ({ isOpen, onClose }: SidebarProps) => {
  const menuItems = [
    { name: 'Dashboard', icon: Icons.Dashboard, href: '#', active: true },
    { name: 'Analytics', icon: Icons.Chart, href: '#' },
    { name: 'eCommerce', icon: Icons.Cart, href: '#' },
    { name: 'App', icon: Icons.Menu, href: '#' },
    { name: 'Forms', icon: Icons.Settings, href: '#' },
    { name: 'Cards', icon: Icons.Bell, href: '#' },
  ];

  return (
    <>
      {/* Mobile Overlay */}
      {isOpen && (
        <div 
          className="fixed inset-0 z-40 bg-slate-900/20 backdrop-blur-sm lg:hidden"
          onClick={onClose}
        />
      )}

      {/* Sidebar Container */}
      <aside 
        className={`
          fixed top-0 left-0 z-50 h-screen w-[270px] bg-white border-r border-border transition-transform duration-300 ease-in-out lg:translate-x-0 lg:static lg:block shadow-card
          ${isOpen ? 'translate-x-0' : '-translate-x-full'}
        `}
      >
        {/* Logo */}
        <div className="flex items-center h-[70px] px-6">
          <Icons.Logo className="w-8 h-8 text-primary" />
          <span className="ml-3 text-xl font-bold text-dark">NextKit</span>
        </div>

        {/* Navigation */}
        <nav className="px-4 py-4 space-y-1 overflow-y-auto h-[calc(100vh-70px)] sidebar-scroll">
          <p className="px-4 text-xs font-bold text-dark uppercase opacity-60 mb-2 mt-2">Home</p>
          
          {menuItems.slice(0, 1).map((item) => (
            <a
              key={item.name}
              href={item.href}
              className={`
                flex items-center px-4 py-3 text-sm font-medium rounded-[7px] transition-all duration-200 group relative overflow-hidden
                ${item.active 
                  ? 'bg-primary text-white shadow-md shadow-primary/40' 
                  : 'text-dark hover:bg-primary/10 hover:text-primary'
                }
              `}
            >
              <item.icon className={`w-[21px] h-[21px] mr-3 stroke-[1.5] ${item.active ? 'text-white' : 'text-dark group-hover:text-primary'}`} />
              {item.name}
            </a>
          ))}

          <p className="px-4 text-xs font-bold text-dark uppercase opacity-60 mb-2 mt-6">Utilities</p>
          
          {menuItems.slice(1).map((item) => (
            <a
              key={item.name}
              href={item.href}
              className={`
                flex items-center px-4 py-3 text-sm font-medium rounded-[7px] transition-all duration-200 group
                text-dark hover:bg-primary/10 hover:text-primary
              `}
            >
              <item.icon className="w-[21px] h-[21px] mr-3 stroke-[1.5] text-dark group-hover:text-primary" />
              {item.name}
            </a>
          ))}

          <div className="mt-6 p-4 rounded-xl bg-primary/10 mx-2">
             <div className="flex items-center gap-3">
                <div className="w-10 h-10 rounded-full bg-primary flex items-center justify-center text-white">
                   <Icons.Users className="w-5 h-5" />
                </div>
                <div>
                   <h5 className="font-semibold text-sm text-dark">Upgrade</h5>
                   <p className="text-xs text-muted">Get more features</p>
                </div>
             </div>
          </div>
        </nav>
      </aside>
    </>
  );
};

export default Sidebar;