pbakaus_impeccable/site/components/DocsSidebar.astro

---
// Shared sidebar for the /docs section.
// Renders Tutorials + Reference + Commands, highlighting the current entry.
// Used by:
//   - site/pages/docs/index.astro          (no active entry)
//   - site/layouts/Doc.astro                (activeCommand)
//   - site/pages/tutorials/[...slug].astro  (activeTutorial)
import { getCollection } from 'astro:content';
import {
  SKILL_CATEGORIES,
  CATEGORY_ORDER,
  CATEGORY_LABELS,
} from '../data/sub-pages-data';

interface Props {
  activeCommand?: string;
  activeReference?: string;
  activeTutorial?: string;
}
const { activeCommand, activeReference, activeTutorial } = Astro.props;

const tutorials = (await getCollection('tutorials'))
  .sort((a, b) => a.data.order - b.data.order);

const reference = (await getCollection('reference'))
  .sort((a, b) => a.data.order - b.data.order);
const referenceGroups = [
  { section: 'concepts', label: 'Core concepts' },
  { section: 'automation', label: 'Automation' },
  { section: 'reference', label: 'Reference' },
];

const skills = await getCollection('skills');
const sidebarGroups: Record<string, { slug: string }[]> = {};
for (const cat of CATEGORY_ORDER) {
  sidebarGroups[cat] = skills
    .filter(e => (SKILL_CATEGORIES[e.id] || 'system') === cat)
    .sort((a, b) => a.id.localeCompare(b.id))
    .map(e => ({ slug: e.id }));
}
---

<aside class="skills-sidebar" aria-label="Docs navigation">
  <button class="skills-sidebar-toggle" type="button" aria-expanded="false" aria-controls="skills-sidebar-inner">
    <span class="skills-sidebar-toggle-label">Browse docs</span>
    <svg class="skills-sidebar-toggle-chevron" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><path d="M6 9l6 6 6-6"/></svg>
  </button>
  <div class="skills-sidebar-inner" id="skills-sidebar-inner">
    {tutorials.length > 0 && (
      <>
        <p class="skills-sidebar-label">Learn</p>
        <div class="skills-sidebar-group">
          <span class="skills-sidebar-category">Tutorials</span>
          <ul class="skills-sidebar-list">
            {tutorials.map(t => (
              <li>
                <a href={`/tutorials/${t.id}`} aria-current={t.id === activeTutorial ? 'page' : undefined}>
                  <span>{t.data.title}</span>
                </a>
              </li>
            ))}
          </ul>
        </div>
      </>
    )}

    {reference.length > 0 && (
      <>
        <p class="skills-sidebar-label">Reference</p>
        {referenceGroups.map(group => {
          const entries = reference.filter(entry => entry.data.section === group.section);
          return entries.length > 0 && (
            <div class="skills-sidebar-group">
              <span class="skills-sidebar-category">{group.label}</span>
              <ul class="skills-sidebar-list">
                {entries.map(entry => (
                  <li>
                    <a href={`/docs/${entry.id}`} aria-current={entry.id === activeReference ? 'page' : undefined}>
                      <span>{entry.data.title}</span>
                    </a>
                  </li>
                ))}
              </ul>
            </div>
          );
        })}
      </>
    )}

    <p class="skills-sidebar-label">Commands</p>
    {CATEGORY_ORDER.map(cat => (
      <div class="skills-sidebar-group">
        <span class="skills-sidebar-category">{CATEGORY_LABELS[cat]}</span>
        <ul class="skills-sidebar-list">
          {sidebarGroups[cat].map(cmd => (
            <li>
              <a href={`/docs/${cmd.slug}`} aria-current={cmd.slug === activeCommand ? 'page' : undefined}>
                <span>{cmd.slug}</span>
              </a>
            </li>
          ))}
        </ul>
      </div>
    ))}
  </div>
</aside>