layout + navbar

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;