commit

package-lock.json

@@ -18,6 +18,7 @@
         "react-router-dom": "^6.21.3"
       },
       "devDependencies": {
+        "antd": "^5.15.4",
         "@playwright/test": "^1.42.1",
         "@testing-library/react": "^14.1.2",
         "@types/node": "^20.11.9",

package.json

@@ -24,6 +24,7 @@
     "react-router-dom": "^6.21.3"
   },
   "devDependencies": {
+    "antd": "^5.15.4",
     "@playwright/test": "^1.42.1",
     "@testing-library/react": "^14.1.2",
     "@types/node": "^20.11.9",

src/App copy.jsx

@@ -1,13 +0,0 @@
-import React from "react";
-
-import { Authenticated } from "./components";
-
-import { Router } from "./router";
-
-const App = () => (
-  <Authenticated>
-    <Router />
-  </Authenticated>
-);
-
-export default App;

src/App.jsx

@@ -3,10 +3,12 @@ import React from "react";
 import { Authenticated } from "./components";
 
 import { Router } from "./router";
+import Navbar from "./components/nav/Navbar";
 
 const App = () => (
   <Authenticated>
     <Router />
+    <Navbar></Navbar>
   </Authenticated>
 );
 

src/api/room.js

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

src/components/nav/Navbar.jsx

@@ -0,0 +1,83 @@
+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 { Home } from "../../pages";
+import { getRoom } from "../../api/room";
+import { getAuth, useAuth } from "../../hooks";
+function getItem(label, key, icon, children, type) {
+  return {
+    key,
+    icon,
+    children,
+    label,
+    type,
+  };
+}
+
+// Component
+const Navbar = () => {
+  //Hook calls
+  const [collapsed, setCollapsed] = useState(false);
+  const toggleCollapsed = () => {
+    setCollapsed(!collapsed);
+  };
+  const [rooms, setRooms] = useState([]);
+
+  useEffect(() => {
+    if (user) {
+      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 />);
+      }),
+    ]),
+  ];
+
+  // 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>
+  );
+};
+export default Navbar;

src/hooks/use-auth.js

@@ -5,3 +5,7 @@ import { AuthenticationContext } from "../contexts";
 export function useAuth() {
   return React.useContext(AuthenticationContext);
 }
+
+export function getAuth() {
+  return React.useContext(AuthenticationContext).user;
+}