---
import Footer from "../components/Footer.astro";
import LeftNav from "../components/LeftNav.astro";
import classNames from "classnames";
import "../styles/global.scss";
import "katex/dist/katex.min.css";

interface Props {
  title?: string;
  pad?: boolean;
  toc?: boolean;
}

const { title, pad, toc } = Astro.props;
const shouldPad = pad === undefined ? true : pad;
const hasToc = toc ?? false;
---

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>{title && `${title} - `}Michael Zhang</title>
    <slot name="head" />
  </head>

  <body>
    <div class="flex-wrapper">
      <LeftNav />

      <div class="sep"></div>

      <main class={classNames(shouldPad && "pad", hasToc && "hasToc")}>
        <slot />
      </main>
    </div>

    <Footer />
  </body>
</html>
