react-starter-kit/resources/js/pages/layouts/app/AppSidebarLayout.tsx

import { type PropsWithChildren } from 'react';

import { AppContent } from '@/common/AppContent';
import { AppShell } from '@/common/AppShell';
import { AppSidebar } from '@/common/AppSidebar';
import { AppSidebarHeader } from '@/common/AppSidebarHeader';
import { type BreadcrumbItem } from '@/common/types';

export default function AppSidebarLayout({ children, breadcrumbs = [] }: PropsWithChildren<{ breadcrumbs?: BreadcrumbItem[] }>) {
    return (
        <AppShell variant="sidebar">
            <AppSidebar />
            <AppContent variant="sidebar" className="overflow-x-hidden">
                <AppSidebarHeader breadcrumbs={breadcrumbs} />
                {children}
            </AppContent>
        </AppShell>
    );
}