Mangarr/assets/react/app/presentation/components/Sidebar.jsx

import React, { useState } from 'react';
import { Link } from 'react-router-dom';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { 
  faBook,
  faPlus, 
  faFileImport, 
  faCompass, 
  faExchangeAlt,
  faCalendar,
  faClockRotateLeft,
  faCog,
  faDesktop,
  faChevronDown,
  faChevronUp
} from '@fortawesome/free-solid-svg-icons';

export function Sidebar({ isOpen, onClose, onAddMangaClick }) {
  const [expandedMenus, setExpandedMenus] = useState({
    mangas: true, // Par défaut, le menu Mangas est ouvert
    settings: false,
    system: false
  });

  const menuItems = [
    {
      icon: faBook,
      text: 'Mangas',
      id: 'mangas',
      subItems: [
        { icon: faPlus, text: 'Ajouter un nouveau', onClick: () => onAddMangaClick() },
        { icon: faFileImport, text: 'Import bibliothèque', to: '/import' },
        { icon: faCompass, text: 'Découvrir', to: '/discover' },
      ]
    },
    {
      icon: faExchangeAlt,
      text: 'Convertir CBR en CBZ',
      to: '/convert'
    },
    {
      icon: faCalendar,
      text: 'Calendrier',
      to: '/calendar'
    },
    {
      icon: faClockRotateLeft,
      text: 'Activité',
      to: '/activity',
      badge: '3'
    },
    {
      icon: faCog,
      text: 'Paramètres',
      id: 'settings',
      subItems: [
        { text: 'Général', to: '/settings/general' },
        { text: 'Dossiers', to: '/settings/folders' },
        { text: 'Scrappers', to: '/settings/scrappers' },
        { text: 'UI', to: '/settings/ui' }
      ]
    },
    {
      icon: faDesktop,
      text: 'Système',
      id: 'system',
      subItems: [
        { text: 'Status', to: '/system/status' },
        { text: 'Backup', to: '/system/backup' },
        { text: 'Logs', to: '/system/logs' },
        { text: 'Updates', to: '/system/updates' }
      ]
    },
  ];

  const toggleMenu = (menuId) => {
    setExpandedMenus(prev => ({
      ...prev,
      [menuId]: !prev[menuId]
    }));
  };

  const MenuItem = ({ item }) => {
    const hasSubItems = item.subItems && item.subItems.length > 0;
    const isExpanded = item.id ? expandedMenus[item.id] : false;

    const handleClick = (e) => {
      if (hasSubItems) {
        e.preventDefault();
        toggleMenu(item.id);
      }
    };

    const renderLink = (linkItem, className) => {
      if (linkItem.onClick) {
        return (
          <button
            onClick={linkItem.onClick}
            className={className}
          >
            {linkItem.icon && <FontAwesomeIcon icon={linkItem.icon} className="w-4 h-4 mr-2" />}
            {linkItem.text}
          </button>
        );
      }
      
      return (
        <Link
          to={linkItem.to}
          className={className}
        >
          {linkItem.icon && <FontAwesomeIcon icon={linkItem.icon} className="w-4 h-4 mr-2" />}
          {linkItem.text}
        </Link>
      );
    };

    return (
      <div>
        {item.to || item.onClick ? (
          renderLink(item, "flex items-center px-4 py-2 text-gray-300 hover:text-green-600 transition-colors duration-150")
        ) : (
          <button
            onClick={handleClick}
            className="w-full flex items-center justify-between px-4 py-2 text-gray-300 hover:text-green-600 transition-colors duration-150"
          >
            <span className="flex items-center">
              <FontAwesomeIcon icon={item.icon} className="w-4 h-4 mr-2" />
              {item.text}
            </span>
            {hasSubItems && (
              <FontAwesomeIcon
                icon={isExpanded ? faChevronUp : faChevronDown}
                className="w-3 h-3"
              />
            )}
          </button>
        )}

        {hasSubItems && isExpanded && (
          <div className="ml-8 mt-2 space-y-2">
            {item.subItems.map((subItem, index) => {
              const link = renderLink(
                subItem,
                "block py-2 text-gray-300 hover:text-green-600 transition-colors duration-150"
              );
              
              return React.cloneElement(link, { key: `${subItem.text}-${index}` });
            })}
          </div>
        )}
      </div>
    );
  };

  return (
    <nav className={`
      w-60 bg-gray-600 h-full overflow-y-auto fixed left-0 top-16 transform transition-transform duration-200 ease-in-out z-40
      ${isOpen ? 'translate-x-0' : '-translate-x-full'}
      md:translate-x-0
    `}>
      <div className="py-4">
        <div className="space-y-1">
          {menuItems.map((item, index) => (
            <MenuItem key={index} item={item} />
          ))}
        </div>
      </div>
    </nav>
  );
}