# Page Layout

The `Layout` components place the header, sidebar, content and table of contents on the page, and adapt them to different screen widths. Leave out the parts you don’t need, or skip them entirely to write your own layout.

## A complete example

```astro
---
import { Layout, Prose, Sidebar, Toc } from '@minidocs/astro/components';
import '@minidocs/astro/styles.css';
---

<html lang="en">
  <body>
    <Layout.Root>
      <Layout.Header>
        <Layout.Title href="/docs/">My docs</Layout.Title>
        <nav slot="end">...</nav>
      </Layout.Header>

      <Sidebar.Trigger target="sidebar" aria-label="Menu">
        <svg width="16" height="16" viewBox="0 0 16 16" aria-hidden="true">
          <path d="M2 4h12M2 8h12M2 12h12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
        </svg>
      </Sidebar.Trigger>

      <Layout.Sidebar>
        <Sidebar.Root id="sidebar" label="Docs">...</Sidebar.Root>
      </Layout.Sidebar>

      <Layout.Main>
        <Prose>
          <h1>{entry.data.title}</h1>
          <Content />
        </Prose>
      </Layout.Main>

      <Layout.Aside title="On this page">
        <Toc.Root>...</Toc.Root>
      </Layout.Aside>
    </Layout.Root>
  </body>
</html>
```

| Component        | Renders     | What it is                                                                                  |
| ---------------- | ----------- | ------------------------------------------------------------------------------------------- |
| `Layout.Root`    | `<div>`     | The whole page                                                                              |
| `Layout.Header`  | `<header>`  | The header fixed at the top. The default slot sits on the left, the `end` slot on the right |
| `Layout.Title`   | `<a>`       | The site name or logo in the header                                                         |
| `Layout.Sidebar` | `<aside>`   | The column for the sidebar                                                                  |
| `Layout.Main`    | `<main>`    | The column for the content                                                                  |
| `Layout.Aside`   | `<details>` | The column for the table of contents, with `title` as its heading                           |
| `Prose`          | `<article>` | Typesetting for Markdown content                                                            |

## At different widths

| Width          | Layout                                                                                                                   |
| -------------- | ------------------------------------------------------------------------------------------------------------------------ |
| Above 75rem    | Three columns: sidebar, content, table of contents                                                                       |
| 50rem to 75rem | Two columns: sidebar, content. The table of contents folds into a button at the top right of the content, which opens it |
| Below 50rem    | One column. The sidebar becomes a drawer that slides in from the left, opened by `Sidebar.Trigger`                       |

When folded, the table of contents button shows the section being read and the reading progress. `Sidebar.Trigger` only shows on narrow screens, so there is no need to hide it on wide ones.

On wide screens, pages without a table of contents still keep the right column, so the sidebar and content sit in the same place on every page. If no page on the site uses a table of contents, switch to two columns:

```css
@media (width > 75rem) {
  .md-layout {
    grid-template-columns:
      [full-start] minmax(0, 1fr)
      [content-start] var(--md-layout-sidebar-width) minmax(0, var(--md-layout-main-width))
      [content-end] minmax(0, 1fr) [full-end];
    grid-template-areas:
      "header header header header"
      ". sidebar main .";
  }
}
```

## The page itself

With `Layout.Root`, the default styles also set the page’s background, text color and font, and make the page follow the system’s light or dark mode.

## Changing breakpoints

The two breakpoints, `50rem` and `75rem`, are written in `@minidocs/astro/styles/layout.css` and cannot be changed through variables. For other breakpoints, leave that file out and write the layout styles yourself, see [Styling](/en/docs/guides/styling.md#choosing-style-files). At the widths where the table of contents should fold, set `--md-layout-aside-collapsible` to `1`, and `Layout.Aside` becomes a button that opens it.