layout + navbar

src/App.jsx

@@ -4,12 +4,18 @@ import { Authenticated } from "./components";
 
 import { Router } from "./router";
 import Navbar from "./components/nav/Navbar";
+import AppLayout from "./components/app-layout";
+import { PageTitleProvider } from "./hooks/page-title-context";
 
 const App = () => (
-  <Authenticated>
-    <Router />
-    {/* <Navbar></Navbar> */}
-  </Authenticated>
+    <Authenticated>
+        <PageTitleProvider>
+            <AppLayout>
+            
+            </AppLayout>
+        </PageTitleProvider>
+        
+      </Authenticated>
 );
 
 export default App;

src/api/room.js

@@ -1,10 +1,14 @@
 import axios from "axios";
 
+
+
 export const getRoom = async () => {
-  try {
-    const response = await axios.get("/room", {});
-    return response.data;
-  } catch (error) {
-    return error.response.data;
-  }
+    try {
+        const response = await axios.get("/room", {});
+        console.log(response.data)
+        return response.data;
+    } catch (error) {
+        console.log("ERROR", error.response.data)
+        return error.response.data;
+    }
 };

src/components/app-layout.jsx

@@ -0,0 +1,49 @@
+import React, { useState } from 'react';
+import { Layout, Menu, theme, Button } from 'antd';
+import { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons';
+import { Router } from '../router';
+import { usePageTitle } from '../hooks/page-title-context';
+import Navbar from './nav/Navbar';
+const { Header, Content, Footer, Sider } = Layout;
+
+
+
+
+
+
+
+
+const AppLayout = ({ navbar, footer }) => {
+    const [collapsed, setCollapsed] = useState(false);
+    const { pageTitle } = usePageTitle();
+    const {
+        token: { colorBgContainer, borderRadiusLG },
+    } = theme.useToken();
+
+    return (
+        <Layout >
+            <Sider breakpoint="lg" collapsible collapsed={collapsed}>
+                <div className="demo-logo-vertical" />
+                <Navbar/>
+            </Sider>
+            <Layout>
+                <Header style={{ padding: 0, background: colorBgContainer }}>
+                    <Button type="text" icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />} onClick={() => setCollapsed(!collapsed)} style={{fontSize: '16px', width: 64, height: 64}}/>
+                    {pageTitle}
+                </Header>
+
+                <Content style={{margin: '24px 16px 0'}}>
+                    <div style={{padding: 24, minHeight: 360, background: colorBgContainer, borderRadius: borderRadiusLG}}>
+                        <Router />
+                    </div>
+                </Content>
+                <Footer style={{ textAlign: 'center' }}>
+                    {footer}
+                    <br />
+                    Ant Design <EFBFBD>{new Date().getFullYear()} Created by Ant UED
+                </Footer>
+            </Layout>
+        </Layout>
+    );
+};
+export default AppLayout;

src/components/nav/Navbar.jsx

@@ -1,83 +1,55 @@
-import React, { useState } from "react";
-import { Authenticated } from "..";
-import { Router } from "../../router";
-
-import {
-  AppstoreOutlined,
-  ContainerOutlined,
-  DesktopOutlined,
-  MailOutlined,
-  MenuFoldOutlined,
-  MenuUnfoldOutlined,
-  PieChartOutlined,
-} from "@ant-design/icons";
-import { Button, Menu } from "antd";
+import React, { useState, useEffect } from "react";
+import { HomeOutlined } from '@ant-design/icons-svg';
+import { Menu } from "antd";
 import { Home } from "../../pages";
 import { getRoom } from "../../api/room";
