---
import type { Config } from '@webtypes/Config';
import config from 'config';
import NavbarElement from '../navbar/NavbarElement.astro';

---
<div class="absolute w-full flex flex-row justify-center h-screen max-h-[110px] px-3 z-navbar text-[16px]">
	<nav class="w-full max-w-[1080px] flex flex-col md:flex-row justify-between items-center">
		<ul class="flex flex-row justify-start gap-4 max-md:mt-4">
			{(config as Config).navbar.left.map((element, index) => (
				<NavbarElement {element} {index}/>
			))}
		</ul>
		<ul class="flex flex-row justify-center md:justify-end gap-4 flex-wrap">
			{(config as Config).navbar.right.map((element, index) => (
				<NavbarElement {element} {index}/>
			))}
		</ul>
	</nav>
</div>