irdb/ui/resources/views/partials/topnav.twig

<header class="sticky top-0 z-30 border-b border-slate-200 bg-white/80 backdrop-blur dark:border-slate-800 dark:bg-slate-950/80">
    <div class="flex h-16 items-center justify-between gap-4 px-6">
        <div class="flex items-center gap-3">
            <a href="/app/me" class="flex items-center gap-2 font-mono text-lg font-semibold tracking-tight">
                <img src="/assets/logo.svg" alt="" aria-hidden="true" class="h-8 w-8" />
                <span>IRDB</span>
            </a>
            <span class="hidden text-xs text-slate-500 md:inline">IP Reputation Database</span>
        </div>
        <div class="flex flex-1 items-center justify-end gap-3">
            <form method="get" action="/app/search" class="hidden md:block" role="search">
                <label for="topnav-search" class="sr-only">Search IPs</label>
                <input type="search"
                       id="topnav-search"
                       name="q"
                       placeholder="Search IPs…"
                       maxlength="64"
                       class="w-64 rounded-md border border-slate-300 bg-white px-3 py-1.5 text-sm placeholder:text-slate-400 focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:border-slate-700 dark:bg-slate-900" />
            </form>
            <div x-data="toggle" class="relative">
                <button type="button"
                        x-on:click="flip()"
                        x-on:click.outside="hide()"
                        class="flex items-center gap-2 rounded-md border border-slate-300 bg-white px-3 py-1.5 text-sm hover:bg-slate-100 dark:border-slate-700 dark:bg-slate-900 dark:hover:bg-slate-800">
                    <span class="font-medium">{{ current_user.displayName }}</span>
                    <span class="rounded bg-slate-100 px-1.5 py-0.5 font-mono text-xs uppercase text-slate-600 dark:bg-slate-800 dark:text-slate-400">{{ current_user.role }}</span>
                </button>
                <div x-show="open"
                     x-transition
                     x-cloak
                     class="absolute right-0 mt-2 w-48 origin-top-right rounded-md border border-slate-200 bg-white py-1 shadow-lg dark:border-slate-800 dark:bg-slate-900">
                    <a href="/app/me" class="block px-4 py-2 text-sm text-slate-700 hover:bg-slate-100 dark:text-slate-200 dark:hover:bg-slate-800">My identity</a>
                    <button type="button"
                            data-theme-toggle
                            aria-label="Toggle theme"
                            class="flex w-full items-center justify-between px-4 py-2 text-left text-sm text-slate-700 hover:bg-slate-100 dark:text-slate-200 dark:hover:bg-slate-800">
                        <span><span class="hidden dark:inline">Light mode</span><span class="dark:hidden">Dark mode</span></span>
                        <span aria-hidden="true"><span data-theme-icon-light class="hidden dark:inline">☾</span><span data-theme-icon-dark class="dark:hidden">☀</span></span>
                    </button>
                    <form method="post" action="/logout">
                        <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
                        <button type="submit" class="block w-full px-4 py-2 text-left text-sm text-slate-700 hover:bg-slate-100 dark:text-slate-200 dark:hover:bg-slate-800">Sign out</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</header>