dzming.li
A vibe coded tangled fork which supports pijul.
1{{ define "layouts/fragments/topbar" }}
2 <nav class="mx-auto space-x-4 px-6 py-2 dark:text-white drop-shadow-sm bg-white dark:bg-gray-800">
3 <div class="flex justify-between p-0 items-center">
4 <div id="left-items">
5 <a href="/" hx-boost="true" class="text-2xl no-underline hover:no-underline flex items-center gap-2">
6 {{ template "fragments/logotypeSmall" }}
7 </a>
8 </div>
9
10 <div id="right-items" class="flex items-center gap-4">
11 {{ with .LoggedInUser }}
12 {{ block "newButton" . }} {{ end }}
13 {{ template "notifications/fragments/bell" }}
14 {{ block "profileDropdown" . }} {{ end }}
15 {{ else }}
16 <a href="/login">login</a>
17 <span class="text-gray-500 dark:text-gray-400">or</span>
18 <a href="/signup" class="btn-create py-0 hover:no-underline hover:text-white flex items-center gap-2">
19 join now {{ i "arrow-right" "size-4" }}
20 </a>
21 {{ end }}
22 </div>
23 </div>
24 </nav>
25{{ end }}
26
27{{ define "newButton" }}
28<details class="relative inline-block text-left nav-dropdown">
29 <summary class="btn-create py-0 cursor-pointer list-none flex items-center gap-2">
30 {{ i "plus" "w-4 h-4" }} <span class="hidden md:inline">new</span>
31 </summary>
32 <div class="absolute flex flex-col right-0 mt-3 p-4 rounded w-48 bg-white dark:bg-gray-800 dark:text-white border border-gray-200 dark:border-gray-700">
33 <a href="/repo/new" class="flex items-center gap-2">
34 {{ i "book-plus" "w-4 h-4" }}
35 new repository
36 </a>
37 <a href="/strings/new" class="flex items-center gap-2">
38 {{ i "line-squiggle" "w-4 h-4" }}
39 new string
40 </a>
41 </div>
42</details>
43{{ end }}
44
45{{ define "profileDropdown" }}
46{{ $handle := resolve .Did }}
47<details class="relative inline-block text-left nav-dropdown">
48 <summary class="cursor-pointer list-none flex items-center gap-1">
49 {{ template "user/fragments/pic" (list .Did "size-6") }}
50 <span class="hidden md:inline">{{ $handle | truncateAt30 }}</span>
51 </summary>
52 <div class="absolute right-0 mt-4 rounded bg-white dark:bg-gray-800 dark:text-white border border-gray-200 dark:border-gray-700 shadow-lg z-50 text-sm" style="width: 14rem;">
53 {{ $linkStyle := "flex items-center gap-3 px-4 py-2 hover:no-underline hover:bg-gray-50 hover:dark:bg-gray-700/50" }}
54
55 {{ $others := .Accounts | otherAccounts .Did }}
56 {{ if $others }}
57 <div class="text-sm text-gray-500 dark:text-gray-400 px-3 py-1 pt-2">switch account</div>
58 {{ range $others }}
59 <button
60 type="button"
61 hx-post="/account/switch"
62 hx-vals='{"did": "{{ .Did }}"}'
63 hx-swap="none"
64 class="{{$linkStyle}} w-full text-left pl-3"
65 >
66 {{ template "user/fragments/pic" (list .Did "size-6") }}
67 <span class="truncate flex-1">{{ .Did | resolve }}</span>
68 </button>
69 {{ end }}
70 {{ end }}
71
72 <a href="/login?mode=add_account" class="{{$linkStyle}} pl-3">
73 <div class="size-6 rounded-full bg-gray-100 dark:bg-gray-700 flex items-center justify-center">
74 {{ i "plus" "size-3" }}
75 </div>
76
77 <div class="text-left flex-1 min-w-0 block truncate">
78 add account
79 </div>
80 </a>
81
82 <div class="border-t border-gray-200 dark:border-gray-700">
83 <a href="/{{ $handle }}" class="{{$linkStyle}}">
84 {{ i "user" "size-4" }}
85 profile
86 </a>
87 <a href="/{{ $handle }}?tab=repos" class="{{$linkStyle}}">
88 {{ i "book-marked" "size-4" }}
89 repositories
90 </a>
91 <a href="/{{ $handle }}?tab=strings" class="{{$linkStyle}}">
92 {{ i "line-squiggle" "size-4" }}
93 strings
94 </a>
95 <a href="/settings" class="{{$linkStyle}}">
96 {{ i "cog" "size-4" }}
97 settings
98 </a>
99 <a href="#"
100 hx-post="/logout"
101 hx-swap="none"
102 class="{{$linkStyle}} text-red-400 hover:text-red-400 hover:bg-red-100 dark:hover:bg-red-700/20 pb-2">
103 {{ i "log-out" "size-4" }}
104 logout
105 </a>
106 </div>
107 </div>
108</details>
109
110<script>
111document.addEventListener('click', function(event) {
112 const dropdowns = document.querySelectorAll('.nav-dropdown');
113 dropdowns.forEach(function(dropdown) {
114 if (!dropdown.contains(event.target)) {
115 dropdown.removeAttribute('open');
116 }
117 });
118});
119</script>
120{{ end }}