Discover books, shows, and movies at your level. Track your progress by filling your Shelf with what you find, and share with other language learners. *No dusting required.
shlf.space
feat(components/header): add 'my books' tab + language selector
Signed-off-by: brookjeynes <me@brookjeynes.dev>
authored by
+43
-17
internal/components/header/header.templ
+43
-17
internal/components/header/header.templ
···
1
1
package components
2
2
3
+
import "fmt"
4
+
3
5
templ Header(params HeaderParams) {
4
6
<header class="w-full sticky top-0 z-50 px-4 mb-8">
5
7
<nav class="flex justify-between items-center mx-auto max-w-7xl h-16">
6
8
<a class="text-xl font-medium" href="/">shlf.space <span class="text-xs font-normal italic">alpha</span></a>
7
-
if params.User != nil {
8
-
<details class="relative inline-block text-left">
9
-
<summary class="cursor-pointer list-none flex gap-2 items-center">
10
-
<div class="flex items-center justify-center w-7 h-7 rounded-full bg-gray-100">
11
-
<i class="w-4 h-4" data-lucide="user"></i>
9
+
<div class="flex gap-2 items-center">
10
+
if params.User != nil {
11
+
<details class="relative inline-block text-left">
12
+
<summary class="cursor-pointer list-none flex gap-2 items-center">
13
+
<div class="flex items-center justify-center w-7 h-7 rounded-full bg-gray-100">
14
+
<i class="w-4 h-4" data-lucide="user"></i>
15
+
</div>
16
+
<span class="text-sm">{ params.User.Account.Handle }</span>
17
+
</summary>
18
+
<div class="absolute flex flex-col right-0 mt-2 p-1 gap-1 w-48 bg-white drop-shadow-sm">
19
+
<a
20
+
href={ templ.SafeURL(fmt.Sprintf("/%s/books", params.User.Account.Did)) }
21
+
class="button border-none text-sm w-full"
22
+
>
23
+
My books
24
+
</a>
25
+
<hr/>
26
+
<button type="button" hx-post="/logout" hx-swap="none" class="button border-none text-sm w-full">
27
+
<i class="w-4 h-4" data-lucide="log-out"></i>
28
+
Log out
29
+
</button>
12
30
</div>
13
-
<span class="text-sm">{ params.User.Account.Handle }</span>
14
-
</summary>
15
-
<div class="absolute flex flex-col right-0 mt-2 p-1 gap-1 w-48 bg-white drop-shadow-sm">
16
-
<button type="button" hx-post="/logout" hx-swap="none" class="button border-none text-sm w-full">
17
-
<i class="w-4 h-4" data-lucide="log-out"></i>
18
-
Log out
19
-
</button>
20
-
</div>
21
-
</details>
22
-
} else {
23
-
<a href="/login">login</a>
24
-
}
31
+
</details>
32
+
<details class="relative inline-block text-left">
33
+
<summary class="cursor-pointer list-none flex gap-2 items-center">
34
+
<span>🇰🇷</span>
35
+
</summary>
36
+
<div class="absolute flex flex-col right-0 mt-2 p-1 gap-1 w-48 bg-white drop-shadow-sm">
37
+
<button
38
+
type="button"
39
+
onclick="localStorage.setItem('shlf-language', 'ko');"
40
+
hx-swap="none"
41
+
class="button border-none text-sm w-full"
42
+
>
43
+
<span>🇰🇷 Korean</span>
44
+
</button>
45
+
</div>
46
+
</details>
47
+
} else {
48
+
<a href="/login">login</a>
49
+
}
50
+
</div>
25
51
</nav>
26
52
</header>
27
53
}