yoten.app
Yōten: A social tracker for your language learning journey built on the atproto.
fix: only open profile menu when clicking profile picture
The header links were within the <description> tag meaning any click
between them would open the header menu.
brookjeynes.dev
+58
-56
+58
-56
internal/server/views/partials/header.templ
+58
-56
internal/server/views/partials/header.templ
···
7
7
<nav class="flex justify-between items-center mx-auto max-w-7xl h-16">
8
8
<a class="text-xl font-bold" href="/">Yōten <span class="text-sm font-normal italic">alpha</span></a>
9
9
if params.User != nil {
10
-
<details class="relative inline-block text-left">
11
-
<summary class="cursor-pointer list-none flex gap-4">
12
-
<div class="flex gap-2 items-center">
13
-
<a
14
-
href="/profile/activities"
15
-
class="text-sm hover:underline"
16
-
>
17
-
Activities
18
-
</a>
19
-
<a
20
-
href="/profile/resources"
21
-
class="text-sm hover:underline"
22
-
>
23
-
Resources
24
-
</a>
25
-
<a
26
-
href="/stats"
27
-
class="text-sm hover:underline"
28
-
>
29
-
Stats
30
-
</a>
31
-
</div>
32
-
if params.User.BskyProfile.Avatar == "" {
33
-
<div class="flex items-center justify-center w-10 h-10 rounded-full bg-primary">
34
-
<i class="w-7 h-7" data-lucide="user"></i>
35
-
</div>
36
-
} else {
37
-
<img class="w-10 h-10 rounded-full" src={ params.User.BskyProfile.Avatar }/>
38
-
}
39
-
</summary>
40
-
<div
41
-
class="absolute flex flex-col right-0 mt-2 p-1 gap-1 rounded w-48 bg-bg-light border border-bg-dark"
42
-
>
10
+
<div class="flex gap-4">
11
+
<div class="flex gap-2 items-center">
43
12
<a
44
-
href={ templ.URL(fmt.Sprintf("/@%s", params.User.Handle)) }
45
-
class="flex items-center px-4 py-2 text-sm hover:bg-bg gap-2"
13
+
href="/profile/activities"
14
+
class="text-sm hover:underline"
46
15
>
47
-
<i class="w-4 h-4" data-lucide="user"></i>
48
-
Profile
16
+
Activities
49
17
</a>
50
18
<a
51
-
href="/friends"
52
-
class="flex items-center px-4 py-2 text-sm hover:bg-bg gap-2"
19
+
href="/profile/resources"
20
+
class="text-sm hover:underline"
53
21
>
54
-
<i class="w-4 h-4" data-lucide="users"></i>
55
-
Friends
22
+
Resources
56
23
</a>
57
24
<a
58
-
href="/profile/edit"
59
-
class="flex items-center px-4 py-2 text-sm hover:bg-bg gap-2"
25
+
href="/stats"
26
+
class="text-sm hover:underline"
60
27
>
61
-
<i class="w-4 h-4" data-lucide="settings"></i>
62
-
Settings
28
+
Stats
63
29
</a>
64
-
<hr class="text-bg-dark"/>
65
-
<button
66
-
class=" flex items-center px-4 py-2 text-sm hover:bg-bg gap-2 w-full cursor-pointer"
67
-
type="button"
68
-
hx-post="/logout"
69
-
hx-swap="none"
30
+
</div>
31
+
<details class="relative inline-block text-left">
32
+
<summary class="cursor-pointer list-none">
33
+
if params.User.BskyProfile.Avatar == "" {
34
+
<div class="flex items-center justify-center w-10 h-10 rounded-full bg-primary">
35
+
<i class="w-7 h-7" data-lucide="user"></i>
36
+
</div>
37
+
} else {
38
+
<img class="w-10 h-10 rounded-full" src={ params.User.BskyProfile.Avatar }/>
39
+
}
40
+
</summary>
41
+
<div
42
+
class="absolute flex flex-col right-0 mt-2 p-1 gap-1 rounded w-48 bg-bg-light border border-bg-dark"
70
43
>
71
-
<i class="w-4 h-4" data-lucide="log-out"></i>
72
-
Log out
73
-
</button>
74
-
</div>
75
-
</details>
44
+
<a
45
+
href={ templ.URL(fmt.Sprintf("/@%s", params.User.Handle)) }
46
+
class="flex items-center px-4 py-2 text-sm hover:bg-bg gap-2"
47
+
>
48
+
<i class="w-4 h-4" data-lucide="user"></i>
49
+
Profile
50
+
</a>
51
+
<a
52
+
href="/friends"
53
+
class="flex items-center px-4 py-2 text-sm hover:bg-bg gap-2"
54
+
>
55
+
<i class="w-4 h-4" data-lucide="users"></i>
56
+
Friends
57
+
</a>
58
+
<a
59
+
href="/profile/edit"
60
+
class="flex items-center px-4 py-2 text-sm hover:bg-bg gap-2"
61
+
>
62
+
<i class="w-4 h-4" data-lucide="settings"></i>
63
+
Settings
64
+
</a>
65
+
<hr class="text-bg-dark"/>
66
+
<button
67
+
class=" flex items-center px-4 py-2 text-sm hover:bg-bg gap-2 w-full cursor-pointer"
68
+
type="button"
69
+
hx-post="/logout"
70
+
hx-swap="none"
71
+
>
72
+
<i class="w-4 h-4" data-lucide="log-out"></i>
73
+
Log out
74
+
</button>
75
+
</div>
76
+
</details>
77
+
</div>
76
78
} else {
77
79
<a href="/login">login</a>
78
80
}