layout.tsx

// import { DocsLayout } from 'fumadocs-ui/layouts/docs';
// import type { ReactNode } from 'react';
// import { source } from '@/lib/source';

// export default function Layout({ children }: { children: ReactNode }) {
//   return <DocsLayout tree={source.pageTree}>{children}</DocsLayout>;
// }

import { source } from '@/lib/source';
import { DocsSidebar } from '@/components/docs-sidebar';
import { SidebarProvider } from '@/ui/sidebar';
import { SiteHeader } from '@/components/site-header';

export default function DocsLayout({ children }: { children: React.ReactNode }) {
  return (
    <>
      <SiteHeader />
      <div className='container-wrapper flex flex-1 flex-col px-2'>
        <SidebarProvider
          className='3xl:fixed:container 3xl:fixed:px-3 min-h-min flex-1 items-start px-0 [--top-spacing:0] lg:grid lg:grid-cols-[var(--sidebar-width)_minmax(0,1fr)] lg:[--top-spacing:calc(var(--spacing)*4)]'
          style={
            {
              '--sidebar-width': 'calc(var(--spacing) * 72)'
            } as React.CSSProperties
          }
        >
          <DocsSidebar tree={source.pageTree} />
          <div className='h-full w-full'>{children}</div>
        </SidebarProvider>
      </div>
    </>
  );
}