iknowyou/front/src/components/Nav.svelte

<script lang="ts">
  import {
    Menu,
    Search,
    Hammer,
    SlidersHorizontal,
    GitBranch,
    User,
    BookOpen,
    Bug,
    ClipboardList,
    ListFilter,
  } from "@lucide/svelte";
  import type { Snippet } from "svelte";

  let mobileMenuOpen = $state(false);

  function onDocumentClick(e: MouseEvent) {
    if (!mobileMenuOpen) return;
    if (!(e.target as HTMLElement).closest("[data-mobile-nav]")) {
      mobileMenuOpen = false;
    }
  }

  let {
    action,
  }: {
    title?: string;
    action?: Snippet;
  } = $props();

  const navLinks = [
    { label: "Search", href: "/", icon: Search },
    { label: "Tools", href: "/tools", icon: Hammer },
    { label: "Settings", href: "/settings", icon: SlidersHorizontal },
    { label: "Enumerate", href: "/enumerate", icon: ListFilter },
    { label: "Cheatsheets", href: "/cheatsheets", icon: ClipboardList },
    {
      label: "More",
      children: [
        { label: "How it works", href: "/help", icon: BookOpen },
        {
          label: "Source code",
          href: "https://github.com/anotherhadi/iknowyou",
          icon: GitBranch,
        },
        {
          label: "Report a Bug",
          href: "https://github.com/anotherhadi/iknowyou/issues",
          icon: Bug,
        },
        { label: "About me", href: "https://hadi.icu", icon: User },
      ],
    },
  ];
</script>

<svelte:document onclick={onDocumentClick} />

<div class="bg-base-200">
  <div class="navbar max-w-5xl m-auto">
    <div class="navbar-start">
      <div class="relative" data-mobile-nav>
        <button
          class="btn btn-ghost lg:hidden"
          onclick={(e) => { e.stopPropagation(); mobileMenuOpen = !mobileMenuOpen; }}
        >
          <Menu size={20} />
        </button>
        {#if mobileMenuOpen}
        <ul class="menu menu-sm absolute bg-base-300 rounded-box z-50 mt-1 w-52 p-2">
          {#each navLinks as link}
            <li>
              {#if link.children}
                <span>{link.label}</span>
                <ul class="p-2">
                  {#each link.children as sublink}
                    <li>
                      <a
                        href={sublink.href}
                        class="flex items-center gap-2"
                        onclick={() => (mobileMenuOpen = false)}
                      >
                        {#if sublink.icon}
                          {@const Icon = sublink.icon}
                          <Icon size={12} />
                        {/if}
                        {sublink.label}
                      </a>
                    </li>
                  {/each}
                </ul>
              {:else}
                <a
                  href={link.href}
                  class="flex items-center gap-2"
                  onclick={() => (mobileMenuOpen = false)}
                >
                  {#if link.icon}
                    {@const Icon = link.icon}
                    <Icon size={12} />
                  {/if}
                  {link.label}
                </a>
              {/if}
            </li>
          {/each}
        </ul>
        {/if}
      </div>
      <!-- Logo on medium/large screens -->
      <a
        href="/"
        class="btn btn-ghost text-xl hidden sm:flex justify-center gap-2 items-center"
      >
        <img src="/logo.svg" class="m-auto h-4 lg:h-6" alt="iky logo" />
        <img src="/logo-large.svg" class="m-auto h-4 lg:h-6" alt="iky logo large" />
      </a>
    </div>

    <div class="navbar-center lg:flex">
      <!-- Logo centered on mobile -->
      <a
        href="/"
        class="btn btn-ghost text-xl flex sm:hidden justify-center gap-2 items-center"
      >
        <img src="/logo.svg" class="m-auto h-4" alt="iky logo" />
        <img src="/logo-large.svg" class="m-auto h-4" alt="iky logo large" />
      </a>
      <!-- Nav links on large screens -->
      <ul class="menu menu-horizontal px-1 hidden lg:flex">
        {#each navLinks as link}
          <li>
            {#if link.children}
              <details>
                <summary>{link.label}</summary>
                <ul class="p-2 bg-base-300 w-52 z-50">
                  {#each link.children as sublink}
                    <li>
                      <a href={sublink.href} class="flex items-center gap-2">
                        {#if sublink.icon}
                          {@const Icon = sublink.icon}
                          <Icon size={12} />
                        {/if}
                        {sublink.label}
                      </a>
                    </li>
                  {/each}
                </ul>
              </details>
            {:else}
              <a href={link.href} class="flex items-center gap-2">
                {#if link.icon}
                  {@const Icon = link.icon}
                  <Icon size={14} />
                {/if}
                {link.label}
              </a>
            {/if}
          </li>
        {/each}
      </ul>
    </div>

    <div class="navbar-end">
      {@render action?.()}
    </div>
  </div>
</div>