alice.pds.demo.boltless.dev
This repository has no description
1{{ define "layouts/fragments/topbar" }}
2 <nav class="mx-auto space-x-4 px-6 py-2">
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 <div class="flex items-center order-1 md:order-3">{{ block "newButton" . }} {{ end }}</div>
13 <div class="flex items-center order-2 md:order-4">{{ template "notifications/fragments/bell" }}</div>
14 <div class="flex items-center order-3 md:order-1">{{ block "search" . }} {{ end }}</div>
15 <div class="hidden md:block md:order-2 w-px h-6 bg-gray-200 dark:bg-gray-700 self-center"></div>
16 <div class="flex items-center order-4 md:order-5">{{ block "profileDropdown" . }} {{ end }}</div>
17 {{ else }}
18 <a href="/login">Login</a>
19 <span class="text-gray-500 dark:text-gray-400">or</span>
20 <a href="/signup" class="btn-create py-0 hover:no-underline hover:text-white flex items-center gap-2">
21 Join now {{ i "arrow-right" "size-4" }}
22 </a>
23 {{ end }}
24 </div>
25 </div>
26 </nav>
27{{ end }}
28
29{{ define "newButton" }}
30<details class="relative inline-block text-left nav-dropdown">
31 <summary class="btn py-0 cursor-pointer list-none flex items-center gap-2">
32 {{ i "plus" "w-4 h-4" }} <span class="hidden md:inline">New</span>
33 </summary>
34 <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">
35 <a href="/repo/new" class="flex items-center gap-2">
36 {{ i "book-plus" "w-4 h-4" }}
37 New repository
38 </a>
39 <a href="/strings/new" class="flex items-center gap-2">
40 {{ i "line-squiggle" "w-4 h-4" }}
41 New string
42 </a>
43 </div>
44</details>
45{{ end }}
46
47{{ define "search" }}
48<div class="relative hidden md:block" id="topbar-search-container">
49 <div id="topbar-search-box" class="relative flex items-center gap-2 px-2 pr-1.5 py-4 max-h-[30px] md:w-80 lg:w-96 border border-gray-200 dark:border-gray-700 rounded bg-white dark:bg-gray-900 focus-within:z-[51] before:content-[''] before:absolute before:inset-0 before:rounded-md before:invisible focus-within:before:visible before:ring-2 before:ring-transparent before:ring-offset-transparent before:ring-offset-1 before:pointer-events-none focus-within:before:ring-gray-300 dark:focus-within:before:ring-gray-600">
50 {{ i "search" "size-4 text-gray-400" }}
51 <input
52 type="text"
53 id="topbar-search-input"
54 name="q"
55 placeholder="Search..."
56 autocomplete="off"
57 class="flex-1 border-none bg-transparent p-0 focus:outline-none focus:[box-shadow:none] text-sm text-gray-800 dark:text-gray-200 placeholder-gray-400 dark:placeholder-gray-600 peer"
58 hx-get="/search/quick"
59 hx-trigger="input changed delay:10ms"
60 hx-target="#topbar-search-results"
61 hx-swap="innerHTML"
62 hx-indicator="#topbar-search-indicator"
63 />
64 <kbd id="search-kbd" class="pointer-events-none flex items-center text-xs border border-gray-200 dark:border-gray-600 rounded border-b-2 px-1 font-sans leading-5 text-gray-400 dark:text-gray-500 peer-focus:hidden peer-[:not(:placeholder-shown)]:hidden"></kbd>
65 <script>
66 (function() {
67 var kbd = document.getElementById('search-kbd');
68 if (!kbd) return;
69 var ua = navigator.userAgent;
70 var isMobile = /Mobi|Android|iPhone|iPad|iPod/i.test(ua);
71 if (isMobile) {
72 kbd.style.display = 'none';
73 } else if (/Macintosh|Mac OS X/.test(ua)) {
74 kbd.textContent = '⌘K';
75 } else {
76 kbd.textContent = 'Ctrl+K';
77 }
78 })();
79 </script>
80 <span id="topbar-search-indicator" class="shrink-0">
81 {{ i "loader-circle" "size-4 text-gray-400 animate-spin" }}
82 </span>
83 <button
84 type="button"
85 class="hidden peer-[:not(:placeholder-shown)]:block text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
86 onclick="const i=document.getElementById('topbar-search-input');i.value='';htmx.trigger(i,'input');i.focus()"
87 >{{ i "x" "size-4" }}</button>
88 </div>
89 <div id="topbar-search-results" class="absolute w-full z-50"></div>
90</div>
91
92<button id="mobile-search-btn" class="md:hidden" type="button" data-action="open-mobile-search">
93 {{ i "search" "size-5 text-gray-500 dark:text-gray-400" }}
94</button>
95
96<div id="mobile-search-overlay"
97 class="md:hidden fixed inset-x-0 top-0 h-dvh z-50
98 bg-white dark:bg-gray-900
99 flex flex-col
100 opacity-0 pointer-events-none
101 transition-opacity duration-150
102 pt-[env(safe-area-inset-top)]"
103 aria-hidden="true">
104 <div class="flex items-center gap-3 px-4 py-3 border-b border-gray-200 dark:border-gray-700 shrink-0">
105 {{ i "search" "size-4 text-gray-400 shrink-0" }}
106 <input
107 type="text"
108 id="mobile-search-input"
109 name="q"
110 placeholder="Search..."
111 autocomplete="off"
112 inputmode="search"
113 class="flex-1 min-w-0 border-none bg-transparent p-0 focus:outline-none focus:[box-shadow:none] text-[16px] text-gray-800 dark:text-gray-200 placeholder-gray-400 dark:placeholder-gray-600 peer"
114 hx-get="/search/quick/mobile"
115 hx-trigger="input changed delay:10ms"
116 hx-target="#mobile-search-results"
117 hx-swap="innerHTML"
118 hx-indicator="#mobile-search-indicator"
119 />
120 <span id="mobile-search-indicator" class="shrink-0">
121 {{ i "loader-circle" "size-4 text-gray-400 animate-spin" }}
122 </span>
123 <button type="button" class="p-1 -mr-1 hit-area hit-area-4" data-action="close-mobile-search">
124 {{ i "x" "size-5 text-gray-400" }}
125 </button>
126 </div>
127 <div id="mobile-search-results" class="flex-1 flex flex-col overflow-hidden pb-[env(safe-area-inset-bottom)]"></div>
128 <div id="mobile-search-spacer" class="bg-gray-50 dark:bg-gray-800 hidden"></div>
129</div>
130<style>
131 #topbar-search-indicator,
132 #mobile-search-indicator {
133 display: none;
134 opacity: 0;
135 transition-property: opacity, display;
136 transition-duration: 150ms, 150ms;
137 transition-timing-function: ease-out;
138 transition-behavior: allow-discrete;
139 }
140 #topbar-search-indicator.htmx-request,
141 #mobile-search-indicator.htmx-request {
142 display: block;
143 opacity: 1;
144 transition-duration: 0s, 0s;
145 }
146</style>
147{{ end }}
148
149{{ define "profileDropdown" }}
150{{ $handle := resolve .Did }}
151<details class="relative inline-block text-left nav-dropdown">
152 <summary class="cursor-pointer list-none flex items-center gap-1">
153 {{ template "user/fragments/pic" (list .Did "size-8 md:size-6") }}
154 <span class="hidden md:inline">{{ $handle | truncateAt30 }}</span>
155 </summary>
156 <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;">
157 {{ $linkStyle := "flex items-center gap-3 px-4 py-2 hover:no-underline hover:bg-gray-50 hover:dark:bg-gray-700/50" }}
158
159 {{ $others := .Accounts | otherAccounts .Did }}
160 {{ if $others }}
161 <div class="text-sm text-gray-500 dark:text-gray-400 px-3 py-1 pt-2">Switch account</div>
162 {{ range $others }}
163 <button
164 type="button"
165 hx-post="/account/switch"
166 hx-vals='{"did": "{{ .Did }}"}'
167 hx-swap="none"
168 class="{{$linkStyle}} w-full text-left pl-3"
169 >
170 {{ template "user/fragments/pic" (list .Did "size-6") }}
171 <span class="truncate flex-1">{{ .Did | resolve }}</span>
172 </button>
173 {{ end }}
174 {{ end }}
175
176 <a href="/login?mode=add_account" class="{{$linkStyle}} pl-3">
177 <div class="size-6 rounded-full bg-gray-100 dark:bg-gray-700 flex items-center justify-center">
178 {{ i "plus" "size-3" }}
179 </div>
180
181 <div class="text-left flex-1 min-w-0 block truncate">
182 Add account
183 </div>
184 </a>
185
186 <div class="border-t border-gray-200 dark:border-gray-700">
187 <a href="/{{ $handle }}" class="{{$linkStyle}}">
188 {{ i "user" "size-4" }}
189 Profile
190 </a>
191 <a href="/{{ $handle }}?tab=repos" class="{{$linkStyle}}">
192 {{ i "book-marked" "size-4" }}
193 Repositories
194 </a>
195 <a href="/{{ $handle }}?tab=strings" class="{{$linkStyle}}">
196 {{ i "line-squiggle" "size-4" }}
197 Strings
198 </a>
199 <a href="/settings" class="{{$linkStyle}}">
200 {{ i "cog" "size-4" }}
201 Settings
202 </a>
203 <a href="#"
204 hx-post="/logout"
205 hx-swap="none"
206 class="{{$linkStyle}} text-red-400 hover:text-red-400 hover:bg-red-100 dark:hover:bg-red-700/20 pb-2">
207 {{ i "log-out" "size-4" }}
208 Logout
209 </a>
210 </div>
211 </div>
212</details>
213
214<script>
215document.addEventListener('click', function(event) {
216 const dropdowns = document.querySelectorAll('.nav-dropdown');
217 dropdowns.forEach(function(dropdown) {
218 if (!dropdown.contains(event.target)) {
219 dropdown.removeAttribute('open');
220 }
221 });
222});
223</script>
224{{ end }}