src/layouts/MainLayout.astro

---
import '../base.css'
import Sidebar from '../components/sidebar/Sidebar.astro'
import Topbar from "../components/topbar/Topbar.astro";
import {ViewTransitions} from 'astro:transitions';
let {title, frontmatter} = Astro.props;
title = frontmatter ? frontmatter.title : title;
---
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>{title} | Regen Data Standards</title>
    <ViewTransitions/>
</head>
<body>
<Topbar/>
<div class="flex h-[calc(100vh-64px)]">
    <Sidebar/>
    <div id="main" class="grow px-16 py-8 prose max-w-none overflow-y-auto">
        <p class="bg-warning-200 italic p-2 rounded-md">WARNING: This site is a work in progress.<p>
        <main data-pagefind-body class="mx-auto lg:max-w-screen-lg">
            <slot/>
        </main>
    </div>
</div>
</body>
</html>
<script>
    document.addEventListener('astro:page-load', () => {
        const btn = document.querySelector("#btn-menu");
        const menu = document.querySelector("#menu");
        const main = document.querySelector("#main");

        // Add Event Listeners
        btn?.addEventListener("click", () => {
            menu?.classList.toggle("hidden");
            main?.classList.toggle("hidden");
        });
    });
</script>