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>
        
 </>
  );
}