How do i add a client react component to the sidebar

[spiritoftime]

Hello! I've just started learning nextjs so sorry if it is a dumb question, but im trying to add a progress indicator to the sidebar. Appreciate all the help and shoutout to this great library!

Link to my repo - https://github.com/spiritoftime/psle-math/tree/main/open-math-prep

What i have tried:

For comparison, this is the default sidebar:

I tried to customise app\docs\layout.tsx, as follows:

import type { ReactNode } from "react";
import { docsOptions } from "../layout.config";
import { LectureSideBar } from "./[[...slug]]/_components/lectureSideBar";

export default function Layout({ children }: { children: ReactNode }) {
  return (
    <DocsLayout
      sidebar={{
        ...docsOptions.sidebar,
        components: {
          ...docsOptions.sidebar?.components,
          Item: LectureSideBar ,
        },
      }}
      {...docsOptions}
    >
      {children}
    </DocsLayout>
  );
}

I managed to get the progress indicator out, but im struggling to preserve the original sidebar. As you can see in the "Introductions", it has lost its original styling and these Items are not clickable. I couldn't find a way to preserve the original sidebar.

From the docs, im seeing an excerpt that may be of help in letting me pass in my LectureSideBar and im trying to see I can add a react element in there (to no avail yet)

import { loader } from 'fumadocs-core/source';
import { icons } from 'lucide-react';
import { createElement } from 'react';
 
export const utils = loader({
  icon(icon) {
    if (!icon) {
      // You may set a default icon
      return;
    }
 
    if (icon in icons) return createElement(icons[icon as keyof typeof icons]);
  },
});

Could someone help me out? Thank you so much!

P.S. the localstorage item in the useeffect for LectureSideBar is

key: completed-lectures
value:{
  "introduction": {
    "progress": "100"
  },
  "Satori": {
    "progress": "100",
    "parent": "Advanced (A Folder)"
  },
  "Advanced (A Folder)": {
    "progress": "50"
  },
  "Hola": {
    "progress": "100"
  }
}

[fuma-nama]

I tried to customise app\docs\layout.tsx, as follows:

You have overridden the default sidebar item, so for your new item component you also need to inherit all functionalities of the original one. It doesn't make sense to preserve the original one if you have already overridden it.

You can copy the original implementation from our source code.

I'll suggest to add the indicator component to the page instead

[spiritoftime]

yeah makes sense, was hoping i could just throw it in with that loader part haha

thanks for your quick reply!😀