84 lines
1.7 KiB
React
84 lines
1.7 KiB
React
|
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;
|