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