Why is the notebook layout not working ?

[Gitstar-OC]

import { DocsLayout } from 'fumadocs-ui/layouts/notebook';
import { baseOptions } from '@/app/layout.config';
import type { ReactNode } from 'react';
 
export default function Layout({ children }: { children: ReactNode }) {
  return (
    <DocsLayout {...baseOptions} tree={source.pageTree}>
      {children}
    </DocsLayout>
  );
}

This is what the above code is looking like

Screen.Recording.2024-11-25.210524.mp4

If I changed the layout back to normal it works fine.

What could be the reasor for it ? I have changed and modified the components a little bit and deleted some and replaced them with original shadcn components like button.

[Gitstar-OC]

Could this be due to the error in the docs section of the components

[fuma-nama]

sorry for late, mind to provide a minimal reproduction?

[Gitstar-OC]

Sure, let me push the repo on github

[Gitstar-OC]

https://github.com/Gitstar-OC/notebook this is the repo url, just run the below commands

git clone https://github.com/Gitstar-OC/notebook.git
cd notebook

npm install
npm run dev

And head over to http://localhost:3000/docs/

[Gitstar-OC]

@fuma-nama is it solved or I should propose a new pr change that will has the type of layout with simple navbar at the top the sidebar will still be there but it will look like the below image.

[Gitstar-OC]

Update: I created a new docs application in which the thing is working properly. The problem in the reproduction I gave you is that some styling and components that you used are modified versions of shadcn ui library so what happens is they conflict and as a result the styling gets affected.