layout + navbar

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;