<script>
	import Modal from '../context/Modal.svelte';
	import NavLink from '../components/NavLink.svelte';
</script>

<Modal>
	<main>
		<nav data-sveltekit-preload-data="hover">
			<NavLink href="/" exact>Home</NavLink>
			<NavLink href="/exercices" exact>Exercices</NavLink>
			<NavLink href="/settings" exact>Settings</NavLink>
		</nav>
		<slot />
	</main>
</Modal>

<style lang="scss">
	.links {
		display: flex;
		align-items: center;
		gap: 14px;
		overflow: hidden;
		flex-wrap: wrap;
		height: 30px;
		& li {
			height: 30px;
			display: flex;
			align-items: center;
			white-space: nowrap;
		}
	}

	:root {
		--container-padding: 20px;
		--container-width: 1330px;
	}
	:global(body) {
		padding: 0;
		margin: 0;
		font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell,
			Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
		overflow: hidden;
		background-color: #1d1a5a;
		color: #d9d9d9;
		background: linear-gradient(to bottom left, #0d0221 30%, #1a0f7a);
		width: 100vw;
		height: 100vh;
	}
	main {
		box-sizing: border-box;
		width: 100%;
		padding-left: calc(50% - var(--container-width) / 2);
		padding-right: calc(50% - var(--container-width) / 2);
		height: calc(100vh - var(--navbar-height) - 10px);
		overflow: auto;
		a {
			color: red;
		}
	}

	nav {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 10px;
		padding: 30px 0;
		border-bottom: 1px solid #181553;
		width: 100%;
		gap: 10px;
		height: 30px;
	}
</style>
