90 lines
2.9 KiB
React
90 lines
2.9 KiB
React
|
import { useNavigate, useLocation } from "react-router-dom";
|
|||
|
|
import { Statistic } from "@arco-design/web-react";
|
|||
|
|
import { useSelector } from "react-redux";
|
|||
|
|
import IconFont from "@/components/IconFont";
|
|||
|
|
import ICON from "@/assets/images/Sidebar/sidebar_icon.png";
|
|||
|
|
import ICONRETRACT 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 studentInfo = useSelector((state) => state.student.studentInfo);
|
|||
|
|
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={isCollapsed ? ICON : ICONRETRACT} alt="icon" />
|
|||
|
|
</div>
|
|||
|
|
<div className="user-info-wrapper">
|
|||
|
|
<img
|
|||
|
|
alt="avatar"
|
|||
|
|
className="user-avatar"
|
|||
|
|
src="//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/3ee5f13fb09879ecb5185e440cef6eb9.png~tplv-uwbnlip3yd-webp.webp"
|
|||
|
|
/>
|
|||
|
|
{isCollapsed && (
|
|||
|
|
<div className="user-info">
|
|||
|
|
<span className="user-name">{studentInfo?.realName}</span>
|
|||
|
|
<span className="user-id">学号：{studentInfo?.id}</span>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
<Statistic
|
|||
|
|
className="visitor-count"
|
|||
|
|
groupSeparator
|
|||
|
|
value={125670}
|
|||
|
|
prefix="访客总数："
|
|||
|
|
/>
|
|||
|
|
<ul className="sidebar-menu">
|
|||
|
|
{routes
|
|||
|
|
.filter((item) => item.showMenu)
|
|||
|
|
?.map((item) => (
|
|||
|
|
<div key={item.key} className="sidebar-menu-item-wrapper">
|
|||
|
|
<p className="sidebar-menu-title">{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"
|
|||
|
|
src={location.pathname === j.path ? j.active : j.default}
|
|||
|
|
/>
|
|||
|
|
<span className="sidebar-menu-text">{j.name}</span>
|
|||
|
|
</li>
|
|||
|
|
))}
|
|||
|
|
</div>
|
|||
|
|
))}
|
|||
|
|
</ul>
|
|||
|
|
<div className="sidebar-btn" onClick={toggleSidebar}>
|
|||
|
|
<img src={BTNICON} alt="btn" className="sidebar-btn-icon" />
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
export default Sidebar;
|