This commit is contained in:
Louis Mazin 2026-09-19 15:31:41 +02:00
parent 32750a0cd7
commit 66669e575b
2 changed files with 68 additions and 62 deletions

View File

@ -62,7 +62,6 @@ const NavBar = () => {
}, 150); }, 150);
}; };
// Fonction pour fermer le menu lorsqu'on clique sur un lien sur mobile
const handleCloseMenu = () => { const handleCloseMenu = () => {
if (isMobile) { if (isMobile) {
toggleSidebar(); toggleSidebar();
@ -78,12 +77,12 @@ const NavBar = () => {
{ {
title: 'Résumé hebdomadaire', title: 'Résumé hebdomadaire',
href: '/weekly-summary', href: '/weekly-summary',
icon: CalendarDays, icon: Clock,
}, },
{ {
title: 'Pointage', title: 'Pointage',
href: '/pointage', href: '/pointage',
icon: Clock, icon: CalendarDays,
}, },
]; ];
@ -93,36 +92,35 @@ const NavBar = () => {
onMouseEnter={handleMouseEnter} onMouseEnter={handleMouseEnter}
onMouseLeave={handleMouseLeave} onMouseLeave={handleMouseLeave}
> >
{/* Logo / nom de la boulangerie */} {/* Logo / nom de la boulangerie */}
<SidebarHeader> <SidebarHeader>
<SidebarMenu> <SidebarMenu>
<SidebarMenuItem> <SidebarMenuItem>
<SidebarMenuButton <SidebarMenuButton
asChild
size="lg" size="lg"
tooltip="Le Fournil du Bocage" tooltip="Le Fournil du Bocage"
> onClick={handleCloseMenu}
<Link render={
to="/" <Link
className="flex items-center gap-2" to="/"
onClick={handleCloseMenu} className="flex w-full items-center gap-2"
> >
<div className="flex aspect-square size-8 shrink-0 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground"> <div className="flex aspect-square size-8 shrink-0 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
<Wheat className="size-4" /> <Wheat className="size-4" />
</div> </div>
<div className="grid min-w-0 flex-1 text-left text-sm leading-tight"> <div className="grid min-w-0 flex-1 text-left text-sm leading-tight">
<span className="truncate font-semibold"> <span className="truncate font-semibold">
Le Fournil du Bocage Le Fournil du Bocage
</span> </span>
<span className="truncate text-xs"> <span className="truncate text-xs">
Gestion Gestion
</span> </span>
</div> </div>
</Link> </Link>
</SidebarMenuButton> }
/>
</SidebarMenuItem> </SidebarMenuItem>
</SidebarMenu> </SidebarMenu>
</SidebarHeader> </SidebarHeader>
@ -130,7 +128,7 @@ const NavBar = () => {
{/* Navigation */} {/* Navigation */}
<SidebarContent> <SidebarContent>
<SidebarGroup> <SidebarGroup>
<SidebarGroupLabel> <SidebarGroupLabel className="text-lg">
Navigation Navigation
</SidebarGroupLabel> </SidebarGroupLabel>
@ -142,21 +140,22 @@ const NavBar = () => {
return ( return (
<SidebarMenuItem key={item.href}> <SidebarMenuItem key={item.href}>
<SidebarMenuButton <SidebarMenuButton
asChild
tooltip={item.title} tooltip={item.title}
> onClick={handleCloseMenu}
<NavLink className="w-full"
to={item.href} render={
className="flex items-center gap-2" <NavLink
onClick={handleCloseMenu} to={item.href}
> className="flex w-full items-center gap-2 text-base"
<Icon className="size-4 shrink-0" /> >
<Icon className="size-6 shrink-0" />
<span className="truncate"> <span className="truncate text-base">
{item.title} {item.title}
</span> </span>
</NavLink> </NavLink>
</SidebarMenuButton> }
/>
</SidebarMenuItem> </SidebarMenuItem>
); );
})} })}
@ -167,7 +166,7 @@ const NavBar = () => {
{/* Administration */} {/* Administration */}
{user.is_admin && ( {user.is_admin && (
<SidebarGroup> <SidebarGroup>
<SidebarGroupLabel> <SidebarGroupLabel className="text-lg">
Administration Administration
</SidebarGroupLabel> </SidebarGroupLabel>
@ -175,27 +174,27 @@ const NavBar = () => {
<SidebarMenu> <SidebarMenu>
<SidebarMenuItem> <SidebarMenuItem>
<SidebarMenuButton <SidebarMenuButton
asChild
tooltip="Comptes existants" tooltip="Comptes existants"
> onClick={handleCloseMenu}
<NavLink className="w-full"
to="/users" render={
className="flex items-center gap-2" <NavLink
onClick={handleCloseMenu} to="/users"
> className="flex w-full items-center gap-2 text-base"
<Users className="size-4 shrink-0" /> >
<Users className="size-6 shrink-0" />
<span className="truncate"> <span className="truncate text-base">
Comptes existants Comptes existants
</span> </span>
</NavLink> </NavLink>
</SidebarMenuButton> }
/>
</SidebarMenuItem> </SidebarMenuItem>
</SidebarMenu> </SidebarMenu>
</SidebarGroupContent> </SidebarGroupContent>
</SidebarGroup> </SidebarGroup>
)} )}
</SidebarContent> </SidebarContent>
{/* Déconnexion */} {/* Déconnexion */}
@ -203,16 +202,23 @@ const NavBar = () => {
<SidebarMenu> <SidebarMenu>
<SidebarMenuItem> <SidebarMenuItem>
<SidebarMenuButton <SidebarMenuButton
onClick={logout}
tooltip="Déconnexion" tooltip="Déconnexion"
className="flex items-center gap-2" onClick={handleCloseMenu}
> className="w-full"
<LogOut className="size-4 shrink-0" /> render={
<button
type="button"
onClick={logout}
className="flex w-full items-center gap-2 text-base"
>
<LogOut className="size-6 shrink-0" />
<span className="truncate"> <span className="truncate text-base">
Déconnexion Déconnexion
</span> </span>
</SidebarMenuButton> </button>
}
/>
</SidebarMenuItem> </SidebarMenuItem>
</SidebarMenu> </SidebarMenu>
</SidebarFooter> </SidebarFooter>

View File

@ -29,7 +29,7 @@ const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
const SIDEBAR_WIDTH = "16rem" const SIDEBAR_WIDTH = "16rem"
const SIDEBAR_WIDTH_MOBILE = "18rem" const SIDEBAR_WIDTH_MOBILE = "18rem"
const SIDEBAR_WIDTH_ICON = "3rem" const SIDEBAR_WIDTH_ICON = "3rem"
const SIDEBAR_KEYBOARD_SHORTCUT = "b" const SIDEBAR_KEYBOARD_SHORTCUT = null
const SidebarContext = React.createContext(null) const SidebarContext = React.createContext(null)