<script>
	import Hamburger from './hamburger.svelte';
	import Button from './navbutton.svelte';
</script>

<div class="grid grid-cols-7 grid-rows-1 sm:grid-rows-1 gap-y-2 mt-2 sm:mt-4 sm:pl-4 align-middle h-24 md:h-16">
	<div class="lg:col-start-2 col-span-7 md:col-span-4 lg:col-span-3 flex flex-row items-start">
		<div class="h-full sm:aspect-square">
			<img
				class="hidden sm:block h-full my-auto aspect-square"
				src="https://dutchellie.nl/DutchEllie/proper-website-2/raw/branch/main/web/static/images/icon.png"
				alt="Icon"
			/>
			<div class="block sm:hidden ml-2 mt-4 w-fit">
				<Hamburger />
			</div>
		</div>
		<div class="w-full sm:pl-5 sm:my-auto text-center sm:text-left sm:mx-0 pr-9 sm:pr-0">
			<h1 class="text-2xl md:text-3xl font-medium">Internetica Galactica 2</h1>
			<p class="text-xs">Surviving the rewriting</p>
		</div>
	</div>
	<div class="hidden md:col-start-5 col-start-1 col-end-7 sm:grid grid-cols-6">
		<nav class="h-full flex items-end md:col-start-4 md:col-span-2 col-span-7 gap-2 text-md">
			<Button link="/" text="Home" />
			<Button link="/about" text="About" />
		</nav>
	</div>
	<!-->
	<hr class="col-span-full border-slate-700" />
</!-->
</div>
