clinicpro/assets/admin/components/layout/Sidebar.tsx

import React from 'react';
import { NavLink, useNavigate } from 'react-router-dom';
import {
  ChartBarIcon,
  UserGroupIcon,
  HeartIcon,
  BuildingOffice2Icon,
  CalendarDaysIcon,
  CreditCardIcon,
  BanknotesIcon,
  UsersIcon,
  ChatBubbleLeftEllipsisIcon,
  StarIcon,
  DevicePhoneMobileIcon,
  TagIcon,
  DocumentTextIcon,
  KeyIcon,
  Bars3Icon,
  ArrowLeftOnRectangleIcon,
} from '@heroicons/react/24/outline';
import { useUiStore } from '../../stores/uiStore';
import { useAuthStore } from '../../stores/authStore';

const sections = [
  {
    label: 'عمومی',
    items: [
      { to: '/admin/dashboard', icon: ChartBarIcon, label: 'داشبورد' },
      { to: '/admin/users', icon: UserGroupIcon, label: 'کاربران' },
      { to: '/admin/doctors', icon: HeartIcon, label: 'پزشکان' },
      { to: '/admin/clinics', icon: BuildingOffice2Icon, label: 'کلینیک‌ها' },
    ],
  },
  {
    label: 'مدیریت',
    items: [
      { to: '/admin/appointments', icon: CalendarDaysIcon, label: 'نوبت‌ها' },
      { to: '/admin/payments', icon: CreditCardIcon, label: 'پرداخت‌ها' },
      { to: '/admin/settlements', icon: BanknotesIcon, label: 'تسویه‌حساب' },
    ],
  },
  {
    label: 'محتوا',
    items: [
      { to: '/admin/comments', icon: ChatBubbleLeftEllipsisIcon, label: 'نظرات' },
      { to: '/admin/ratings', icon: StarIcon, label: 'امتیازها' },
      { to: '/admin/blogs', icon: DocumentTextIcon, label: 'بلاگ' },
      { to: '/admin/sms', icon: DevicePhoneMobileIcon, label: 'پیامک' },
    ],
  },
  {
    label: 'سیستم',
    items: [
      { to: '/admin/categories', icon: TagIcon, label: 'دسته‌بندی‌ها' },
      { to: '/admin/representations', icon: UsersIcon, label: 'نمایندگان' },
      { to: '/admin/secretaries', icon: KeyIcon, label: 'منشی‌ها' },
    ],
  },
];

export default function Sidebar() {
  const open = useUiStore((s) => s.sidebarOpen);
  const toggle = useUiStore((s) => s.toggleSidebar);
  const logout = useAuthStore((s) => s.logout);
  const navigate = useNavigate();

  return (
    <aside
      className={`
        ${open ? 'w-64' : 'w-[70px]'}
        shrink-0 flex flex-col h-screen overflow-hidden
        transition-[width] duration-300 ease-in-out
        bg-[#100c22] dark:bg-gray-950
        border-l border-white/5
      `}
    >
      {/* ── Header ─────────────────────────────── */}
      <div className={`flex items-center h-16 px-3 shrink-0 border-b border-white/[0.06] ${open ? 'gap-3' : 'justify-center'}`}>
        {open && (
          <div className="flex items-center gap-2.5 flex-1 min-w-0">
            <div className="w-8 h-8 rounded-lg bg-gradient-to-br from-violet-500 to-purple-700 flex items-center justify-center shadow-lg shadow-violet-900/40 shrink-0">
              <HeartIcon className="w-4 h-4 text-white" />
            </div>
            <div className="min-w-0">
              <p className="text-white font-bold text-sm leading-none truncate">ClinicPro</p>
              <p className="text-slate-500 text-[10px] leading-none mt-0.5">پنل مدیریت</p>
            </div>
          </div>
        )}
        <button
          onClick={toggle}
          className="w-8 h-8 flex items-center justify-center rounded-lg text-slate-500 hover:text-slate-200 hover:bg-white/8 transition-colors shrink-0"
          title={open ? 'بستن منو' : 'باز کردن منو'}
        >
          <Bars3Icon className="w-5 h-5" />
        </button>
      </div>

      {/* ── Navigation ─────────────────────────── */}
      <nav className="flex-1 overflow-y-auto py-3 px-2 space-y-0.5">
        {sections.map((section, si) => (
          <div key={section.label} className={si > 0 ? 'mt-4' : ''}>
            {open ? (
              <p className="text-[10px] font-semibold text-slate-600 uppercase tracking-widest px-3 py-1.5 mb-0.5">
                {section.label}
              </p>
            ) : (
              <div className="border-t border-white/[0.06] mx-1 my-2" />
            )}
            {section.items.map(({ to, icon: Icon, label }) => (
              <NavLink
                key={to}
                to={to}
                title={!open ? label : undefined}
                className={({ isActive }) => `
                  relative flex items-center gap-3 px-3 py-2.5 rounded-xl text-sm
                  transition-all duration-150 group
                  ${isActive
                    ? 'bg-violet-500/15 text-violet-300 font-semibold'
                    : 'text-slate-500 hover:text-slate-200 hover:bg-white/[0.06]'}
                `}
              >
                {({ isActive }) => (
                  <>
                    {isActive && (
                      <span className="absolute right-0 top-1/2 -translate-y-1/2 w-[3px] h-5 bg-violet-400 rounded-l-full" />
                    )}
                    <Icon className={`w-5 h-5 shrink-0 transition-transform duration-150 group-hover:scale-105 ${isActive ? 'text-violet-400' : ''}`} />
                    {open && <span className="truncate">{label}</span>}
                  </>
                )}
              </NavLink>
            ))}
          </div>
        ))}
      </nav>

      {/* ── User footer ────────────────────────── */}
      <div className="shrink-0 border-t border-white/[0.06] p-2.5">
        {open ? (
          <div className="flex items-center gap-3 rounded-xl px-3 py-2.5 hover:bg-white/[0.06] transition-colors group">
            <div className="w-8 h-8 rounded-full bg-gradient-to-br from-violet-500 to-purple-700 flex items-center justify-center text-white text-xs font-bold shrink-0 shadow-md shadow-violet-900/30">
              A
            </div>
            <div className="flex-1 min-w-0">
              <p className="text-sm font-medium text-slate-300 truncate leading-none">Admin</p>
              <p className="text-[11px] text-slate-600 truncate mt-0.5">مدیر سیستم</p>
            </div>
            <button
              onClick={() => { logout(); navigate('/admin/login'); }}
              className="text-slate-600 hover:text-red-400 transition-colors p-1 rounded-lg hover:bg-red-400/10 opacity-0 group-hover:opacity-100"
              title="خروج"
            >
              <ArrowLeftOnRectangleIcon className="w-4 h-4" />
            </button>
          </div>
        ) : (
          <button
            onClick={() => { logout(); navigate('/admin/login'); }}
            className="w-full flex justify-center py-2.5 text-slate-600 hover:text-red-400 transition-colors rounded-xl hover:bg-red-400/10"
            title="خروج"
          >
            <ArrowLeftOnRectangleIcon className="w-5 h-5" />
          </button>
        )}
      </div>
    </aside>
  );
}