<script lang="ts">
	import '$styles/tailwind.css';

	const pages = [
		{ name: 'Dashboard', path: '/' },
		{ name: 'Settings', path: '/settings' },
		{ name: 'About', path: '/about' },
		{ name: 'Docs', path: '/docs' },
		{ name: 'Contact', path: '/contact' }
	] as const;
</script>

<div class="bg-[#0B2A37] h-screen w-screen">
	<div class="flex flex-row items-center px-20">
		<img class="w-40" src="/icons/Logo.svg" alt="Logo" />
		<div class="w-full justify-between flex px-5 lg:px-40 text-lg text-white">
			{#each pages as link}
				<a href={link.path}>{link.name}</a>
			{/each}
		</div>
	</div>
	<slot />
</div>
