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="flex gap-2 font-bold italic">
6 tangled<sub>alpha</sub>
7 </a>
8 </div>
9
10 <div id="right-items" class="flex items-center gap-2">
11 {{ with .LoggedInUser }}
12 {{ block "newButton" . }} {{ end }}
13 {{ block "dropDown" . }} {{ end }}
14 {{ else }}
15 <a href="/login">login</a>
16 <span class="text-gray-500 dark:text-gray-400">or</span>
17 <a href="/signup" class="btn-create py-0 hover:no-underline hover:text-white flex items-center gap-2">
18 join now {{ i "arrow-right" "size-4" }}
19 </a>
20 {{ end }}
21 </div>
22 </div>
23 </nav>
24 {{ if .LoggedInUser }}
25 <div id="upgrade-banner"
26 hx-get="/knots/upgradeBanner"
27 hx-trigger="load"
28 hx-swap="innerHTML">
29 </div>
30 {{ end }}
31{{ end }}
32
33{{ define "newButton" }}
34<details class="relative inline-block text-left nav-dropdown">
35 <summary class="btn-create py-0 cursor-pointer list-none flex items-center gap-2">
36 {{ i "plus" "w-4 h-4" }} new
37 </summary>
38 <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">
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
54 class="cursor-pointer list-none flex items-center"
55 >
56 {{ $user := didOrHandle .Did .Handle }}
57 {{ template "user/fragments/picHandle" $user }}
58 </summary>
59 <div
60 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 >
62 <a href="/{{ $user }}">profile</a>
63 <a href="/{{ $user }}?tab=repos">repositories</a>
64 <a href="/{{ $user }}?tab=strings">strings</a>
65 <a href="/knots">knots</a>
66 <a href="/spindles">spindles</a>
67 <a href="/settings">settings</a>
68 <a href="#"
69 hx-post="/logout"
70 hx-swap="none"
71 class="text-red-400 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300">
72 logout
73 </a>
74 </div>
75</details>
76
77<script>
78document.addEventListener('click', function(event) {
79 const dropdowns = document.querySelectorAll('.nav-dropdown');
80 dropdowns.forEach(function(dropdown) {
81 if (!dropdown.contains(event.target)) {
82 dropdown.removeAttribute('open');
83 }
84 });
85});
86</script>
87{{ end }}