<script lang="ts">
	import '../app.css';
	import { page } from '$app/stores';
	import Footer from "./Footer.svelte";
	import Navbar from "./Navbar.svelte";
	import PageTransition from "./PageTransition.svelte";

	export let data : { url: string };
</script>

<!-- Homepage has its own navbar with animations -->
{#if $page.url.pathname != "/"}
	<div id="layout">
		<div id="navbar">
			<Navbar />
			<slot name="header" />
		</div>
		<main>
			<PageTransition url={data.url}>
				<slot />
			</PageTransition>
			<Footer />
		</main>
	</div>
{:else}
	<!-- On the home page -->
	<PageTransition url={data.url}>
		<slot />
	</PageTransition>
	<Footer />
{/if}

<style>
	:global(.nav-link) {
		@apply text-lg;
		font-weight: 500;
		font-family: serif;
	}
	:global(p.nav-link) {
		color: rgb(128,128,128);
	}
	:global(a) {
		color: theme('colors.eucalyptus.400');
		&:hover,
		&:focus {
			color: theme('colors.java.500');
		}
	}
	:global(a):not(.icon) {
		position: relative;
		text-decoration: inherit;

		&::after {
			content: "";
			display: block;
			width: 100%;
			position: absolute;
			height: 2px;
			bottom: 0;
			left: 0;
			background-color: theme('colors.java.500');
			transform: scaleX(0);
			transition: transform 0.3s ease;
		}

		&:hover,
		&:focus {
			&::after {
				content: "";
				position: absolute;
				transform: scaleX(1);
			}
		}
	}
	:global(a.active-link) {
		color: theme('colors.magenta.500');

		&::after {
			background-color: theme('colors.magenta.500');
		}
		&:hover,
		&:focus {
			color: theme('colors.magenta.500');
		}
	}
	#layout {
		max-width: max(80vw, 100vh);
		margin-left: auto;
		margin-right: auto;
		margin-top: 50px;
		gap: 100px;
		display: flex;
		justify-content: center;
		/*
		display: grid;
		grid-template-columns: 1fr 3fr;
		grid-template-areas:
			"nav content"
			;
		*/
	}
	@media (max-width: 700px) {
		#layout {
			flex-direction: column;
			gap: 20px;
		}
	}
	main {
		width: min(100vw, max(50vw, 100vh));
		grid-area: content;
	}
	#navbar {
		align-self: right;
		padding-left: 10px;
		grid-area: nav;
	}
</style>
