Link bookmarking tool built on aproto (early alpha)
finxol.io
1import { useLocation } from "@solidjs/router"
2import { createResource, Show, Suspense } from "solid-js"
3import { useAuthSession } from "../lib/auth/actions.ts"
4
5export default function Nav() {
6 const location = useLocation()
7 const active = (path: string) =>
8 path == location.pathname
9 ? "border-sky-600"
10 : "border-transparent hover:border-sky-600"
11
12 return (
13 <nav class="flex flex-row px-4 py-2 gap-4 justify-between items-center mx-4 my-2 rounded-xl bg-base-200 text-secondary-content">
14 <div class="flex flex-row gap-4">
15 <a href="/">Home</a>
16 <a href="/about">About</a>
17 </div>
18
19 <aside class="">
20 <Suspense>
21 <LoginAccount />
22 </Suspense>
23 </aside>
24 </nav>
25 )
26}
27
28function LoginAccount() {
29 const [session] = createResource(useAuthSession)
30
31 return (
32 <Show when={session()} fallback={<a href="/login">Login</a>}>
33 <a href="/account">
34 <img
35 src={session()?.avatar}
36 alt={session()?.handle}
37 class="size-12 rounded-full"
38 />
39 </a>
40 </Show>
41 )
42}