app/chat/layout.tsx

import { sessionUser } from '@/auth';
import ChatSidebarList from '@/components/chat-sidebar/ChatListSidebar';
import Loading from '@/components/ui/Loading';
import { dbGetAllChat } from '@/lib/db/functions';
import { Suspense } from 'react';

interface ChatLayoutProps {
  children: React.ReactNode;
}

export default async function Layout({ children }: ChatLayoutProps) {
  const { email, user, id } = await sessionUser();
  const chats = await dbGetAllChat();

  return (
    <div className="relative flex h-[calc(100vh_-_theme(spacing.16))] overflow-hidden">
      {user && (
        <div
          data-state={email ? 'open' : 'closed'}
          className="peer absolute inset-y-0 z-30 hidden border-r bg-muted duration-300 ease-in-out -translate-x-full data-[state=open]:translate-x-0 lg:flex lg:w-[250px] h-full flex-col overflow-auto py-2"
        >
          <Suspense fallback={<Loading />}>
            <ChatSidebarList chats={chats} />
          </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]">
          {children}
        </div>
      </Suspense>
    </div>
  );
}