<template>
	<div
		class="container"
		@click="blur"
	>
		<Header />

		<div class="content">
			<slot />
		</div>
	</div>
</template>

<script setup>
import events from '#/src/events.js';

import Header from '../components/header/header.vue';

function blur() {
	events.emit('blur');
}
</script>

<style scoped>
.container {
	height: 100%;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.content {
	flex-grow: 1;
	overflow-y: auto;
}
</style>
