correct navbar

src/App.jsx

@@ -7,15 +7,20 @@ import Navbar from "./components/nav/Navbar";
 import AppLayout from "./components/app-layout";
 import { PageTitleProvider } from "./hooks/page-title-context";
 
+
+
+
+
 const App = () => (
-    <Authenticated>
-        <PageTitleProvider>
-            <AppLayout>
-            
-            </AppLayout>
-        </PageTitleProvider>
-        
-      </Authenticated>
-);
+
+        <Authenticated>
+            <PageTitleProvider>
+                <AppLayout>
+                </AppLayout>
+            </PageTitleProvider>
+
+        </Authenticated>
+    );
 
 export default App;
+

src/components/app-layout.jsx

@@ -1,27 +1,25 @@
 import React, { useState } from 'react';
-import { Layout, Menu, theme, Button } from 'antd';
+
+import { Layout, 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 AppLayout = ({ footer }) => {
     const [collapsed, setCollapsed] = useState(false);
     const { pageTitle } = usePageTitle();
     const {
         token: { colorBgContainer, borderRadiusLG },
     } = theme.useToken();
 
+    
+
     return (
-        <Layout >
+        <Layout style={{ height:'100vh' }}>
             <Sider breakpoint="lg" collapsible collapsed={collapsed}>
                 <div className="demo-logo-vertical" />
                 <Navbar/>
@@ -32,9 +30,9 @@ const AppLayout = ({ navbar, footer }) => {
                     {pageTitle}
                 </Header>
 
-                <Content style={{margin: '24px 16px 0'}}>
-                    <div style={{padding: 24, minHeight: 360, background: colorBgContainer, borderRadius: borderRadiusLG}}>
-                        <Router />
+                <Content style={{ margin: '24px 16px 0'}}>
+                    <div style={{ padding: 24, minHeight: 360, background: colorBgContainer, borderRadius: borderRadiusLG }}>
+                            <Router />
                     </div>
                 </Content>
                 <Footer style={{ textAlign: 'center' }}>

src/components/authenticated.jsx

@@ -4,4 +4,4 @@ import { AuthenticationProvider } from "../contexts";
 
 export const Authenticated = ({ children }) => {
   return <AuthenticationProvider>{children}</AuthenticationProvider>;
-};
+};

src/components/nav/Navbar.jsx

@@ -1,55 +1,85 @@
 import React, { useState, useEffect } from "react";
-import { HomeOutlined } from '@ant-design/icons-svg';
 import { Menu } from "antd";
+import { HomeOutlined } from "@ant-design/icons"
 import { Home } from "../../pages";
 import { getRoom } from "../../api/room";
-function getItem(label, key, type, icon, children) {
-  return {
-      key: String(key),
-      icon,
-      children,
-      label,
-      type,
-  };
+import { isLoggedIn } from "../../api/authentication"
+import { Test } from "../../pages/test";
+import { Link } from "react-router-dom";
+
+function getItem(key, label) {
+  //return {
+  //    key: String(key),
+  //    icon,
+  //    children,
+  //    label,
+  //    link,
+    //};
+    var item = <Menu.Item key={key}>
+        <Link to="/test">{label}</Link>
+    </Menu.Item >
+    return item
 }
 
+const { SubMenu } = Menu;
+
 // Component
 const Navbar = () => {
   //Hook calls
     const [rooms, setRooms] = useState([]);
 
-  useEffect(() => {
-      if (true) {
-        getRoom().then((result) => {
-        setRooms(result);
-      });
-    }
-  }, []);
+    useEffect(() => {
+        console.log("NAVBAR EFFECT")
+        isLoggedIn().then((user) => {
+            if (user !== "Unauthorized") {
+                getRoom().then((result) => {
+                    setRooms(result);
+                })
+            }
+        })
+    }, []);
+
+
+
 
     const roomItems = rooms.map((room, index) => (
-        getItem(room.name, `sub${index}`, <Home />)
+        console.log(index),
+        getItem(`sub${index}`, room.name)
     ));
 
+
     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
-        },
+        <Menu.Item key="0">
+            <Link to="/">Menu Principal</Link>
+        </Menu.Item>,
+        <Menu.Item key="1" >
+            <Link to="/home">Home</Link>
+        </Menu.Item>,
+        <Menu.Item key="2" >
+            <Link to="/test">Test</Link>
+        </Menu.Item>,
+        <SubMenu key="3"  title="Chambres">
+            {roomItems}
+        </SubMenu>
+
+
     ];
 
     // Rendu du composant Navbar
-    return (
-        <Menu
-            defaultSelectedKeys={["1"]}
-            defaultOpenKeys={["sub1"]}
-            theme="dark"
-            mode="inline"
-            items={items}
-        />
-    );
+    try {
+        return (
+            <Menu
+                defaultSelectedKeys={["1"]}
+                defaultOpenKeys={["sub1"]}
+                theme="dark"
+                mode="inline"
+            >
+                {items}
+
+            </Menu>
+        );
+    } catch (error) {
+        console.log(error.stack)
+    }
 };
 export default Navbar;

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 useGetAuth() {
+  return React.useContext(AuthenticationContext).user;
+}

src/main.jsx

@@ -9,13 +9,13 @@ import { Layout } from "antd";
 
 setupAxios();
 
+
+
 ReactDOM.createRoot(document.getElementById("root")).render(
   <React.StrictMode>
     <BrowserRouter>
       <CookiesProvider>
-        <Layout>
-          <App />
-        </Layout>
+        <App/>
       </CookiesProvider>
     </BrowserRouter>
   </React.StrictMode>,

src/pages/home.jsx

@@ -1,7 +1,6 @@
 import React from "react";
 
 import { useAuth } from "../hooks";
-import { DatePicker } from "antd";
 import { FormCreateItem } from "../components/form/formCreateItem";
 import { FormCreateRoom } from "../components/form/formCreateRoom";
 import { RoomItemsList } from "../components/item/RoomItemsList";