Checkpoint: Réorganisation du menu de navigation en 4 zones distinctes avec séparateurs visuels et titres de sections : Tableau de bord, Gestion (Formations, Séquences, Calendrier, Apprenants), Configuration (Utilisateurs, Rappels, Templates d'emails, Configuration SMTP), Analyses (Établissements, Tableau de bord analytique, Rapport public cible)
This commit is contained in:
Manus Sandbox
@@ -27,19 +27,39 @@ import { useLocation } from "wouter";
|
||||
import { DashboardLayoutSkeleton } from './DashboardLayoutSkeleton';
|
||||
import { Button } from "./ui/button";
|
||||
|
||||
const menuItems = [
|
||||
{ icon: LayoutDashboard, label: "Tableau de bord", path: "/admin" },
|
||||
{ icon: GraduationCap, label: "Formations", path: "/admin/formations" },
|
||||
{ icon: Calendar, label: "Séquences", path: "/admin/sequences" },
|
||||
{ icon: CalendarDays, label: "Calendrier", path: "/admin/calendrier" },
|
||||
{ icon: Bell, label: "Rappels", path: "/admin/rappels" },
|
||||
{ icon: Users, label: "Apprenants", path: "/admin/apprenants" },
|
||||
{ icon: Building2, label: "Établissements", path: "/admin/etablissements" },
|
||||
{ icon: UserCog, label: "Utilisateurs", path: "/admin/users" },
|
||||
{ icon: Mail, label: "Templates d'emails", path: "/admin/email-templates" },
|
||||
{ icon: Settings, label: "Configuration SMTP", path: "/admin/email-config" },
|
||||
{ icon: TrendingUp, label: "Tableau de bord analytique", path: "/admin/analytics" },
|
||||
{ icon: BarChart3, label: "Rapport Public Cible", path: "/admin/rapport-public-cible" },
|
||||
const menuSections = [
|
||||
{
|
||||
title: "Tableau de bord",
|
||||
items: [
|
||||
{ icon: LayoutDashboard, label: "Tableau de bord", path: "/admin" },
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Gestion",
|
||||
items: [
|
||||
{ icon: GraduationCap, label: "Formations", path: "/admin/formations" },
|
||||
{ icon: Calendar, label: "Séquences", path: "/admin/sequences" },
|
||||
{ icon: CalendarDays, label: "Calendrier", path: "/admin/calendrier" },
|
||||
{ icon: Users, label: "Apprenants", path: "/admin/apprenants" },
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Configuration",
|
||||
items: [
|
||||
{ icon: UserCog, label: "Utilisateurs", path: "/admin/users" },
|
||||
{ icon: Bell, label: "Rappels", path: "/admin/rappels" },
|
||||
{ icon: Mail, label: "Templates d'emails", path: "/admin/email-templates" },
|
||||
{ icon: Settings, label: "Configuration SMTP", path: "/admin/email-config" },
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Analyses",
|
||||
items: [
|
||||
{ icon: Building2, label: "Établissements", path: "/admin/etablissements" },
|
||||
{ icon: TrendingUp, label: "Tableau de bord analytique", path: "/admin/analytics" },
|
||||
{ icon: BarChart3, label: "Rapport Public Cible", path: "/admin/rapport-public-cible" },
|
||||
]
|
||||
},
|
||||
];
|
||||
|
||||
const SIDEBAR_WIDTH_KEY = "sidebar-width";
|
||||
@@ -131,7 +151,7 @@ function DashboardLayoutContent({
|
||||
const isCollapsed = state === "collapsed";
|
||||
const [isResizing, setIsResizing] = useState(false);
|
||||
const sidebarRef = useRef<HTMLDivElement>(null);
|
||||
const activeMenuItem = menuItems.find(item => item.path === location);
|
||||
const activeMenuItem = menuSections.flatMap(section => section.items).find(item => item.path === location);
|
||||
const isMobile = useIsMobile();
|
||||
|
||||
useEffect(() => {
|
||||
@@ -218,26 +238,38 @@ function DashboardLayoutContent({
|
||||
</SidebarHeader>
|
||||
|
||||
<SidebarContent className="gap-0">
|
||||
<SidebarMenu className="px-2 py-1">
|
||||
{menuItems.map(item => {
|
||||
const isActive = location === item.path;
|
||||
return (
|
||||
<SidebarMenuItem key={item.path}>
|
||||
<SidebarMenuButton
|
||||
isActive={isActive}
|
||||
onClick={() => setLocation(item.path)}
|
||||
tooltip={item.label}
|
||||
className={`h-10 transition-all font-normal`}
|
||||
>
|
||||
<item.icon
|
||||
className={`h-4 w-4 ${isActive ? "text-primary" : ""}`}
|
||||
/>
|
||||
<span>{item.label}</span>
|
||||
</SidebarMenuButton>
|
||||
</SidebarMenuItem>
|
||||
);
|
||||
})}
|
||||
</SidebarMenu>
|
||||
{menuSections.map((section, sectionIndex) => (
|
||||
<div key={section.title}>
|
||||
{sectionIndex > 0 && (
|
||||
<div className="border-t border-border my-2" />
|
||||
)}
|
||||
<div className="px-4 py-2">
|
||||
<h3 className="text-xs font-semibold text-muted-foreground uppercase tracking-wider">
|
||||
{section.title}
|
||||
</h3>
|
||||
</div>
|
||||
<SidebarMenu className="px-2 py-1">
|
||||
{section.items.map(item => {
|
||||
const isActive = location === item.path;
|
||||
return (
|
||||
<SidebarMenuItem key={item.path}>
|
||||
<SidebarMenuButton
|
||||
isActive={isActive}
|
||||
onClick={() => setLocation(item.path)}
|
||||
tooltip={item.label}
|
||||
className={`h-10 transition-all font-normal`}
|
||||
>
|
||||
<item.icon
|
||||
className={`h-4 w-4 ${isActive ? "text-primary" : ""}`}
|
||||
/>
|
||||
<span>{item.label}</span>
|
||||
</SidebarMenuButton>
|
||||
</SidebarMenuItem>
|
||||
);
|
||||
})}
|
||||
</SidebarMenu>
|
||||
</div>
|
||||
))}
|
||||
</SidebarContent>
|
||||
|
||||
<SidebarFooter className="p-3">
|
||||
|
||||
8
todo.md
8
todo.md
@@ -576,3 +576,11 @@
|
||||
## Correction erreur React #31 dans le calendrier
|
||||
|
||||
- [x] Corriger l'erreur d'objet passé comme enfant React dans le modal de détails du calendrier
|
||||
|
||||
## Réorganisation du menu du tableau de bord
|
||||
|
||||
- [x] Réorganiser le menu en 4 zones distinctes avec séparateurs visuels
|
||||
- Zone 1 : Tableau de bord
|
||||
- Zone 2 : Gestion (Formations, Séquences, Calendrier, Apprenants)
|
||||
- Zone 3 : Configuration (Utilisateurs, Rappels, Templates d'emails, Configuration SMTP)
|
||||
- Zone 4 : Analyses (Établissements, Tableau de bord analytique, Rapport public cible)
|
||||
|
||||
Reference in New Issue
Block a user