Customize sidebar

[xhejtman]

Hello,

I search through discussion about how to customize sidebar. Basically, I want all level 0 folder names to be bold and active element is without explicit background. I found, that I could use sidebar.components prop. However, my question is, how can this be done in case of the Folder.

I can see the implementation in fumadocs-ui/src/layouts/docs/sidebar.tsx:

case 'folder':
            if (Folder) return <Folder key={id} item={item} level={level} />;
            return (
              <PageTreeFolder key={id} item={item} level={level}>
                {renderSidebarList(item.children, level + 1)}
              </PageTreeFolder>
            );

it is clear, that my Folder implementation should provide something similar to PageTreeFolder, however, I suppose, that my Folder implementation cannot call recursion {renderSidebarList(item.children, level + 1)}. Is that so? And if yes, is there any other way, how to do this?

[fuma-nama]

I think you can still render the received item.children with your own implementation, or I can add a new prop to custom folder later if necessary

[xhejtman]

I think you can still render the received item.children with your own implementation, or I can add a new prop to custom folder later if necessary

for me, it would be the best to change the code to:

case 'folder':
            if (Folder) 
                return (
                      <Folder key={id} item={item} level={level}>
                       {renderSidebarList(item.children, level + 1)}
                      </Folder>
                     );
            return (
              <PageTreeFolder key={id} item={item} level={level}>
                {renderSidebarList(item.children, level + 1)}
              </PageTreeFolder>
            );

so that the component actually impelemnts only the folder. and items are rendered by component if needed.

[xhejtman]

thanks for pushing this!