File name
Commit message
Commit date
2023-03-02
File name
Commit message
Commit date
2023-03-02
File name
Commit message
Commit date
import React from "react";
import SidebarItem from "./SidebarItem.jsx";
import Button from "../component/Button.jsx";
import { useNavigate } from "react-router";
import logo from "../../resources/files/images/logo.png";
import MenuIcon from "@mui/icons-material/Menu";
export default function Sidebar({items}) {
const [menuToggle, setMenuToggle] = React.useState(false);
const onClickshow=()=>{
setMenuToggle(!menuToggle)
}
const closeSidebar = () => {
setMenuToggle(false);
};
const navigate = useNavigate();
return (
<>
<nav
className={menuToggle? "nav on" : "nav"}
>
<div className="menuicon" onClick={onClickshow}><MenuIcon sx={{ width:35, height:35,}}/></div >
<h1 className="logo"><img src={logo} alt="" /></h1>
<div className="flex-align-column" style={{ marginTop: `3rem` }}>
<ul onClick={closeSidebar}>
{items.map((item, index) => (
<SidebarItem key={index} item={item} />
))}
</ul>
</div>
<div className="bottom-section flex-center">
<div className="info-id" ><span onClick={() => {
navigate("/Join");
}}>계정추가</span></div>
<div className="logout"><span>로그아웃</span></div>
</div>
</nav>
</>
);
}