-import { getAuth, useAuth } from "../../hooks";
-function getItem(label, key, icon, children, type) {
+function getItem(label, key, type, icon, children) {
   return {
-    key,
-    icon,
-    children,
-    label,
-    type,
+      key: String(key),
+      icon,
+      children,
+      label,
+      type,
   };
 }
 
 // Component
 const Navbar = () => {
   //Hook calls
-  const [collapsed, setCollapsed] = useState(false);
-  const toggleCollapsed = () => {
-    setCollapsed(!collapsed);
-  };
-  const [rooms, setRooms] = useState([]);
+    const [rooms, setRooms] = useState([]);
 
   useEffect(() => {
-    if (user) {
-      getRoom().then((result) => {
+      if (true) {
+        getRoom().then((result) => {
         setRooms(result);
       });
     }
   }, []);
 
-  const items = [
-    getItem("Menu principal", "1", <Home />),
-    getItem("Vue d'ensemble", "2", <Home />),
-    getItem("Chambres", "3", <Home />, [
-      rooms.forEach((room, i = 0) => {
-        i++;
-        getItem(room.name, `sub${i}`, <Home />);
-      }),
-    ]),
-  ];
+    const roomItems = rooms.map((room, index) => (
+        getItem(room.name, `sub${index}`, <Home />)
+    ));
 
-  // Rendering
-  return (
-    <div
-      style={{
-        width: 256,
-      }}
-    >
-      <Button
-        type="primary"
-        onClick={toggleCollapsed}
-        style={{
-          marginBottom: 16,
-        }}
-      >
-        {collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
-      </Button>
-      <Menu
-        defaultSelectedKeys={["1"]}
-        defaultOpenKeys={["sub1"]}
-        mode="inline"
-        theme="dark"
-        inlineCollapsed={collapsed}
-        items={items}
-      />
-    </div>
-  );
+    const items = [
+        getItem("Menu principal", "1", <Home />),
+        getItem("Vue d'ensemble", "2", <Home />),
+        {
+            key: "3",
+            label: "Chambres",
+            icon: "",
+            children: roomItems, // Utilisation des <20>l<EFBFBD>ments de menu des chambres
+        },
+    ];
+
+    // Rendu du composant Navbar
+    return (
+        <Menu
+            defaultSelectedKeys={["1"]}
+            defaultOpenKeys={["sub1"]}
+            theme="dark"
+            mode="inline"
+            items={items}
+        />
+    );
 };
 export default Navbar;

src/hooks/index.js

@@ -1,2 +1,3 @@
 export * from "./use-auth";
 export * from "./use-query";
+export * from "./page-title-context";

src/hooks/page-title-context.jsx

@@ -0,0 +1,23 @@
+import { createContext, useContext, useState } from 'react';
+
+const PageTitleContext = createContext();
+
+// Composant de fournisseur de titre de page
+export const PageTitleProvider = ({ children }) => {
+    const [pageTitle, setPageTitle] = useState("");
+
+    return (
+        <PageTitleContext.Provider value={{ pageTitle, setPageTitle }}>
+            {children}
+        </PageTitleContext.Provider>
+    );
+};
+
+// Hook pour r<>cup<75>rer le titre de la page
+export const usePageTitle = () => {
+    const context = useContext(PageTitleContext);
+    if (!context) {
+        throw new Error('usePageTitle must be used within a PageTitleProvider');
+    }
+    return context;
+};

src/hooks/use-auth.js

@@ -6,6 +6,6 @@ export function useAuth() {
   return React.useContext(AuthenticationContext);
 }
 
-export function getAuth() {
-  return React.useContext(AuthenticationContext).user;
-}
+//export function getAuth() {
+//  return React.useContext(AuthenticationContext).user;
+//}

src/pages/test.jsx

@@ -1,14 +1,19 @@
-import React from "react";
+import React, { useEffect } from 'react';
 
 import { useAuth } from "../hooks";
 import { ItemPage } from "../components/item/ItemPage";
+import { usePageTitle } from '../hooks/page-title-context';
 
 export const Test = () => {
   const { user } = useAuth();
+    const { setPageTitle } = usePageTitle();
 
+    // Mettre à jour le titre de la page dans le contexte
+    useEffect(() => {
+        setPageTitle("Vive la macronie à bat montjoie saint dennis");
+    }, [setPageTitle]);
   return (
     <div>
-      <h1>Vive la macronie à bat montjoie saint dennis</h1>
       <ItemPage></ItemPage>
     </div>
   );