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

interface Props extends HTMLAttributes<'div'> {}
const props = Astro.props;
---
<div {...props} 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-[1024px] 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>