v10/website/src/components/docs/SidebarItem.astro

---
import type { Guide, Section, SupportedFramework, SupportedStyle } from '@/types/docs';
import { isSection } from '@/types/docs';
import { ChevronDown } from 'lucide-react';

type Props<F extends SupportedFramework = SupportedFramework> = {
  item: Guide | Section;
  framework: F;
  style: SupportedStyle<F>;
  docTitles: Map<string, string>;
  depth?: number;
};

const { item, framework, style, docTitles, depth = 0 } = Astro.props;
const currentPath = Astro.url.pathname;

// Helper to check if this item or any of its children contains the active path
function containsActivePath(item: Guide | Section): boolean {
  if (isSection(item)) {
    return item.contents.some((child) => containsActivePath(child));
  } else {
    const itemPath = `/docs/framework/${framework}/style/${style}/${item.slug}`;
    return itemPath === currentPath;
  }
}

const isActive = containsActivePath(item);
---

{
  isSection(item) ? (
    <details open class="group" style={`padding-left: calc(var(--spacing) * ${depth * 4})`}>
      <summary
        class:list={[
          'py-2 flex items-center gap-4 ',
          'intent:text-dark-100 dark:intent:text-light-80 cursor-pointer',
          depth === 0 && 'font-medium',
          depth > 0 && 'border-l',
          isActive ? 'text-dark-100 dark:text-light-80 border-dark-100' : 'border-light-40 dark:border-dark-40',
        ]}
      >
        <span class="flex-1">{item.sidebarLabel}</span>
        <ChevronDown size={12} className="group-open:rotate-180" />
      </summary>
      <div>
        {item.contents.map((contentItem) => (
          <Astro.self item={contentItem} framework={framework} style={style} docTitles={docTitles} depth={depth + 1} />
        ))}
      </div>
    </details>
  ) : (
    <a
      class:list={[
        'py-2 flex items-center gap-4 ',
        'intent:text-dark-100 dark:intent:text-light-100 cursor-pointer',
        depth === 0 && 'font-medium',
        depth > 0 && 'border-l',
        isActive ? 'text-dark-100 dark:text-light-100 border-current ' : 'border-light-40 dark:border-dark-40',
      ]}
      style={`padding-left: calc(var(--spacing) * ${depth * 4})`}
      href={`/docs/framework/${framework}/style/${style}/${item.slug}`}
    >
      {item.devOnly ? '[Dev only] ' : ''}
      {item.sidebarLabel || docTitles.get(item.slug) || item.slug}
    </a>
  )
}

<style>
  summary {
    list-style: none;
  }
  summary::-webkit-details-marker {
    display: none;
  }
</style>