---
const { frontmatter } = Astro.props;
import Layout from "../layouts/Layout.astro";
import { Icon } from "astro-icon/components";
import DonationCallout from "../components/DonationCallout.astro";
import "../styles/sidebar.scss";
const title = frontmatter.title + " | Docs";
const unsortedDocs = await Astro.glob("../pages/docs/*/*.{md,mdx}");
const docs = unsortedDocs.sort((a) =>
  a.url === "/docs/" + a.frontmatter.repo ? -1 : 1
);
---

<Layout
  title={title}
  description="This is my personal website with my projects, docs and other useful stuff."
>
  <div class="content">
    <h1 style="text-align: center;">{frontmatter.title}</h1>
    <br />
    <br />
    <slot />
  </div>
  <div class="sidebar">
    <div class="sidebar" style="display: unset;">
      <a
        class="repo-link"
        href={"https://github.com/vaporvee/" + frontmatter.repo}
        target="_blank"
        ><span style="font-size: 14px;">vaporvee /</span>{frontmatter.repo}</a
      ><br /><br />
      {
        docs.map((page) => {
          const isActive =
            (Astro.url.pathname.startsWith(page.url) &&
              page.url !== "/docs/" + page.frontmatter.repo) ||
            Astro.url.pathname === page.url;
          return (
            <a href={page.url} class={isActive ? "active" : ""}>
              <Icon name="mdi:file-outline" />
              {page.frontmatter.title} <br />
            </a>
          );
        })
      }
      <DonationCallout
        text="These projects require a lot of time and effort. If you would like to support this project, consider making a donation of whatever it is worth to you!"
      />
    </div>
  </div>
</Layout>