Checkpoint: Correction du bug des accordéons qui s'ouvraient tous lors de la navigation. Implémentation de la persistance de l'état des sections dans localStorage pour mémoriser les préférences utilisateur entre les pages et les sessions.
This commit is contained in:
@@ -160,9 +160,18 @@ function DashboardLayoutContent({
|
||||
const activeMenuItem = menuSections.flatMap(section => section.items).find(item => item.path === location);
|
||||
const isMobile = useIsMobile();
|
||||
|
||||
// État pour gérer les sections ouvertes/fermées (accordéon)
|
||||
// État pour gérer les sections ouvertes/fermées (persisté dans localStorage)
|
||||
const [openSections, setOpenSections] = useState<Record<string, boolean>>(() => {
|
||||
// Par défaut, ouvrir toutes les sections
|
||||
// Essayer de charger depuis localStorage
|
||||
const saved = localStorage.getItem('menuSectionsState');
|
||||
if (saved) {
|
||||
try {
|
||||
return JSON.parse(saved);
|
||||
} catch {
|
||||
// En cas d'erreur, utiliser les valeurs par défaut
|
||||
}
|
||||
}
|
||||
// Valeurs par défaut : toutes les sections ouvertes
|
||||
const initial: Record<string, boolean> = {};
|
||||
menuSections.forEach(section => {
|
||||
initial[section.title] = true;
|
||||
@@ -172,27 +181,16 @@ function DashboardLayoutContent({
|
||||
|
||||
// Fonction pour toggle une section
|
||||
const toggleSection = (sectionTitle: string) => {
|
||||
setOpenSections(prev => ({
|
||||
...prev,
|
||||
[sectionTitle]: !prev[sectionTitle]
|
||||
}));
|
||||
};
|
||||
|
||||
// S'assurer que la section contenant l'item actif est ouverte
|
||||
useEffect(() => {
|
||||
const activeSection = menuSections.find(section =>
|
||||
section.items.some(item =>
|
||||
item.path === location ||
|
||||
('subItems' in item && item.subItems?.some((sub: any) => sub.path === location))
|
||||
)
|
||||
);
|
||||
if (activeSection && !openSections[activeSection.title]) {
|
||||
setOpenSections(prev => ({
|
||||
setOpenSections(prev => {
|
||||
const newState = {
|
||||
...prev,
|
||||
[activeSection.title]: true
|
||||
}));
|
||||
}
|
||||
}, [location]);
|
||||
[sectionTitle]: !prev[sectionTitle]
|
||||
};
|
||||
// Sauvegarder dans localStorage
|
||||
localStorage.setItem('menuSectionsState', JSON.stringify(newState));
|
||||
return newState;
|
||||
});
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (isCollapsed) {
|
||||
|
||||
Reference in New Issue
Block a user