app/project/layout.tsx

import ProjectListSideBar from '@/components/sidebar/ProjectListSideBar';
import { Suspense } from 'react';
import Loading from './loading';

interface ChatLayoutProps {
	children: React.ReactNode;
}

export default async function Layout({ children }: ChatLayoutProps) {
	return (
		<div className="relative flex h-[calc(100vh_-_theme(spacing.16))] overflow-hidden">
			<div
				data-state="open"
				className="peer absolute inset-y-0 z-30 hidden border-r bg-muted duration-300 ease-in-out translate-x-0 lg:flex lg:w-[250px] xl:w-[300px] h-full flex-col dark:bg-zinc-950 overflow-auto py-2"
			>
				<Suspense fallback={<Loading />}>
					<ProjectListSideBar />
				</Suspense>
			</div>
			<Suspense fallback={<Loading />}>
				<div className="group w-full overflow-auto pl-0 animate-in duration-300 ease-in-out peer-[[data-state=open]]:lg:pl-[250px] peer-[[data-state=open]]:xl:pl-[300px]">
					{children}
				</div>
			</Suspense>
		</div>
	);
}