svelte-ts/src/lib/navbar.svelte
2023-02-25 02:29:18 +01:00

24 líneas
808 B
Svelte

<script lang="ts">
import { NavbarObject } from "../classes/NavObject";
import { Navbar, NavBrand, NavLi, NavUl, NavHamburger, DarkMode } from 'flowbite-svelte';
export let navobjs: NavbarObject[] = [new NavbarObject('#', 'No nav elements provided')];
export let pageTitle: string = "Default Title";
export let togleDarkModeButton: boolean = true;
</script>
<Navbar let:hidden let:toggle color="form">
<NavBrand href="/">
<span class="self-center whitespace-nowrap text-xl font-semibold dark:text-white">
{ pageTitle.toUpperCase() }
</span>
</NavBrand>
<NavHamburger on:click={toggle} />
<NavUl {hidden}>
{#each navobjs as navElem}
<NavLi href="{ navElem.link }">{ navElem.text }</NavLi>
{/each}
</NavUl>
{#if togleDarkModeButton}
<DarkMode class='p-0' />
{/if}
</Navbar>