个人中心导航栏
Change-Id: I7f73c8c709c0450ef3de5e0090e98bacca3c1dcb
diff --git a/src/pages/UserCenter/UserNav/UserNav.css b/src/pages/UserCenter/UserNav/UserNav.css
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/src/pages/UserCenter/UserNav/UserNav.css
diff --git a/src/pages/UserCenter/UserNav/UserNav.jsx b/src/pages/UserCenter/UserNav/UserNav.jsx
new file mode 100644
index 0000000..c4659d6
--- /dev/null
+++ b/src/pages/UserCenter/UserNav/UserNav.jsx
@@ -0,0 +1,38 @@
+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: '我的收藏' },
+ ];
+
+ // 判断路径是否是当前活动页面
+ 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;
+s
\ No newline at end of file