docs/src/components/Sidebar.astro

---
import { getCollection, getEntry } from "astro:content";

export interface Props {
  activePath: string;
}

const allGuides = await getCollection("guides");
const sortedGuides = allGuides.sort((a, b) => a.data.sort - b.data.sort);
const groupedGuides = sortedGuides.reduce((acc, curr) => {
  const { groupTitle } = curr.data;
  acc[groupTitle] = acc[groupTitle] || [];
  acc[groupTitle].push(curr);

  return acc;
}, {});

const { activePath } = Astro.props;
---
<div class="w-[300px] border-r border-gray-200 text-right min-h-screen py-5 flex-shrink-0">
  {Object.keys(groupedGuides).map(groupTitle => {
    const guides = groupedGuides[groupTitle];

    return (
      <>
        <h2 class="text-xl font-bold mb-2 pr-5 relative">{ groupTitle }</h2>
        <ul class="text-gray-400 mb-5">
          {guides.map(guide => {
            const guidePath = `/docs/${guide.slug}`;
            return (
              <li class="mb-2">
                <a href={guidePath} class:list={["hover:text-black pr-5 py-2", { "text-black": activePath === guidePath}]}>{guide.data.title}</a>
              </li>
            );
          })}
        </ul>
      </>
    );
  })}
</div>