<script lang="ts">
  import {
    NavBrand,
    NavHamburger,
    NavLi,
    NavUl,
    Navbar,
  } from "flowbite-svelte";

  export let sidebarOpen: boolean;
  export let sidebarOpenVisible: boolean;
</script>

<Navbar let:hidden let:toggle color="form">
  {#if sidebarOpenVisible}
    <NavHamburger on:click={() => (sidebarOpen = !sidebarOpen)} />
  {/if}
  <NavBrand href="/">
    <span
      class="self-center whitespace-nowrap text-xl font-semibold dark:text-white"
    >
      OpenAuth
    </span>
  </NavBrand>
  <NavHamburger on:click={toggle} />
  <NavUl {hidden}>
    <NavLi href="/" active={true}>Home</NavLi>
    <NavLi href="/user">User</NavLi>
    <!-- <NavLi href="/services">Services</NavLi>
    <NavLi href="/pricing">Pricing</NavLi>
    <NavLi href="/contact">Contact</NavLi> -->
  </NavUl>
</Navbar>
