Docs.astro

---
import Base from './Base.astro';
import Nav from '../components/Nav.astro';
import DocsSidebar from '../components/DocsSidebar.astro';
import DocsToc from '../components/DocsToc.astro';
import Footer from '../components/Footer.astro';
import { getPrevNext } from '../data/docs-nav';

interface Heading {
  depth: number;
  slug: string;
  text: string;
}

interface Props {
  title: string;
  headings: Heading[];
}

const { title, headings } = Astro.props;
const currentPath = Astro.url.pathname.replace(/\/$/, '');
const { prev, next } = getPrevNext(currentPath);
---

<Base title={`${title} - Mantle Docs`}>
  <Nav />
  <div class="mx-auto max-w-[1280px] px-4 sm:px-6 overflow-x-hidden">
    <div class="flex min-h-screen pt-16 pb-16 lg:pb-0">
      <DocsSidebar currentPath={currentPath} />

      <!-- Main content -->
      <main id="main-content" class="flex-1 min-w-0 py-8 px-2 sm:px-6 lg:px-10">
        <article class="prose max-w-3xl">
          <slot />
        </article>

        <!-- Prev / Next navigation -->
        {(prev || next) && (
          <nav class="mt-16 mb-8 flex items-center justify-between gap-4 border-t border-outline-variant pt-6 max-w-3xl">
            {prev ? (
              <a
                href={prev.href}
                class="group flex flex-col gap-1 text-sm"
              >
                <span class="text-[11px] uppercase tracking-widest text-on-surface-variant">Previous</span>
                <span class="text-on-surface group-hover:text-primary transition-colors">
                  &larr; {prev.title}
                </span>
              </a>
            ) : <div />}
            {next ? (
              <a
                href={next.href}
                class="group flex flex-col gap-1 text-sm text-right ml-auto"
              >
                <span class="text-[11px] uppercase tracking-widest text-on-surface-variant">Next</span>
                <span class="text-on-surface group-hover:text-primary transition-colors">
                  {next.title} &rarr;
                </span>
              </a>
            ) : <div />}
          </nav>
        )}
      </main>

      <DocsToc headings={headings} />
    </div>
  </div>
  <Footer />
</Base>