website/src/components/Layout.astro

---
import MainHero from './MainHero.astro';
import Navbar from './Navbar.astro';
import Sidebar from './Sidebar.astro';
import SectionSelector from './SectionSelector.astro';
import '../styles/main.css';
import '../styles/markdown.css';

const docs = await Astro.glob('../../../docs/**/*.md');
const guides = docs.flatMap((d) => {
  const doc = { ...d.getHeadings()[0]! };
  return { title: doc.text, href: '/docs/' + doc.slug + '#' + doc.slug, id: doc.slug };
});

const { sections } = Astro.props;
---

<html lang='en'>
  <head>
    <meta charset='utf-8' />
    <link rel='icon' href=`/favicon.ico` type='image/x-icon' />
    <meta name='viewport' content='width=device-width' />
    <meta name='generator' content={Astro.generator} />
    <meta
      name='description'
      content='Intuitive magical memoization library with Proxy and WeakMap'
    />
    <title>Proxy Memoize</title>
    <meta data-rh="true" property="og:title" content="Proxy Memoize">
    <meta data-rh="true" name="twitter:card" content="summary_large_image">
    <meta data-rh="true" property="og:image" content="/banner.png">
    <meta data-rh="true" name="twitter:image" content="/banner.png">
  </head>
  <body>
    <div
      class='flex flex-col justify-start transition-all duration-300 ease-in-out dark:bg-hex-1e1e1e'
    >
      <Navbar guides={guides} />
      <div
        class='h-[calc(100vh-100px)] <lg:h-[calc(100vh-88px)] <md:h-[calc(100vh-65px)]'
      >
        <MainHero />
        <div
          class='container w-100% px-48px flex flex-row items-start gap-80px mt-10 max-w-1600px mx-auto <lg:mt-0 <md:mt-0 <md:px-20px'
        >
          <div class='top-100px sticky <lg:hidden'>
            <Sidebar guides={guides} />
          </div>
          <div
            class='flex-col mt-0.5rem w-70% relative -top-2.3rem <lg:w-100% <lg:mt-6vw <md:mt-0'
          >
            <SectionSelector sections={sections} />
            <slot class='prose prose-violet' />
          </div>
        </div>
      </div>
    </div>
  </body>
  <script>
    const htmlEl = document.getElementsByTagName('html')[0];
    if (localStorage.getItem('theme') === 'dark') {
      htmlEl.classList.add('dark');
    }
  </script>
  <style>
    @media (min-width: 2000px) {
      .container {
        margin-top: 10% !important;
      }
    }
  </style>
</html>