---
import type { Frontmatter } from "../../config";
import MoreMenu from "../RightSidebar/MoreMenu.astro";
import TableOfContents from "../RightSidebar/TableOfContents";
import type { MarkdownHeading } from "astro";

type Props = {
  frontmatter: Frontmatter;
  headings: MarkdownHeading[];
  githubEditUrl: string;
};

const { frontmatter, headings, githubEditUrl } = Astro.props as Props;
const title = frontmatter.title;
---

<article id="article" class="content">
  <section class="main-section">
    <h1 class="content-title" id="overview">{title}</h1>
    <nav class="block sm:hidden">
      <TableOfContents client:media="(max-width: 50em)" headings={headings} />
    </nav>
    <slot />
  </section>
  <nav class="block sm:hidden">
    <MoreMenu editHref={githubEditUrl} />
  </nav>
</article>

<style>
  .content {
    padding: 0;
    max-width: 75ch;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  .content > section {
    margin-bottom: 4rem;
  }

  .block {
    display: block;
  }

  @media (min-width: 50em) {
    .sm\:hidden {
      display: none;
    }
  }
</style>
