awesome-prometheus-alerts/site/src/components/Sidebar.astro

---
import type { Group, Service } from '../data/rules';
import { getGroupSlug, getServiceSlug } from '../data/rules';

interface Props {
  groups: Group[];
  currentGroupSlug?: string;
  currentServiceSlug?: string;
  currentService?: Service;
  base: string;
}

const { groups, currentGroupSlug, currentServiceSlug, currentService, base } = Astro.props;
---

<aside class="hidden lg:block w-60 flex-shrink-0" aria-label="Rules navigation">
  <nav class="sticky top-20 max-h-[calc(100vh-6rem)] overflow-y-auto pr-2 pb-8">
    <ul class="space-y-3">
      {groups.map((group, i) => {
        const groupSlug = getGroupSlug(group);
        const isGroupActive = groupSlug === currentGroupSlug;

        return (
          <li class={i > 0 ? 'pt-3 border-t border-slate-100 dark:border-slate-800' : ''}>
            <a
              href={`${base}/rules/${groupSlug}/`}
              class={`block text-xs font-bold uppercase tracking-widest mb-1.5 transition-colors ${isGroupActive ? 'text-brand dark:text-brand-dark' : 'text-slate-700 dark:text-slate-300 hover:text-brand dark:hover:text-brand-dark'}`}
            >
              {group.name}
            </a>
            <ul class="space-y-0.5">
              {group.services.map((service) => {
                const serviceSlug = getServiceSlug(service);
                const isActive = isGroupActive && serviceSlug === currentServiceSlug;
                return (
                  <li>
                    <a
                      href={`${base}/rules/${groupSlug}/${serviceSlug}/`}
                      class={`block text-sm py-0.5 px-2 rounded transition-colors truncate ${
                        isActive
                          ? 'text-brand dark:text-brand-dark bg-brand/5 dark:bg-brand-dark/10 font-medium'
                          : 'text-slate-400 dark:text-slate-500 hover:text-slate-700 dark:hover:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-800/50'
                      }`}
                    >
                      {service.name}
                    </a>

                    {/* Exporter sub-level — only on the current service page */}
                    {isActive && currentService && currentService.exporters.length > 1 && (
                      <ul class="mt-0.5 ml-3 space-y-0.5 border-l border-slate-200 dark:border-slate-700 pl-2">
                        {currentService.exporters.map((exp) => (
                          <li>
                            <a
                              href={`#exporter-${exp.slug}`}
                              class="block text-xs py-0.5 px-1 rounded truncate text-slate-400 dark:text-slate-500 hover:text-slate-700 dark:hover:text-slate-300 transition-colors"
                            >
                              {exp.name ?? exp.slug}
                            </a>
                          </li>
                        ))}
                      </ul>
                    )}
                  </li>
                );
              })}
            </ul>
          </li>
        );
      })}
    </ul>
  </nav>
</aside>