用户等级
Change-Id: Id7f963f2e6a048caf05570b097755fa5a8ea37d1
diff --git a/src/pages/UserCenter/UserNav.jsx b/src/pages/UserCenter/UserNav.jsx
new file mode 100644
index 0000000..11d08f8
--- /dev/null
+++ b/src/pages/UserCenter/UserNav.jsx
@@ -0,0 +1,72 @@
+import React from 'react';
+import { Link, useLocation } from 'react-router-dom';
+import './UserNav.css'; // 导入 UserNav 样式文件
+
+const UserNav = () => {
+ const location = useLocation();
+
+ // 竖直导航栏的链接项（已添加“新手任务”）
+ const navLinks = [
+ { to: '/user/profile', label: '个人资料' },
+ { to: '/user/dynamics', label: '我的动态' },
+ { to: '/user/friends', label: '我的好友' },
+ { to: '/user/groups', label: '我的群组' },
+ { to: '/user/collections', label: '我的收藏' },
+ { to: '/user/newbie-tasks', label: '新手任务' },
+ ];
+
+ // 判断路径是否是当前活动页面
+ const isActive = (path) => location.pathname.startsWith(path);
+
+ return (
+ <div className="user-nav-container">
+ <nav className="user-nav">
+ {navLinks.map(({ to, label }) => (
+ <Link
+ key={to}
+ to={to}
+ className={`user-nav-item ${isActive(to) ? 'active' : ''}`}
+ >
+ {label}
+ </Link>
+ ))}
+ </nav>
+ </div>
+ );
+};
+
+export default UserNav;
+
+// import React from 'react';
+// import './UserNav.css';
+
+// const UserNav = ({ activeKey, onSelect }) => {
+// const navLinks = [
+// { key: 'profile', label: '个人资料' },
+// // { key: 'dynamics', label: '我的动态' },
+// // { key: 'friends', label: '我的好友' },
+// // { key: 'groups', label: '我的群组' },
+// // { key: 'collections', label: '我的收藏' },
+// { key: 'newbieTasks', label: '新手任务' },
+// ];
+
+// return (
+// <div className="user-nav-container">
+// <nav className="user-nav">
+// {navLinks.map(({ key, label }) => (
+// <div
+// key={key}
+// className={`user-nav-item ${activeKey === key ? 'active' : ''}`}
+// onClick={() => onSelect(key)}
+// style={{ cursor: 'pointer' }}
+// >
+// {label}
+// </div>
+// ))}
+// </nav>
+// </div>
+// );
+// };
+
+// export default UserNav;
+