<script lang="ts">
	import type { NavbarObject } from "../classes/NavObject";
	import { Navbar, NavBrand, NavLi, NavUl, NavHamburger, DarkMode } from 'flowbite-svelte';
	export let navobjs: NavbarObject[] = [];
	export let pageTitle: string = "Default Title";
	export let toggleDarkModeButton: boolean = true;
</script>
<Navbar let:hidden let:toggle color="form" navDivClass="mx-auto flex flex-wrap justify-between items-center" navClass="px-4 md:px-2 py-2.5 w-full bg-zinc-200 dark:bg-zinc-900">
	<NavBrand href="/">
    	<span class="self-center whitespace-nowrap text-xl font-semibold dark:text-white">
			{ pageTitle.toUpperCase() }
		</span>
	</NavBrand>
	<div class="flex">
		{#if navobjs.length !== 0}
			<NavHamburger on:click={toggle} btnClass={'ml-3 lg:hidden'} />
    {/if}
		<NavUl {hidden}>
			{#each navobjs as navElem}
				<NavLi href="{ navElem.link }">{ navElem.text }</NavLi>
			{/each}
		</NavUl>
		{#if toggleDarkModeButton}
			<DarkMode class='p-0' />
		{/if}
	</div>
</Navbar>
