refactor: adaptation mobile

This commit is contained in:
Luc SORIGNET
2025-03-01 14:54:25 +01:00
parent d62be6b309
commit 4b8f85e68d
6 changed files with 237 additions and 89 deletions

View File

@ -66,48 +66,45 @@ export default function Layout({
<ProtectedRoute>
<div className="flex flex-col min-h-screen bg-gray-50">
{/* Entête */}
<header className="bg-white border-b border-gray-200 px-8 py-4 flex items-center justify-between fixed top-0 left-0 right-0 z-10">
<header className="bg-white border-b border-gray-200 px-4 py-2 md:px-8 md:py-4 flex items-center justify-between fixed top-0 left-0 right-0 z-10">
<div className="flex items-center space-x-2">
<Logo className="h-8 w-8" /> {/* Utilisation du composant Logo */}
<Logo className="h-6 w-6 md:h-8 md:w-8" /> {/* Utilisation du composant Logo */}
<div className="text-xl font-semibold">Accueil</div>
<div className="text-lg md:text-xl font-semibold">Accueil</div>
</div>
<div className="flex items-center space-x-4">
<div className="flex items-center space-x-2 md:space-x-4">
<button
className="p-2 rounded-full hover:bg-gray-200"
className="p-1 md:p-2 rounded-full hover:bg-gray-200"
onClick={() => { router.push(FE_PARENTS_HOME_URL); }} // Utilisation de router pour revenir à l'accueil parent
>
<Home />
<Home className="h-5 w-5 md:h-6 md:w-6" />
</button>
<div className="relative">
<button
className="p-2 rounded-full hover:bg-gray-200"
className="p-1 md:p-2 rounded-full hover:bg-gray-200"
onClick={() => { router.push(FE_PARENTS_MESSAGERIE_URL); }} // Utilisation de router
>
<MessageSquare />
<MessageSquare className="h-5 w-5 md:h-6 md:w-6" />
</button>
{messages.length > 0 && (
<span className="absolute top-0 right-0 block h-2 w-2 rounded-full bg-emerald-600"></span>
)}
</div>
<DropdownMenu
buttonContent={<User />}
buttonContent={<User className="h-5 w-5 md:h-6 md:w-6" />}
items={[
{ label: 'Se déconnecter', icon: LogOut, onClick: handleDisconnect },
{ label: 'Settings', icon: Settings , onClick: () => { router.push(FE_PARENTS_SETTINGS_URL); } }
]}
buttonClassName="p-2 rounded-full hover:bg-gray-200"
menuClassName="absolute right-0 mt-2 w-48 bg-white border border-gray-200 rounded-md shadow-lg"
buttonClassName="p-1 md:p-2 rounded-full hover:bg-gray-200"
menuClassName="absolute right-0 mt-2 w-36 md:w-48 bg-white border border-gray-200 rounded-md shadow-lg"
/>
</div>
</header>
{/* Content */}
<div className="pt-20 p-8 flex-1"> {/* Ajout de flex-1 pour utiliser toute la hauteur disponible */}
<div className="pt-16 md:pt-20 p-4 md:p-8 flex-1"> {/* Ajout de flex-1 pour utiliser toute la hauteur disponible */}
{children}
</div>
</div>