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 {
    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>

<div class="bg-base-200">
  <div class="navbar max-w-5xl m-auto">
    <div class="navbar-start">
      <div class="dropdown">
        <div tabindex="0" role="button" class="btn btn-ghost lg:hidden">
          <Menu size={20} />
        </div>
        <ul
          tabindex="-1"
          class="menu menu-sm dropdown-content bg-base-300 rounded-box z-50 mt-3 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">
                        {#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">
                  {#if link.icon}
                    {@const Icon = link.icon}
                    <Icon size={12} />
                  {/if}
                  {link.label}
                </a>
              {/if}
            </li>
          {/each}
        </ul>
      </div>
      <a
        href="/"
        class="btn btn-ghost text-xl flex justify-center gap-2 items-center"
      >
        <img src="/logo.svg" class="m-auto h-6" alt="iky logo" />
        <img src="/logo-large.svg" class="m-auto h-6" alt="iky logo large" />
      </a>
    </div>

    <div class="navbar-center hidden lg:flex">
      <ul class="menu menu-horizontal px-1">
        {#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>