header for disconnected pages

frontend/src/app/(disconnected)/layout.tsx

@@ -0,0 +1,24 @@
+// /connexion/layout.tsx
+"use client"
+import React from 'react';
+import { Card, Layout } from 'antd';
+
+import OfflineHeader from '@/components/offlineHeader';
+const { Content } = Layout;
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+       return (
+              <Layout style={{ minHeight: '100vh' }}>
+                     <Layout>
+                            <OfflineHeader />
+                            <Content className="py-20 px-10 lg:px-32">
+                                   <Card className='w-full h-full flex flex-row justify-center'>
+                                          <div className="p-10">
+                                                 {children}
+                                          </div>
+                                   </Card>
+                            </Content>
+                     </Layout>
+              </Layout>
+       );
+}

frontend/src/components/header.tsx

@@ -1,6 +1,6 @@
 
 import { Layout, Menu, Avatar, Spin, Tooltip } from "antd"
-import { FileDoneOutlined, FolderOpenOutlined, StarOutlined, PlusCircleOutlined, UserOutlined, LogoutOutlined, DashboardOutlined, UnorderedListOutlined } from '@ant-design/icons';
+import { FileDoneOutlined, FolderOpenOutlined, StarOutlined, PlusCircleOutlined, UserOutlined, LogoutOutlined, DashboardOutlined } from '@ant-design/icons';
 import { useUser } from "@/providers/userProvider";
 import { useState, useEffect } from "react";
 import useLogout from "@/utils/logout";
@@ -9,7 +9,6 @@ import Link from "next/link";
 const { Header: AntdHeader } = Layout;
 import Image from 'next/image';
 import logo from "/public/logo.png"
-const { Sider } = Layout;
 
 export default function Header({ collapsed, setCollapsed }: { collapsed: Boolean, setCollapsed: (collapsed: boolean) => void }) {
        const { user } = useUser();

frontend/src/components/offlineHeader.tsx

@@ -0,0 +1,67 @@
+"use client"
+
+import { Layout, Menu, Tooltip, Button } from "antd"
+import { usePathname } from "next/navigation";
+import Link from "next/link";
+const { Header: AntdHeader } = Layout;
+import Image from 'next/image';
+import logo from "/public/logo.png"
+
+export default function OfflineHeader() {
+       const pathname = usePathname();
+       const selectedKey = pathname.split('/')[1];
+
+       // Définir les éléments du menu en fonction du rôle de l'utilisateur
+       const headerItems = [
+              {
+                     label: <Link href={"/connexion"}><Button type="primary">{`Se connecter / S'inscrire`}</Button></Link>,
+                     key: 'connexion',
+              },
+              // Ajouter le tableau de bord uniquement si l'utilisateur est un modérateur ou plus
+       ];
+
+       return (
+              <AntdHeader style={{
+                     padding: 0,
+                     position: 'sticky',
+                     top: 0,
+                     display: 'flex',
+                     alignItems: 'center',
+                     justifyContent: 'space-between', // Utilisez cette propriété pour aligner les éléments à gauche et à droite
+                     zIndex: 5,
+                     background: 'white'
+              }}>
+                     <div style={
+                            {
+                                   borderBottomWidth: 1,
+                                   borderBottomStyle: 'solid',
+                                   borderBottomColor: 'rgba(5, 5, 5, 0.06)',
+                            }
+                     }
+                            className="w-fit h-full flex flex-row items-center">
+                            <Tooltip title="(Re)Sources Relationnelles - Ministère des solidarités et de la santé ">
+                                   <Image
+                                          draggable={false}
+                                          className='rounded-none pl-8 py-2'
+                                          src={logo}
+                                          alt="Logo du ministère des solidarités et de la santé"
+                                          width={95}
+                                          height={110}
+                                   />
+                            </Tooltip>
+
+                            <Link href={'/'} className="ml-5 text-lg font-semibold text-gray-800 hover:text-blue-600 transition-colors duration-500">
+                            {`Bienvenue sur (Re)Sources Relationnelles`}
+                     </Link>
+                     </div>
+                     <Menu
+                            mode="horizontal"
+                            items={headerItems}
+                            selectedKeys={[selectedKey]}
+                            className="flex flex-row justify-end"
+                            style={{ minWidth: 0, flex: "auto" }}
+                            theme="light"
+                     />
+              </AntdHeader>
+       );
+}