82 lines
2.5 KiB
JavaScript
82 lines
2.5 KiB
JavaScript
import { useNavigate, useLocation } from "react-router-dom";
|
||
import { mockData } from "@/data/mockData";
|
||
import IconFont from "@/components/IconFont";
|
||
import Logo from "@/assets/images/Sidebar/logo.png";
|
||
import BTNICON from "@/assets/images/Sidebar/btn_icon.png";
|
||
import routes from "@/routes";
|
||
import "./index.css";
|
||
|
||
const Sidebar = ({ isCollapsed, setIsCollapsed }) => {
|
||
const navigate = useNavigate();
|
||
const location = useLocation();
|
||
const { user } = mockData;
|
||
|
||
const handleNavClick = (path) => {
|
||
navigate(path);
|
||
};
|
||
|
||
// 切换侧边栏展开/折叠状态
|
||
const toggleSidebar = () => {
|
||
setIsCollapsed((prev) => !prev);
|
||
};
|
||
|
||
return (
|
||
<div
|
||
className={`${
|
||
!isCollapsed
|
||
? "sidebar-retract-wrapper sidebar-expand-wrapper"
|
||
: "sidebar-expand-wrapper"
|
||
}`}
|
||
>
|
||
<div className="sidebar-title">
|
||
<img src={Logo} alt="logo" />
|
||
<p>多多畅职教育系统</p>
|
||
</div>
|
||
<div className="user-info">
|
||
<img
|
||
alt="avatar"
|
||
className="user-avatar"
|
||
src="//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/3ee5f13fb09879ecb5185e440cef6eb9.png~tplv-uwbnlip3yd-webp.webp"
|
||
/>
|
||
</div>
|
||
<div className="visitor-count">访客总数：1000</div>
|
||
<ul className="sidebar-menu">
|
||
{routes
|
||
.filter((item) => item.showMenu)
|
||
?.map((item) => (
|
||
<>
|
||
<p className="sidebar-menu-title" key={item.name}>
|
||
{item.name}
|
||
</p>
|
||
{item.routes
|
||
?.filter((i) => i.showMenuItem)
|
||
?.map((j) => (
|
||
<li
|
||
className={
|
||
location.pathname === j.path
|
||
? "sidebar-menu-item-active sidebar-menu-item"
|
||
: "sidebar-menu-item"
|
||
}
|
||
key={j.path}
|
||
onClick={() => handleNavClick(j.path)}
|
||
>
|
||
<IconFont
|
||
className="sidebar-menu-icon"
|
||
name="icon-yishiming"
|
||
/>
|
||
<span className="sidebar-menu-text">{j.name}</span>
|
||
</li>
|
||
))}
|
||
</>
|
||
))}
|
||
</ul>
|
||
<div className="sidebar-btn" onClick={toggleSidebar}>
|
||
<img src={BTNICON} alt="btn" className="sidebar-btn-icon" />
|
||
<span className="sidebar-btn-text">展开/收起</span>
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default Sidebar;
|