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;
+