
File name
Commit message
Commit date
File name
Commit message
Commit date
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 navigate = useNavigate();
//로그아웃
const logout = () => {
fetch("/user/logout.json", {
method: "POST",
headers: {
'Content-Type': 'application/json; charset=UTF-8'
},
/* body: JSON.stringify({}), */
}).then((response) => response.json()).then((data) => {
console.log("로그아웃 결과 : ", data);
if (data == true) {
navigate('/Main');
} else {
alert('로그아웃 실패, 관리자에게 문의바랍니다.');
}
}).catch((error) => {
console.log('logout() /user/logout.json error : ', error);
});
};
return (
<>
<nav
className={menuToggle? "nav on" : "nav"}
>
<div className="menuicon" onClick={onClickshow}><MenuIcon sx={{ width:35, height:35,color:"#7a7f87"}}/></div >
<h1 className="logo"><img src={logo} alt="" /></h1>
<div className="flex-align-column" style={{ marginTop: `3rem` }}>
<ul >
{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" onClick={logout}><span>로그아웃</span></div>
</div>
</nav>
</>
);
}