---
import '../styles/global.css';

interface Props {
  title: string;
}
const { title } = Astro.props;
---

<html lang="en" data-theme="mocha">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>{title}</title>
    <link rel="icon" href="/favicon.svg" />
  </head>
  <body>
    <nav id="topbar" class="fixed top-0 left-0 right-0 z-10">
		<slot name="topbar" />
    </nav>

    <div id="wrapper" class="flex pt-12 min-h-screen">
		  <aside id="sidebar" class="fixed top-12 left-0 h-[calc(100vh-3rem)] w-56 shrink-0">
			<slot name="sidebar" />
		  </aside>
		  <main id="content" class="ml-56 flex-1 p-6">
			<slot />
		  </main>
		</div>
  </body>
</html>
