sidebar collapse

2025-04-01 22:51:11 +08:00
parent 87c3803236
commit b187bdefdf
5 changed files with 136 additions and 91 deletions
--- a/app/components/Sidebar.tsx
+++ b/app/components/Sidebar.tsx
@@ -0,0 +1,111 @@
+'use client';
+
+import { useState } from 'react';
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import { 
+  BarChartIcon, 
+  HomeIcon, 
+  PersonIcon, 
+  ChevronLeftIcon, 
+  ChevronRightIcon 
+} from '@radix-ui/react-icons';
+
+interface NavItemProps {
+  href: string;
+  label: string;
+  icon: React.ReactNode;
+  isCollapsed: boolean;
+  isActive?: boolean;
+}
+
+const NavItem = ({ href, label, icon, isCollapsed, isActive }: NavItemProps) => {
+  return (
+    <Link 
+      href={href}
+      className={`flex items-center p-2 rounded-lg ${
+        isActive 
+          ? 'bg-blue-100 text-blue-700' 
+          : 'text-gray-700 hover:bg-gray-100'
+      } transition-all duration-200 group`}
+    >
+      <div className="w-6 h-6 flex items-center justify-center">{icon}</div>
+      {!isCollapsed && (
+        <span className={`ml-3 whitespace-nowrap transition-opacity duration-200 ${
+          isCollapsed ? 'opacity-0 w-0' : 'opacity-100'
+        }`}>
+          {label}
+        </span>
+      )}
+      {isCollapsed && (
+        <span className="sr-only">{label}</span>
+      )}
+    </Link>
+  );
+};
+
+export function Sidebar() {
+  const [isCollapsed, setIsCollapsed] = useState(false);
+  const pathname = usePathname();
+
+  const toggleSidebar = () => {
+    setIsCollapsed(!isCollapsed);
+  };
+
+  const navigation = [
+    { name: 'Dashboard', href: '/dashboard', icon: <HomeIcon className="w-5 h-5" /> },
+    { name: 'Analytics', href: '/analytics', icon: <BarChartIcon className="w-5 h-5" /> },
+    { name: 'Account', href: '/account', icon: <PersonIcon className="w-5 h-5" /> },
+  ];
+
+  return (
+    <div className={`flex flex-col h-full transition-all duration-300 ${
+      isCollapsed ? 'w-16' : 'w-64'
+    } bg-white border-r border-gray-200 relative`}>
+      {/* 顶部Logo和标题 */}
+      <div className="flex items-center p-4 border-b border-gray-200">
+        <div className="flex-shrink-0 flex items-center justify-center w-8 h-8 bg-blue-500 text-white rounded">
+          <span className="font-bold">S</span>
+        </div>
+        {!isCollapsed && (
+          <span className="ml-3 font-medium text-gray-900 transition-opacity duration-200">
+            ShortURL Analytics
+          </span>
+        )}
+      </div>
+
+      {/* 导航菜单 */}
+      <div className="flex-grow p-4 overflow-y-auto">
+        <ul className="space-y-2">
+          {navigation.map((item) => (
+            <li key={item.name}>
+              <NavItem 
+                href={item.href}
+                label={item.name}
+                icon={item.icon}
+                isCollapsed={isCollapsed}
+                isActive={pathname?.startsWith(item.href)}
+              />
+            </li>
+          ))}
+        </ul>
+      </div>
+
+      {/* 底部折叠按钮 */}
+      <div className="border-t border-gray-200 p-4">
+        <button 
+          onClick={toggleSidebar}
+          className="w-full flex items-center justify-center p-2 rounded-lg text-gray-500 hover:bg-gray-100"
+          aria-label={isCollapsed ? "Expand sidebar" : "Collapse sidebar"}
+        >
+          {isCollapsed ? (
+            <ChevronRightIcon className="w-5 h-5" />
+          ) : (
+            <ChevronLeftIcon className="w-5 h-5" />
+          )}
+          {!isCollapsed && <span className="ml-2">Collapse</span>}
+        </button>
+      </div>
+    </div>
+  );
+}