feat: Ajout de React pour le front, début de refonte du front

2025-02-12 16:12:01 +01:00
parent 73774f84ff
commit 666636e5bf
35 changed files with 2863 additions and 164 deletions
--- a/assets/react/app/presentation/components/Sidebar.jsx
+++ b/assets/react/app/presentation/components/Sidebar.jsx
@@ -0,0 +1,164 @@
+import React, { useState } from 'react';
+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', href: '#' },
+        { icon: faCompass, text: 'Découvrir', href: '#' },
+      ]
+    },
+    {
+      icon: faExchangeAlt,
+      text: 'Convertir CBR en CBZ',
+      href: '#'
+    },
+    {
+      icon: faCalendar,
+      text: 'Calendrier',
+      href: '#'
+    },
+    {
+      icon: faClockRotateLeft,
+      text: 'Activité',
+      href: '#',
+      badge: '3'
+    },
+    {
+      icon: faCog,
+      text: 'Paramètres',
+      id: 'settings',
+      subItems: [
+        { text: 'Général', href: '#' },
+        { text: 'Dossiers', href: '#' },
+        { text: 'Scrappers', href: '#' },
+        { text: 'UI', href: '#' }
+      ]
+    },
+    {
+      icon: faDesktop,
+      text: 'Système',
+      id: 'system',
+      subItems: [
+        { text: 'Status', href: '#' },
+        { text: 'Backup', href: '#' },
+        { text: 'Logs', href: '#' },
+        { text: 'Updates', href: '#' }
+      ]
+    },
+  ];
+
+  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];
+    const isActive = false; // À implémenter avec un vrai système de routing
+    
+    return (
+      <div className={`border-l-4 ${isActive ? 'border-green-600' : 'border-transparent'}`}>
+        <button
+          onClick={() => {
+            if (hasSubItems) {
+              toggleMenu(item.id);
+            } else if (item.onClick) {
+              item.onClick();
+            } else if (item.href) {
+              window.location.href = item.href;
+            }
+          }}
+          className={`
+            w-full text-left pl-4 py-2 flex items-center justify-between
+            ${isActive ? 'text-green-600 bg-gray-800' : 'text-white hover:bg-gray-700'}
+            transition-colors duration-150
+          `}
+        >
+          <div className="flex items-center space-x-3">
+            <FontAwesomeIcon icon={item.icon} className="w-5 h-5" />
+            <span>{item.text}</span>
+          </div>
+          {hasSubItems ? (
+            <FontAwesomeIcon 
+              icon={isExpanded ? faChevronUp : faChevronDown} 
+              className="w-4 h-4 mr-4"
+            />
+          ) : item.badge ? (
+            <span className="bg-green-600 text-white text-xs px-2 py-1 rounded mr-4">
+              {item.badge}
+            </span>
+          ) : null}
+        </button>
+        
+        {hasSubItems && isExpanded && (
+          <div className="ml-8 mt-2 space-y-2">
+            {item.subItems.map((subItem, index) => (
+              <a
+                key={index}
+                href={subItem.href}
+                onClick={(e) => {
+                  e.preventDefault();
+                  if (subItem.onClick) {
+                    subItem.onClick();
+                  } else if (subItem.href !== '#') {
+                    window.location.href = subItem.href;
+                  }
+                }}
+                className="block py-2 text-gray-300 hover:text-green-600 transition-colors duration-150"
+              >
+                {subItem.icon && (
+                  <FontAwesomeIcon icon={subItem.icon} className="w-4 h-4 mr-2" />
+                )}
+                {subItem.text}
+              </a>
+            ))}
+          </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>
+  );
+}