this repo has no description
tangled.org
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/dolly/logo" "size-8 text-black dark:text-white" }}
7 <span class="font-bold text-xl not-italic hidden md:inline">tangled</span>
8 <span class="font-normal not-italic text-xs rounded bg-gray-100 dark:bg-gray-700 px-1 hidden md:inline">
9 alpha
10 </span>
11 </a>
12 </div>
13
14 <div id="right-items" class="flex items-center gap-4">
15 {{ with .LoggedInUser }}
16 {{ block "newButton" . }} {{ end }}
17 {{ template "notifications/fragments/bell" }}
18 {{ block "dropDown" . }} {{ end }}
19 {{ else }}
20 <a href="/login">login</a>
21 <span class="text-gray-500 dark:text-gray-400">or</span>
22 <a href="/signup" class="btn-create py-0 hover:no-underline hover:text-white flex items-center gap-2">
23 join now {{ 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 class="btn-create py-0 cursor-pointer list-none flex items-center gap-2">
34 {{ i "plus" "w-4 h-4" }} <span class="hidden md:inline">new</span>
35 </summary>
36 <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">
37 <a href="/repo/new" class="flex items-center gap-2">
38 {{ i "book-plus" "w-4 h-4" }}
39 new repository
40 </a>
41 <a href="/strings/new" class="flex items-center gap-2">
42 {{ i "line-squiggle" "w-4 h-4" }}
43 new string
44 </a>
45 </div>
46</details>
47{{ end }}
48
49{{ define "dropDown" }}
50<details class="relative inline-block text-left nav-dropdown">
51 <summary
52 class="cursor-pointer list-none flex items-center gap-1"
53 >
54 {{ $user := .Did }}
55 <img
56 src="{{ tinyAvatar $user }}"
57 alt=""
58 class="rounded-full h-6 w-6 border border-gray-300 dark:border-gray-700"
59 />
60 <span class="hidden md:inline">{{ $user | resolve | truncateAt30 }}</span>
61 </summary>
62 <div
63 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"
64 >
65 <a href="/{{ $user }}">profile</a>
66 <a href="/{{ $user }}?tab=repos">repositories</a>
67 <a href="/{{ $user }}?tab=strings">strings</a>
68 <a href="/knots">knots</a>
69 <a href="/spindles">spindles</a>
70 <a href="/settings">settings</a>
71 <a href="#"
72 hx-post="/logout"
73 hx-swap="none"
74 class="text-red-400 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300">
75 logout
76 </a>
77 </div>
78</details>
79
80<script>
81document.addEventListener('click', function(event) {
82 const dropdowns = document.querySelectorAll('.nav-dropdown');
83 dropdowns.forEach(function(dropdown) {
84 if (!dropdown.contains(event.target)) {
85 dropdown.removeAttribute('open');
86 }
87 });
88});
89</script>
90{{ end }}