499 lines
23 KiB
TypeScript
499 lines
23 KiB
TypeScript
'use client';
|
|
|
|
import { useRouter, usePathname } from 'next/navigation';
|
|
import { useState } from 'react';
|
|
import Image from 'next/image';
|
|
import Link from 'next/link';
|
|
import useSWR from 'swr';
|
|
|
|
interface User {
|
|
id: string;
|
|
email: string;
|
|
name: string | null;
|
|
photoUrl?: string | null;
|
|
roleId?: string | null;
|
|
}
|
|
|
|
interface DashboardLayoutProps {
|
|
user: User;
|
|
children: React.ReactNode;
|
|
}
|
|
|
|
interface NavItem {
|
|
label: string;
|
|
href: string;
|
|
icon: React.ReactNode;
|
|
}
|
|
|
|
const fetcher = (url: string) => fetch(url).then((res) => res.json());
|
|
|
|
export default function DashboardLayout({ user, children }: DashboardLayoutProps) {
|
|
const router = useRouter();
|
|
const pathname = usePathname();
|
|
const [loading, setLoading] = useState(false);
|
|
const [showNotifications, setShowNotifications] = useState(false);
|
|
const [showProfileMenu, setShowProfileMenu] = useState(false);
|
|
const [sidebarOpen, setSidebarOpen] = useState(false);
|
|
|
|
// Récupérer les conversations pour compter les messages non lus
|
|
const { data: conversations } = useSWR<Array<{ unreadCount: number }>>(
|
|
'/api/conversations',
|
|
fetcher,
|
|
{
|
|
refreshInterval: 3000, // Rafraîchir toutes les 3 secondes
|
|
}
|
|
);
|
|
|
|
// Récupérer les notifications
|
|
const { data: notificationsData, mutate: mutateNotifications } = useSWR<{
|
|
notifications: Array<{
|
|
id: string;
|
|
type: string;
|
|
title: string;
|
|
message: string;
|
|
read: boolean;
|
|
link: string | null;
|
|
createdAt: string;
|
|
}>;
|
|
unreadCount: number;
|
|
}>(
|
|
'/api/notifications',
|
|
fetcher,
|
|
{
|
|
refreshInterval: 3000, // Rafraîchir toutes les 3 secondes
|
|
}
|
|
);
|
|
|
|
const notifications = notificationsData?.notifications || [];
|
|
const unreadNotificationsCount = notificationsData?.unreadCount || 0;
|
|
|
|
// Récupérer les pages accessibles pour l'utilisateur
|
|
const { data: userPagesData } = useSWR<{ pages: string[] }>(
|
|
'/api/user/pages',
|
|
fetcher
|
|
);
|
|
|
|
// Récupérer le profil complet de l'utilisateur pour la photo
|
|
const { data: userProfile } = useSWR<{ photoUrl?: string | null }>(
|
|
'/api/user/profile',
|
|
fetcher
|
|
);
|
|
|
|
const accessiblePages = userPagesData?.pages || [];
|
|
const userPhotoUrl = userProfile?.photoUrl;
|
|
|
|
// Calculer le nombre total de messages non lus
|
|
const totalUnreadCount = Array.isArray(conversations)
|
|
? conversations.reduce((sum, conv) => sum + (conv.unreadCount || 0), 0)
|
|
: 0;
|
|
|
|
const getUserInitials = () => {
|
|
if (user.name) {
|
|
const names = user.name.split(' ');
|
|
if (names.length >= 2) {
|
|
return `${names[0].charAt(0)}${names[1].charAt(0)}`.toUpperCase();
|
|
}
|
|
return user.name.charAt(0).toUpperCase();
|
|
}
|
|
return user.email.charAt(0).toUpperCase();
|
|
};
|
|
|
|
const navItems: NavItem[] = [
|
|
{
|
|
label: 'Tableau de Board',
|
|
href: '/dashboard',
|
|
icon: (
|
|
<svg className="w-6 h-6" fill="currentColor" viewBox="0 0 20 20">
|
|
<path d="M2 4a1 1 0 011-1h2a1 1 0 011 1v12a1 1 0 01-1 1H3a1 1 0 01-1-1V4zM8 4a1 1 0 011-1h2a1 1 0 011 1v12a1 1 0 01-1 1H9a1 1 0 01-1-1V4zM15 3a1 1 0 00-1 1v12a1 1 0 001 1h2a1 1 0 001-1V4a1 1 0 00-1-1h-2z" />
|
|
</svg>
|
|
),
|
|
},
|
|
{
|
|
label: 'Calendrier',
|
|
href: '/dashboard/calendrier',
|
|
icon: (
|
|
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
|
|
</svg>
|
|
),
|
|
},
|
|
{
|
|
label: 'Chauffeurs',
|
|
href: '/dashboard/chauffeurs',
|
|
icon: (
|
|
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 17a2 2 0 11-4 0 2 2 0 014 0zM19 17a2 2 0 11-4 0 2 2 0 014 0z" />
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16V6a1 1 0 00-1-1H4a1 1 0 00-1 1v10a1 1 0 001 1h1m8-1a1 1 0 01-1 1H9m4-1V8a1 1 0 011-1h2.586a1 1 0 01.707.293l3.414 3.414a1 1 0 01.293.707V16a1 1 0 01-1 1h-1m-6-1a1 1 0 001 1h1M5 17a2 2 0 104 0m-4 0a2 2 0 114 0m6 0a2 2 0 104 0m-4 0a2 2 0 114 0" />
|
|
</svg>
|
|
),
|
|
},
|
|
{
|
|
label: 'Adhérents',
|
|
href: '/dashboard/adherents',
|
|
icon: (
|
|
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z" />
|
|
</svg>
|
|
),
|
|
},
|
|
{
|
|
label: 'Univers Pro',
|
|
href: '/dashboard/univers-pro',
|
|
icon: (
|
|
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
|
|
</svg>
|
|
),
|
|
},
|
|
{
|
|
label: 'Messagerie',
|
|
href: '/dashboard/messagerie',
|
|
icon: (
|
|
<div className="relative">
|
|
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
|
|
</svg>
|
|
</div>
|
|
),
|
|
},
|
|
{
|
|
label: 'Participation financière',
|
|
href: '/dashboard/factures',
|
|
icon: (
|
|
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
|
</svg>
|
|
),
|
|
},
|
|
{
|
|
label: 'Archives',
|
|
href: '/dashboard/archives',
|
|
icon: (
|
|
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4" />
|
|
</svg>
|
|
),
|
|
},
|
|
];
|
|
|
|
const handleLogout = async () => {
|
|
setLoading(true);
|
|
try {
|
|
await fetch('/api/auth/logout', { method: 'POST' });
|
|
router.push('/login');
|
|
router.refresh();
|
|
} catch (error) {
|
|
console.error('Logout error:', error);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="min-h-screen bg-cwhite flex">
|
|
{/* Mobile Sidebar Overlay */}
|
|
{sidebarOpen && (
|
|
<div
|
|
className="fixed inset-0 bg-black/50 z-40 lg:hidden"
|
|
onClick={() => setSidebarOpen(false)}
|
|
/>
|
|
)}
|
|
|
|
{/* Sidebar */}
|
|
<aside className={`fixed lg:static inset-y-0 left-0 z-50 w-64 bg-white flex flex-col h-screen border-r border-gray-200 transform transition-transform duration-300 ease-in-out ${
|
|
sidebarOpen ? 'translate-x-0' : '-translate-x-full lg:translate-x-0'
|
|
}`}>
|
|
{/* Logo Section */}
|
|
<div className="py-5 px-4 flex items-center justify-between lg:justify-center">
|
|
<div className="flex items-center gap-3">
|
|
<Image
|
|
src="/logo.svg"
|
|
alt="MAD Logo"
|
|
width={32}
|
|
height={32}
|
|
/>
|
|
<div className="flex items-center gap-2">
|
|
<span className="font-semibold text-gray-900 hidden sm:inline">Association MAD</span>
|
|
<span className="font-semibold text-gray-900 sm:hidden">MAD</span>
|
|
</div>
|
|
</div>
|
|
{/* Close button mobile */}
|
|
<button
|
|
onClick={() => setSidebarOpen(false)}
|
|
className="lg:hidden p-2 rounded-lg hover:bg-gray-100 transition-colors"
|
|
>
|
|
<svg className="w-6 h-6 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
{/* Navigation */}
|
|
<nav className="flex-1 p-4 border-t border-gray-200">
|
|
<ul className="space-y-1">
|
|
{navItems.map((item) => {
|
|
const isActive = pathname === item.href;
|
|
const isMessagerie = item.href === '/dashboard/messagerie';
|
|
const showBadge = isMessagerie && totalUnreadCount > 0;
|
|
|
|
// Vérifier si l'utilisateur a accès à cette page
|
|
// Si accessiblePages est vide (chargement), afficher tous les liens
|
|
// Sinon, vérifier si la page est dans la liste
|
|
const hasAccess = accessiblePages.length === 0 || accessiblePages.includes(item.href);
|
|
|
|
if (!hasAccess) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<li key={item.href}>
|
|
<Link
|
|
href={item.href}
|
|
onClick={() => setSidebarOpen(false)}
|
|
className={`flex items-center gap-3 px-4 py-3 rounded-lg transition-colors relative ${
|
|
isActive
|
|
? 'bg-lblue text-white'
|
|
: 'text-gray-700 hover:bg-lblue/10'
|
|
}`}
|
|
>
|
|
<span className={isActive ? 'text-white' : 'text-lblue'}>{item.icon}</span>
|
|
<span className={`text-sm font-medium flex-1 ${isActive ? '' : ''}`}>
|
|
{item.label}
|
|
</span>
|
|
{showBadge && (
|
|
<span className="absolute top-2 right-2 w-5 h-5 bg-red-500 text-white text-xs font-semibold rounded-full flex items-center justify-center">
|
|
{totalUnreadCount > 99 ? '99+' : totalUnreadCount}
|
|
</span>
|
|
)}
|
|
</Link>
|
|
</li>
|
|
);
|
|
})}
|
|
</ul>
|
|
</nav>
|
|
|
|
{/* Footer */}
|
|
<div className="p-6 border-t border-gray-200">
|
|
<p className="text-xs text-gray-500 text-center">
|
|
© {new Date().getFullYear()} MAD - <a href="https://legouix.dev" target="_blank" className="text-lblue hover:text-dblue">Propulsé par LGX</a>
|
|
</p>
|
|
</div>
|
|
</aside>
|
|
|
|
{/* Main Content Area */}
|
|
<div className="flex-1 flex flex-col">
|
|
{/* Top Navbar */}
|
|
<header className="bg-white border-b border-gray-200 px-4 sm:px-6 py-3 sm:py-4">
|
|
<div className="flex items-center justify-between">
|
|
{/* Hamburger menu button */}
|
|
<button
|
|
onClick={() => setSidebarOpen(true)}
|
|
className="lg:hidden p-2 rounded-lg hover:bg-gray-100 transition-colors"
|
|
>
|
|
<svg className="w-6 h-6 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
|
|
</svg>
|
|
</button>
|
|
<h1 className="text-xl font-semibold text-gray-900 hidden lg:block"></h1>
|
|
<div className="flex items-center gap-1.5 sm:gap-3">
|
|
{/* Notification Button */}
|
|
<div className="relative">
|
|
<button
|
|
onClick={() => setShowNotifications(!showNotifications)}
|
|
className="relative w-8 h-8 sm:w-10 sm:h-10 rounded-lg bg-gray-50 hover:bg-gray-100 border border-gray-200 flex items-center justify-center transition-all duration-200 hover:shadow-sm group"
|
|
aria-label={`Notifications${unreadNotificationsCount > 0 ? ` (${unreadNotificationsCount} non lues)` : ''}`}
|
|
>
|
|
<svg className="w-4 h-4 sm:w-5 sm:h-5 text-gray-600 group-hover:text-gray-900 transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
|
|
</svg>
|
|
{/* Badge de notification */}
|
|
{unreadNotificationsCount > 0 && (
|
|
<span className="absolute -top-0.5 -right-0.5 min-w-[16px] h-4 sm:min-w-[18px] sm:h-[18px] bg-red-500 text-white text-[9px] sm:text-[10px] font-semibold rounded-full border-2 border-white flex items-center justify-center px-0.5 sm:px-1">
|
|
{unreadNotificationsCount > 99 ? '99+' : unreadNotificationsCount}
|
|
</span>
|
|
)}
|
|
</button>
|
|
|
|
{/* Dropdown Notifications */}
|
|
{showNotifications && (
|
|
<div className="fixed sm:absolute right-2 sm:right-0 top-14 sm:top-12 w-[calc(100vw-1rem)] sm:w-80 max-w-sm bg-white rounded-lg shadow-xl border border-gray-200 z-50 animate-slideUp max-h-[calc(100vh-4rem)] sm:max-h-96 flex flex-col">
|
|
<div className="p-3 sm:p-4 border-b border-gray-200 flex items-center justify-between flex-shrink-0">
|
|
<h3 className="text-xs sm:text-sm font-semibold text-gray-900">Notifications</h3>
|
|
{unreadNotificationsCount > 0 && (
|
|
<button
|
|
onClick={async () => {
|
|
try {
|
|
await fetch('/api/notifications', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify({ markAllAsRead: true }),
|
|
});
|
|
mutateNotifications();
|
|
} catch (error) {
|
|
console.error('Erreur lors du marquage des notifications:', error);
|
|
}
|
|
}}
|
|
className="text-[10px] sm:text-xs text-lblue hover:text-dblue font-medium"
|
|
>
|
|
Tout marquer comme lu
|
|
</button>
|
|
)}
|
|
</div>
|
|
<div className="overflow-y-auto flex-1 min-h-0">
|
|
{notifications.length === 0 ? (
|
|
<div className="p-4 text-center text-xs sm:text-sm text-gray-500">
|
|
Aucune notification
|
|
</div>
|
|
) : (
|
|
<div className="divide-y divide-gray-100">
|
|
{notifications.map((notification) => (
|
|
<button
|
|
key={notification.id}
|
|
onClick={async () => {
|
|
// Marquer comme lue
|
|
if (!notification.read) {
|
|
try {
|
|
await fetch('/api/notifications', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify({ notificationId: notification.id }),
|
|
});
|
|
mutateNotifications();
|
|
} catch (error) {
|
|
console.error('Erreur lors du marquage de la notification:', error);
|
|
}
|
|
}
|
|
// Naviguer vers le lien si disponible
|
|
if (notification.link) {
|
|
router.push(notification.link);
|
|
setShowNotifications(false);
|
|
}
|
|
}}
|
|
className={`w-full text-left p-3 sm:p-4 hover:bg-gray-50 transition-colors active:bg-gray-100 ${
|
|
!notification.read ? 'bg-blue-50/50' : ''
|
|
}`}
|
|
>
|
|
<div className="flex items-start gap-2 sm:gap-3">
|
|
<div className={`flex-shrink-0 w-1.5 h-1.5 sm:w-2 sm:h-2 rounded-full mt-1.5 sm:mt-2 ${
|
|
!notification.read ? 'bg-lblue' : 'bg-transparent'
|
|
}`}></div>
|
|
<div className="flex-1 min-w-0">
|
|
<div className="flex items-start sm:items-center justify-between gap-2 mb-1">
|
|
<p className={`text-xs sm:text-sm font-medium flex-1 ${
|
|
!notification.read ? 'text-gray-900' : 'text-gray-700'
|
|
}`}>
|
|
{notification.title}
|
|
</p>
|
|
<span className="text-[10px] sm:text-xs text-gray-400 flex-shrink-0 whitespace-nowrap">
|
|
{new Date(notification.createdAt).toLocaleDateString('fr-FR', {
|
|
day: 'numeric',
|
|
month: 'short',
|
|
hour: '2-digit',
|
|
minute: '2-digit',
|
|
})}
|
|
</span>
|
|
</div>
|
|
<p className="text-[11px] sm:text-xs text-gray-600 line-clamp-2 sm:line-clamp-3">
|
|
{notification.message}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</button>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Profile Avatar */}
|
|
<div className="relative">
|
|
<button
|
|
onClick={() => setShowProfileMenu(!showProfileMenu)}
|
|
className="flex items-center gap-2 sm:gap-3 px-2 sm:px-3 py-2 rounded-lg hover:bg-gray-50 border border-gray-200 transition-all duration-200 hover:shadow-sm group"
|
|
>
|
|
{userPhotoUrl ? (
|
|
<img
|
|
src={userPhotoUrl}
|
|
alt={user.name || 'Utilisateur'}
|
|
className="w-8 h-8 sm:w-9 sm:h-9 rounded-lg object-cover shadow-sm border border-gray-200"
|
|
/>
|
|
) : (
|
|
<div className="w-8 h-8 sm:w-9 sm:h-9 rounded-lg bg-gradient-to-br from-lblue to-dblue flex items-center justify-center shadow-sm">
|
|
<span className="text-white text-xs sm:text-sm font-semibold">{getUserInitials()}</span>
|
|
</div>
|
|
)}
|
|
<div className="hidden lg:block text-left">
|
|
<div className="text-sm font-medium text-gray-900">{user.name || 'Utilisateur'}</div>
|
|
<div className="text-xs text-gray-500">{user.email}</div>
|
|
</div>
|
|
<svg className="hidden sm:block w-4 h-4 text-gray-400 group-hover:text-gray-600 transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
|
|
</svg>
|
|
</button>
|
|
|
|
{/* Dropdown Profile Menu */}
|
|
{showProfileMenu && (
|
|
<div className="absolute right-0 top-14 w-56 sm:w-64 bg-white rounded-lg shadow-xl border border-gray-200 z-50 animate-slideUp">
|
|
<div className="p-4 border-b border-gray-200">
|
|
<div className="text-sm font-medium text-gray-900">{user.name || 'Utilisateur'}</div>
|
|
<div className="text-xs text-gray-500 mt-1">{user.email}</div>
|
|
</div>
|
|
<div className="p-2">
|
|
<button
|
|
onClick={() => {
|
|
setShowProfileMenu(false);
|
|
router.push('/dashboard/parametres');
|
|
}}
|
|
className="w-full px-3 py-2 text-left text-sm text-gray-700 hover:bg-gray-50 rounded-lg transition-colors flex items-center gap-2"
|
|
>
|
|
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
|
|
</svg>
|
|
Paramètres
|
|
</button>
|
|
<div className="border-t border-gray-200 my-1"></div>
|
|
<button
|
|
onClick={handleLogout}
|
|
disabled={loading}
|
|
className="w-full px-3 py-2 text-left text-sm text-red-600 hover:bg-red-50 rounded-lg transition-colors flex items-center gap-2 disabled:opacity-50"
|
|
>
|
|
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" />
|
|
</svg>
|
|
Déconnexion
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
{/* Page Content */}
|
|
<main className="flex-1 overflow-auto">
|
|
{children}
|
|
</main>
|
|
</div>
|
|
|
|
{/* Overlay pour fermer les menus */}
|
|
{(showNotifications || showProfileMenu) && (
|
|
<div
|
|
className="fixed inset-0 z-40 lg:z-30"
|
|
onClick={() => {
|
|
setShowNotifications(false);
|
|
setShowProfileMenu(false);
|
|
}}
|
|
/>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|