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

import Header from '@components/Header/Header.astro';
import Footer from '@components/Footer.astro';

export interface Props {
	title: string;
	frontmatter?: {
		title: string;
	};
}

const title = Astro.props.title || Astro.props.frontmatter?.title || 'Unknown';
---

<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width" />
		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
		<meta name="robots" content="noindex" /><meta
			name="description"
			content="My little space on the World Wide Web."
		/><link
			rel="alternate"
			type="application/rss+xml"
			title="ghall.space - RSS"
			href={`${Astro.site}rss.xml`}
		/><title>{`ghall.space - ${title}`}</title>
	</head>
	<body
		class="layout-simple"
		x-data="{ drawerOpen: false }"
		:class="drawerOpen ? 'lock-scroll' : ''"
	>
		<Header />
		<main>
			<slot />
		</main>
		<Footer />
	</body>
</html>

<style>
	/* Prevent scrolling when drawer (located in Header) is open */
	.lock-scroll {
		overflow: hidden;
	}
</style>
