<script>
  import ThemeController from "./themeController.svelte";
  import Menu from "lucide-svelte/icons/menu";
</script>

<div
  class="navbar bg-base-300 dark:bg-neutral rounded-box mt-1 dark:text-neutral-content"
>
  <div class="navbar-start">
    <div class="dropdown">
      <div tabindex="0" role="button" class="btn btn-ghost lg:hidden">
        <Menu class="w-5 h-5 fill-current" />
      </div>
      <ul
        tabindex="-1"
        class="tablist menu menu-sm dropdown-content mt-3 z-[1] p-2 shadow bg-base-300 dark:bg-neutral rounded-box w-52 dark:text-neutral-content"
      >
        <li><a href="/">Home</a></li>
        <li><a href="/portfolio">Portfolio</a></li>
      </ul>
    </div>
    <a class="btn btn-ghost text-xl" href="/">nickbland.dev</a>
  </div>
  <div class="navbar-center hidden lg:flex">
    <ul class="menu menu-horizontal px-1">
      <li><a href="/" class="text-lg">Home</a></li>
      <li><a href="/portfolio" class="text-lg">Portfolio</a></li>
    </ul>
  </div>
  <div class="navbar-end">
    <ul class="menu menu-horizontal px-1">
      <li class="focus:"><ThemeController /></li>
    </ul>
  </div>
</div>
