v10/site/src/components/docs/DocsSidebar.astro

---

import clsx from 'clsx';

import { PreferenceUpdater } from '@/components/docs/PreferenceUpdater';
import SidebarItem from '@/components/docs/SidebarItem.astro';
import type { SupportedFramework, SupportedStyle } from '@/types/docs';
import { filterSidebar } from '@/utils/docs/sidebar';

type Props<F extends SupportedFramework = SupportedFramework> = {
  framework: F;
  style: SupportedStyle<F>;
  docTitles: Map<string, string>;
  class?: string;
};

const { framework, style, docTitles, class: className } = Astro.props;
const filteredSidebar = filterSidebar(framework, style);
---

<div class={clsx('bg-light-80 dark:bg-dark-100', className)}>
  <slot />
  <PreferenceUpdater client:idle currentFramework={framework} currentStyle={style} />
  <nav class="p-6">
    {
      filteredSidebar.map((item) => (
        <SidebarItem item={item} framework={framework} style={style} docTitles={docTitles} />
      ))
    }
  </nav>
</div>