<script lang="ts">
	import { page } from '$app/stores';
	import '@picocss/pico/';
	import Fa from 'svelte-fa';
	import { faFacebook, faTwitter, faInstagram } from '@fortawesome/free-brands-svg-icons';
</script>

<nav id="topnav">
	<ul>
		<li><a href="/"><img id="logo" src="/favicon.png" alt="PLS Logo" /></a></li>
		<li id="title"><strong>PLS 5618</strong></li>
	</ul>
	<ul>
		<li><a class={$page.route.id === '/' ? 'active' : ''} href="/"> L'équipe </a></li>
		<li>
			<a class={$page.route.id === '/resultats' ? 'active' : ''} href="/resultats"> Résultats </a>
		</li>
		<li>
			<a class={$page.route.id === '/partenaires' ? 'active' : ''} href="/partenaires">
				Partenaires
			</a>
		</li>
	</ul>
</nav>

<slot />

<footer>
	<nav>
		<ul>
			<li>
				<a href="https://www.facebook.com/PLS5618" target="_blank" rel="noreferrer">
					<Fa icon={faFacebook} size="2.5x" />
				</a>
			</li>
			<li>
				<a href="https://twitter.com/pls5618" target="_blank" rel="noreferrer">
					<Fa icon={faTwitter} size="2.5x" />
				</a>
			</li>
			<li>
				<a href="https://www.instagram.com/team5618" target="_blank" rel="noreferrer">
					<Fa icon={faInstagram} size="2.5x" />
				</a>
			</li>
		</ul>
	</nav>
</footer>

<style lang="scss">
	#topnav {
		background-color: var(--card-sectionning-background-color);
		border-bottom: var(--border-width) solid var(--card-border-color);
		ul > li > a {
			color: white;
			&.active {
				color: var(--active-link-color);
			}
		}
	}
	footer ul {
		min-width: 40%;
		margin: auto;
		justify-content: space-evenly;
	}
	#logo {
		height: 64px;
		object-fit: contain;
	}
	nav {
		padding-inline: 20px;
	}

	@media (max-width: 445px) {
		#title {
			display: none;
		}
	}
</style>
