Files
work-club-manager/frontend/src/app/(protected)/layout.tsx
T

52 lines
1.8 KiB
TypeScript
Raw Normal View History

import { AuthGuard } from '@/components/auth-guard';
import { ClubSwitcher } from '@/components/club-switcher';
import Link from 'next/link';
import { SignOutButton } from '@/components/sign-out-button';
export default function ProtectedLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<AuthGuard>
<div className="flex min-h-screen bg-gray-50">
<aside className="hidden md:flex flex-col w-64 bg-white border-r">
<div className="p-4 border-b">
<h1 className="text-xl font-bold">WorkClub</h1>
</div>
<nav className="flex-1 p-4 space-y-2">
<Link href="/dashboard" className="flex items-center px-4 py-2 text-sm font-medium rounded-md hover:bg-gray-100">
Dashboard
</Link>
<Link href="/tasks" className="flex items-center px-4 py-2 text-sm font-medium rounded-md hover:bg-gray-100">
Tasks
</Link>
<Link href="/shifts" className="flex items-center px-4 py-2 text-sm font-medium rounded-md hover:bg-gray-100">
Shifts
</Link>
<Link href="/members" className="flex items-center px-4 py-2 text-sm font-medium rounded-md hover:bg-gray-100">
Members
</Link>
</nav>
</aside>
<div className="flex-1 flex flex-col">
<header className="bg-white border-b h-16 flex items-center justify-between px-6">
<div className="flex items-center gap-4">
<ClubSwitcher />
</div>
<div className="flex items-center gap-4">
<SignOutButton />
</div>
</header>
<main className="flex-1 p-6 overflow-auto">
{children}
</main>
</div>
</div>
</AuthGuard>
);
}