colgora/Mangarr
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: SPA pour les pages existantes

Browse Source
This commit is contained in:
ext.jeremy.guillot@maxicoffee.domains
2025-02-17 14:50:36 +01:00
parent 668702b1fb
commit 140cc14316
11 changed files with 331 additions and 164 deletions
Download Patch File Download Diff File Expand all files Collapse all files

143
assets/react/app/presentation/components/Sidebar.jsx
View File

@@ -1,4 +1,5 @@
import React, { useState } from 'react';
import { Link } from 'react-router-dom';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import {
faBook,
@@ -28,24 +29,24 @@ export function Sidebar({ isOpen, onClose, onAddMangaClick }) {
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: faFileImport, text: 'Import bibliothèque', to: '/import' },
{ icon: faCompass, text: 'Découvrir', to: '/discover' },
]
},
{
icon: faExchangeAlt,
text: 'Convertir CBR en CBZ',
href: '#'
to: '/convert'
},
{
icon: faCalendar,
text: 'Calendrier',
href: '#'
to: '/calendar'
},
{
icon: faClockRotateLeft,
text: 'Activité',
href: '#',
to: '/activity',
badge: '3'
},
{
@@ -53,10 +54,10 @@ export function Sidebar({ isOpen, onClose, onAddMangaClick }) {
text: 'Paramètres',
id: 'settings',
subItems: [
{ text: 'Général', href: '#' },
{ text: 'Dossiers', href: '#' },
{ text: 'Scrappers', href: '#' },
{ text: 'UI', href: '#' }
{ text: 'Général', to: '/settings/general' },
{ text: 'Dossiers', to: '/settings/folders' },
{ text: 'Scrappers', to: '/settings/scrappers' },
{ text: 'UI', to: '/settings/ui' }
]
},
{
@@ -64,10 +65,10 @@ export function Sidebar({ isOpen, onClose, onAddMangaClick }) {
text: 'Système',
id: 'system',
subItems: [
{ text: 'Status', href: '#' },
{ text: 'Backup', href: '#' },
{ text: 'Logs', href: '#' },
{ text: 'Updates', href: '#' }
{ text: 'Status', to: '/system/status' },
{ text: 'Backup', to: '/system/backup' },
{ text: 'Logs', to: '/system/logs' },
{ text: 'Updates', to: '/system/updates' }
]
},
];
@@ -81,65 +82,71 @@ export function Sidebar({ isOpen, onClose, onAddMangaClick }) {
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
`}
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}
>
<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}
{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>
) : null}
</button>
{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) => (
<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>
))}
{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>