besaid.zone
forked from
tangled.org/core
Monorepo for Tangled
appview/layouts/fragments: use popopver api + semantic markdown for dropdown menu
+49
-16
+49
-16
appview/pages/templates/layouts/fragments/topbar.html
+49
-16
appview/pages/templates/layouts/fragments/topbar.html
···
47
47
{{ end }}
48
48
49
49
{{ define "profileDropdown" }}
50
-
<details class="relative inline-block text-left nav-dropdown">
51
-
<summary class="cursor-pointer list-none flex items-center gap-1">
52
-
{{ $user := .Did }}
53
-
<img
50
+
{{ $user := .Did }}
51
+
<button type="button" popovertarget="navigation-popover" class="site-navigation-dropdown-trigger" aria-label="Open site navigation dropdown" aria-controls="navigation-menu-popover">
52
+
<img
53
+
src="{{ tinyAvatar $user }}"
54
+
alt=""
55
+
class="rounded-full h-6 w-6 border border-gray-300 dark:border-gray-700"
56
+
/>
57
+
</button>
58
+
<nav popover="auto" id="navigation-popover" class="site-navigation-popover shadow-md border border-gray-100 rounded-sm p-2">
59
+
<div class="flex gap-2 py-2">
60
+
<img
54
61
src="{{ tinyAvatar $user }}"
55
62
alt=""
56
63
class="rounded-full h-6 w-6 border border-gray-300 dark:border-gray-700"
57
64
/>
58
-
<span class="hidden md:inline">{{ $user | resolve | truncateAt30 }}</span>
59
-
</summary>
60
-
<div class="absolute flex flex-col right-0 mt-4 p-4 rounded w-48 bg-white dark:bg-gray-800 dark:text-white border border-gray-200 dark:border-gray-700">
61
-
<a href="/{{ $user }}">profile</a>
62
-
<a href="/{{ $user }}?tab=repos">repositories</a>
63
-
<a href="/{{ $user }}?tab=strings">strings</a>
64
-
<a href="/settings">settings</a>
65
-
<a href="#"
65
+
<p>{{ $user | resolve | truncateAt30 }}</p>
66
+
</div>
67
+
<hr class="h-1 w-full mb-1 mt-2" role="separator" aria-orientation="horizontal" />
68
+
<ul id="navigation-menu-popover">
69
+
<li>
70
+
<a href="/{{ $user }}">
71
+
{{ i "user" "w-4 h-4" }}
72
+
<span>profile</span>
73
+
</a>
74
+
</li>
75
+
<li>
76
+
<a href="/{{ $user }}?tab=repos">
77
+
{{ i "book-marked" "w-4 h-4" }}
78
+
<span>repositories</span>
79
+
</a>
80
+
</li>
81
+
<li>
82
+
<a href="/{{ $user }}?tab=strings">
83
+
{{ i "spool" "w-4 h-4" }}
84
+
<span>strings</span>
85
+
</a>
86
+
</li>
87
+
<li>
88
+
<a href="/settings">
89
+
{{ i "settings" "w-4 h-4" }}
90
+
<span>settings</span>
91
+
</a>
92
+
</li>
93
+
<hr class="h-1 w-full mb-1 mt-2" />
94
+
<li>
95
+
<a href="#"
66
96
hx-post="/logout"
67
97
hx-swap="none"
68
-
class="text-red-400 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300">
69
-
logout
98
+
class="text-red-600 flex gap-2 items-center hover:bg-red-50 hover:text-red-700 px-2 py-2 rounded-sm no-underline">
99
+
{{ i "arrow-right-from-line" "w-4 h-4" }}
100
+
<span>logout</span>
70
101
</a>
71
-
</div>
72
-
</details>
102
+
</li>
103
+
</ul>
104
+
</nav>
105
+
{{ end }}
73
106
74
107
<script>
75
108
document.addEventListener('click', function(event) {