src/components/Sidebar/Sidebar.jsx

// src/components/Sidebar/Sidebar.jsx
import React, { useState, useEffect } from 'react';
import UserInfo from './UserInfo';
import NavLinks from './NavLinks';
import DepartmentQuickAccess from './DepartmentQuickAccess';

const Sidebar = ({
  initialUser,
  initialDepartments, // Prop này sẽ nhận danh sách phòng ban từ App.jsx
  initialActiveSection,
  onNavigate,
  isMobileMenuOpen,
  setMobileMenuOpen,
}) => {
  // ... (navItems và các state khác giữ nguyên) ...
  const navItems = [
    { id: 'dashboard-section', label: 'Dashboard', icon: 'fa-tachometer-alt' },
    { id: 'tasks-section', label: 'Công việc', icon: 'fa-tasks' },
    { id: 'personnel-section', label: 'Nhân sự', icon: 'fa-users' },
    { id: 'departments-section', label: 'Phòng ban', icon: 'fa-building' },
    { id: 'reports-section', label: 'Báo cáo', icon: 'fa-chart-line' },
    { id: 'calendar-section', label: 'Lịch làm việc', icon: 'fa-calendar-alt' },
    { id: 'settings-section', label: 'Cài đặt', icon: 'fa-cog' },
  ];

  const [currentUser, setCurrentUser] = useState(initialUser);
  const [departments, setDepartments] = useState(initialDepartments); // State này sẽ được cập nhật
  const [activeSection, setActiveSection] = useState(initialActiveSection);

  useEffect(() => {
    setCurrentUser(initialUser);
  }, [initialUser]);

  useEffect(() => {
    setDepartments(initialDepartments); // Cập nhật state departments khi prop thay đổi
  }, [initialDepartments]);

  useEffect(() => {
    setActiveSection(initialActiveSection);
  }, [initialActiveSection]);

  const handleNavigation = (sectionId) => {
    // ... (giữ nguyên) ...
    setActiveSection(sectionId);
    if (onNavigate) {
      onNavigate(sectionId);
    }
    if (window.innerWidth < 768) { // md breakpoint
      setMobileMenuOpen(false);
    }
  };
  
  const sidebarClasses = `
    md:flex md:flex-shrink-0 fixed md:relative inset-y-0 left-0 z-50
    transform ${isMobileMenuOpen ? 'translate-x-0' : '-translate-x-full'} md:translate-x-0
    transition-transform duration-300 ease-in-out
  `;

  return (
    <>
      {isMobileMenuOpen && (
        <div
          className="fixed inset-0 bg-black opacity-50 z-40 md:hidden"
          onClick={() => setMobileMenuOpen(false)}
        ></div>
      )}
      <div id="sidebar" className={sidebarClasses}>
        <div className="flex flex-col w-64 bg-gradient-to-b from-blue-600 to-blue-800 h-full">
          <div className="flex items-center justify-between h-16 px-4 flex-shrink-0">
            <div className="flex items-center">
              <i className="fas fa-tooth text-white text-2xl mr-2"></i>
              <span className="text-white font-bold text-xl">Nha Khoa TTL</span>
            </div>
            <button
              id="close-sidebar-button"
              className="md:hidden text-white ml-auto focus:outline-none"
              onClick={() => setMobileMenuOpen(false)}
            >
              <i className="fas fa-times text-xl"></i>
            </button>
          </div>
          <div className="flex flex-col flex-grow px-4 py-4 overflow-y-auto">
            <UserInfo currentUser={currentUser} />
            <NavLinks
              navItems={navItems}
              activeSection={activeSection}
              onNavigate={handleNavigation}
            />
            {/* DepartmentQuickAccess sẽ nhận `departments` từ state của Sidebar */}
            <DepartmentQuickAccess
              departments={departments} 
              // onNavigateToDepartment={ (deptId) => handleNavigation(`departments-section?deptId=${deptId}`)}
            />
          </div>
        </div>
      </div>
    </>
  );
};

export default Sidebar;