sidebar collapse

app/(app)/AppLayoutClient.tsx

@@ -1,82 +0,0 @@
-'use client';
-
-import React from 'react';
-import { usePathname } from 'next/navigation';
-import Link from 'next/link';
-import { ProtectedRoute, useAuth } from '@/lib/auth';
-import { LayoutDashboard, BarChart3, UserCircle } from 'lucide-react';
-
-export default function AppLayoutClient({
-  children,
-}: {
-  children: React.ReactNode;
-}) {
-  const { signOut, user } = useAuth();
-  const pathname = usePathname();
-  
-  const navigationItems = [
-    { name: 'Dashboard', href: '/dashboard', icon: <LayoutDashboard className="h-5 w-5" /> },
-    { name: 'Analytics', href: '/analytics', icon: <BarChart3 className="h-5 w-5" /> },
-    { name: 'Account', href: '/account', icon: <UserCircle className="h-5 w-5" /> },
-  ];
-
-  const handleSignOut = async () => {
-    await signOut();
-  };
-
-  return (
-    <ProtectedRoute>
-      <div className="flex min-h-screen bg-gray-100">
-        {/* 侧边栏导航 */}
-        <div className="fixed inset-y-0 left-0 w-64 bg-white shadow-lg">
-          <div className="flex h-16 items-center px-6 border-b">
-            <Link href="/" className="text-lg font-medium text-gray-900">
-              ShortURL Analytics
-            </Link>
-          </div>
-          <nav className="mt-4 px-2">
-            {navigationItems.map((item) => (
-              <Link
-                key={item.href}
-                href={item.href}
-                className={`flex items-center px-3 py-2 mt-2 rounded-md text-sm font-medium ${
-                  pathname === item.href || pathname?.startsWith(`${item.href}/`)
-                    ? 'bg-blue-100 text-blue-600'
-                    : 'text-gray-700 hover:bg-gray-100'
-                }`}
-              >
-                <span className="mr-3">{item.icon}</span>
-                {item.name}
-              </Link>
-            ))}
-          </nav>
-        </div>
-
-        {/* 主内容区域 */}
-        <div className="flex-1 ml-64">
-          {/* 顶部导航栏 */}
-          <header className="bg-white shadow-sm">
-            <div className="flex h-16 items-center justify-end px-6">
-              <div className="flex items-center">
-                <span className="text-sm font-medium text-gray-700 mr-4">
-                  {user?.email}
-                </span>
-                <button
-                  onClick={handleSignOut}
-                  className="px-3 py-1.5 text-sm border border-gray-300 rounded-md hover:bg-gray-50"
-                >
-                  Sign Out
-                </button>
-              </div>
-            </div>
-          </header>
-
-          {/* 页面内容 */}
-          <main className="py-6">
-            {children}
-          </main>
-        </div>
-      </div>
-    </ProtectedRoute>
-  );
-} 

app/(app)/layout.tsx

@@ -1,13 +1,10 @@
 import '../globals.css';
 import type { Metadata } from 'next';
-import { Inter } from 'next/font/google';
-import AppLayoutClient from './AppLayoutClient';
-
-const inter = Inter({ subsets: ['latin'] });
+import { Sidebar } from '@/app/components/Sidebar';
 
 export const metadata: Metadata = {
   title: 'ShortURL Analytics',
-  description: 'Analytics dashboard for ShortURL service',
+  description: 'Analytics for your shortened URLs',
 };
 
 export default function AppLayout({
@@ -16,10 +13,16 @@ export default function AppLayout({
   children: React.ReactNode;
 }) {
   return (
-    <div className={inter.className}>
-      <AppLayoutClient>
-        {children}
-      </AppLayoutClient>
+    <div className="flex h-screen bg-gray-50">
+      {/* 侧边栏 */}
+      <Sidebar />
+      
+      {/* 主内容区域 */}
+      <div className="flex-1 flex flex-col overflow-auto">
+        <main className="flex-1 overflow-y-auto">
+          {children}
+        </main>
+      </div>
     </div>
   );
 }