import clsx from 'clsx';
import { Bell, LogOut, RotateCcw, Save, Search, Settings, UserRound } from 'lucide-solid';
import { Bell, BookMarked, LogOut, Plus, RotateCcw, Save, Search, Settings, UserRound } from 'lucide-solid';
import { A, useLocation, useNavigate } from '@solidjs/router';
import { createQuery, useQueryClient } from '@tanstack/solid-query';
import { For, Show, createEffect, createSignal, onCleanup, onMount, type Component, type JSX } from 'solid-js';
210 unmodified lines
Expand all
enabled: Boolean(auth.currentDid()),
queryFn: async () => resolveActor(auth.currentDid()!),
}));
const closeMenu = (e: MouseEvent) => {
const details = (e.currentTarget as HTMLElement).closest('details');
if (details) details.open = false;
};
return (
<details data-topbar-menu class="relative">
<summary class="cursor-pointer list-none flex items-center gap-2">
<details data-topbar-menu class="untangled-topbar-menu">
<summary class="untangled-topbar-menu-summary">
<Avatar did={auth.currentDid()!} size="size-8 md:size-6" />
<span class="hidden md:inline">{viewerQuery.data?.handle ?? auth.currentDid()}</span>
</summary>
<div class="absolute right-0 mt-4 rounded bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 shadow-lg z-50 text-sm w-56">
<div class="px-4 py-3 border-b border-gray-200 dark:border-gray-700">
<div class="font-medium truncate">{viewerQuery.data?.handle ?? auth.currentDid()}</div>
<div class="text-gray-500 dark:text-gray-400 truncate">{auth.currentDid()}</div>
</div>
<Show when={viewerQuery.data?.handle}>
{(handle) => (
<A
href={`/${handle()}`}
class="w-full px-4 py-3 flex items-center gap-2 text-left hover:bg-gray-50 hover:dark:bg-gray-700/50 text-black dark:text-white no-underline hover:no-underline border-b border-gray-200 dark:border-gray-700"
onClick={(e) => {
const details = e.currentTarget.closest('details');
if (details) details.open = false;
}}
>
<UserRound class="size-4" />
profile
</A>
)}
</Show>
<button
type="button"
class="w-full px-4 py-3 flex items-center gap-2 text-left hover:bg-gray-50 hover:dark:bg-gray-700/50"
onClick={() => void auth.signOut()}
>
<LogOut class="size-4" />
logout
<div class="untangled-topbar-menu-dropdown">
<button type="button" class="untangled-topbar-menu-item" onClick={() => void auth.signIn()}>
<div class="untangled-topbar-menu-add-account-icon">
<Plus class="size-4" />
</div>
add account
</button>
<div class="untangled-topbar-menu-item-separator">
<Show when={viewerQuery.data?.handle}>
{(handle) => (
<>
<A href={`/${handle()}`} class="untangled-topbar-menu-item" onClick={closeMenu}>
<UserRound class="size-4" />
profile
</A>
<A href={`/${handle()}?tab=repos`} class="untangled-topbar-menu-item" onClick={closeMenu}>
<BookMarked class="size-4" />
repositories
</A>
</>
)}
</Show>
<A href="/settings" class="untangled-topbar-menu-item" onClick={closeMenu}>
<Settings class="size-4" />
settings
</A>
<button
type="button"
class="untangled-topbar-menu-item untangled-topbar-menu-item-danger"
onClick={() => void auth.signOut()}
>
<LogOut class="size-4" />
logout
</button>
</div>
</div>
</details>
);
};
return (
<nav ref={(element) => { topbar = element; }} class="mx-auto space-x-4 px-6 py-2">
<div class="flex justify-between gap-4 p-0 items-center">
<A href="/" class="text-2xl no-underline hover:no-underline flex shrink-0 items-center gap-2">
<img src="/static/logos/dolly.svg" alt="" class="size-8" />
<span class="font-bold text-xl">untangled</span>
<span class="font-normal text-xs rounded bg-gray-100 dark:bg-gray-700 px-1">alpha</span>
</A>
<div class="flex shrink-0 items-center gap-2">
<A href="/" class="flex shrink-0 items-center gap-2 no-underline hover:no-underline">
<img src="/static/logos/dolly.svg" alt="" class="size-8" />
<div class="flex flex-col">
<span class="font-bold text-xl leading-none">untangled</span>
<a
href="https://untangled.wisp.place/ptr.pet/untangled"
class="text-[10px] leading-none text-gray-400 dark:text-gray-500 hover:text-blue-500 dark:hover:text-blue-400 no-underline transition-colors mt-0.5"
onClick={(e) => e.stopPropagation()}
>
src
</a>
</div>
</A>
</div>
<div class="flex shrink-0 items-center gap-4">
<TopbarSearch />
<A href="/search" class="md:hidden text-gray-500 dark:text-gray-400" title="Search">