82 lines
2.6 KiB
TypeScript
82 lines
2.6 KiB
TypeScript
'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>
|
|
);
|
|
}
|