2023-02-25 02:29:18 +01:00
|
|
|
<script lang="ts">
|
|
|
|
import { NavbarObject } from "../classes/NavObject";
|
2023-03-13 20:38:31 +01:00
|
|
|
import { Navbar, NavBrand, NavLi, NavUl, NavHamburger, DarkMode } from 'flowbite-svelte';
|
2023-02-25 02:29:18 +01:00
|
|
|
export let navobjs: NavbarObject[] = [new NavbarObject('#', 'No nav elements provided')];
|
|
|
|
export let pageTitle: string = "Default Title";
|
2023-03-13 20:38:31 +01:00
|
|
|
export let toggleDarkModeButton: boolean = true;
|
2023-02-25 02:29:18 +01:00
|
|
|
</script>
|
2023-03-16 21:13:00 +01:00
|
|
|
<Navbar let:hidden let:toggle color="form" navDivClass="mx-auto flex flex-wrap justify-around items-center" navClass="px-4 md:px-2 py-2.5 w-full bg-zinc-200 dark:bg-zinc-900">
|
2023-03-13 20:38:31 +01:00
|
|
|
<NavBrand href="/">
|
|
|
|
<span class="self-center whitespace-nowrap text-xl font-semibold dark:text-white">
|
2023-02-25 02:29:18 +01:00
|
|
|
{ pageTitle.toUpperCase() }
|
|
|
|
</span>
|
2023-03-13 20:38:31 +01:00
|
|
|
</NavBrand>
|
|
|
|
<NavHamburger on:click={toggle} />
|
|
|
|
<div class="flex">
|
|
|
|
<NavUl {hidden}>
|
|
|
|
{#each navobjs as navElem}
|
|
|
|
<NavLi href="{ navElem.link }">{ navElem.text }</NavLi>
|
|
|
|
{/each}
|
|
|
|
</NavUl>
|
|
|
|
{#if toggleDarkModeButton}
|
|
|
|
<DarkMode class='p-0' />
|
|
|
|
{/if}
|
|
|
|
</div>
|
2023-02-25 02:29:18 +01:00
|
|
|
</Navbar>
|