this repo has no description
tangled.org
1{{ define "layouts/fragments/topbar" }}
2 <nav class="space-x-4 px-6 py-2 rounded bg-white dark:bg-gray-800 dark:text-white drop-shadow-sm">
3 <div class="flex justify-between p-0 items-center">
4 <div id="left-items">
5 <a href="/" hx-boost="true" class="text-lg">{{ template "fragments/logotype" }}</a>
6 </div>
7
8 <div id="right-items" class="flex items-center gap-2">
9 {{ with .LoggedInUser }}
10 {{ block "newButton" . }} {{ end }}
11 {{ block "dropDown" . }} {{ end }}
12 {{ else }}
13 <a href="/login">login</a>
14 <span class="text-gray-500 dark:text-gray-400">or</span>
15 <a href="/signup" class="btn-create py-0 hover:no-underline hover:text-white flex items-center gap-2">
16 join now {{ i "arrow-right" "size-4" }}
17 </a>
18 {{ end }}
19 </div>
20 </div>
21 </nav>
22{{ end }}
23
24{{ define "newButton" }}
25<details class="relative inline-block text-left nav-dropdown">
26 <summary class="btn-create py-0 cursor-pointer list-none flex items-center gap-2">
27 {{ i "plus" "w-4 h-4" }} new
28 </summary>
29 <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">
30 <a href="/repo/new" class="flex items-center gap-2">
31 {{ i "book-plus" "w-4 h-4" }}
32 new repository
33 </a>
34 <a href="/strings/new" class="flex items-center gap-2">
35 {{ i "line-squiggle" "w-4 h-4" }}
36 new string
37 </a>
38 </div>
39</details>
40{{ end }}
41
42{{ define "dropDown" }}
43<details class="relative inline-block text-left nav-dropdown">
44 <summary
45 class="cursor-pointer list-none flex items-center"
46 >
47 {{ $user := didOrHandle .Did .Handle }}
48 {{ template "user/fragments/picHandle" $user }}
49 </summary>
50 <div
51 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"
52 >
53 <a href="/{{ $user }}">profile</a>
54 <a href="/{{ $user }}?tab=repos">repositories</a>
55 <a href="/{{ $user }}?tab=strings">strings</a>
56 <a href="/knots">knots</a>
57 <a href="/spindles">spindles</a>
58 <a href="/settings">settings</a>
59 <a href="#"
60 hx-post="/logout"
61 hx-swap="none"
62 class="text-red-400 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300">
63 logout
64 </a>
65 </div>
66</details>
67
68<script>
69document.addEventListener('click', function(event) {
70 const dropdowns = document.querySelectorAll('.nav-dropdown');
71 dropdowns.forEach(function(dropdown) {
72 if (!dropdown.contains(event.target)) {
73 dropdown.removeAttribute('open');
74 }
75 });
76});
77</script>
78{{ end }}