|
1
|
{% load static %} |
|
2
|
<nav aria-label="Main navigation" class="bg-gray-900 border-b border-gray-700"> |
|
3
|
<div class="px-4 sm:px-6 lg:px-8"> |
|
4
|
<div class="flex h-14 items-center justify-between"> |
|
5
|
<div class="flex items-center gap-3"> |
|
6
|
<!-- Mobile sidebar toggle --> |
|
7
|
<button @click="mobileSidebar = !mobileSidebar" aria-label="Toggle sidebar" class="lg:hidden rounded-md p-2 text-gray-400 hover:text-white hover:bg-gray-800"> |
|
8
|
<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"> |
|
9
|
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" /> |
|
10
|
</svg> |
|
11
|
</button> |
|
12
|
<a href="{% url 'dashboard' %}" class="flex-shrink-0"> |
|
13
|
<img src="{% static 'img/fossilrepo-logo-dark.png' %}" alt="Fossilrepo" class="h-7 w-auto"> |
|
14
|
</a> |
|
15
|
</div> |
|
16
|
<div class="flex items-center gap-3"> |
|
17
|
<!-- Quick search --> |
|
18
|
<div x-data="{ open: false }" class="relative"> |
|
19
|
<button @click="open = !open; $nextTick(() => $refs.searchInput?.focus())" class="rounded-md p-2 text-gray-400 hover:text-white hover:bg-gray-800" title="Search (/)"> |
|
20
|
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"> |
|
21
|
<path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z" /> |
|
22
|
</svg> |
|
23
|
</button> |
|
24
|
<div x-show="open" @click.outside="open = false" @keydown.escape.window="open = false" x-transition |
|
25
|
class="absolute right-0 z-20 mt-2 w-80 rounded-lg bg-gray-800 shadow-lg ring-1 ring-gray-700 p-3"> |
|
26
|
<form method="get" action="{% if request.resolver_match.kwargs.slug %}/projects/{{ request.resolver_match.kwargs.slug }}/fossil/search/{% else %}/projects/fossil-scm/fossil/search/{% endif %}"> |
|
27
|
<input type="text" name="q" x-ref="searchInput" placeholder="Search checkins, tickets, wiki..." |
|
28
|
aria-label="Search checkins, tickets, wiki" |
|
29
|
class="w-full rounded-md border-gray-600 bg-gray-900 text-gray-100 text-sm px-3 py-2 focus:border-brand focus:ring-brand"> |
|
30
|
</form> |
|
31
|
</div> |
|
32
|
</div> |
|
33
|
<!-- Theme toggle --> |
|
34
|
<button x-data="{ dark: document.documentElement.classList.contains('dark') }" |
|
35
|
@click="dark = !dark; document.documentElement.classList.toggle('dark'); localStorage.setItem('theme', dark ? 'dark' : 'light')" |
|
36
|
class="rounded-md p-2 text-gray-400 hover:text-white hover:bg-gray-800" |
|
37
|
title="Toggle theme"> |
|
38
|
<svg x-show="dark" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"> |
|
39
|
<path stroke-linecap="round" stroke-linejoin="round" d="M12 3v2.25m6.364.386l-1.591 1.591M21 12h-2.25m-.386 6.364l-1.591-1.591M12 18.75V21m-4.773-4.227l-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z" /> |
|
40
|
</svg> |
|
41
|
<svg x-show="!dark" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" style="display:none"> |
|
42
|
<path stroke-linecap="round" stroke-linejoin="round" d="M21.752 15.002A9.718 9.718 0 0118 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 003 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 009.002-5.998z" /> |
|
43
|
</svg> |
|
44
|
</button> |
|
45
|
<!-- User menu --> |
|
46
|
<div class="relative" x-data="{ open: false }"> |
|
47
|
<button @click="open = !open" aria-label="User menu" class="flex items-center text-sm text-gray-400 hover:text-white"> |
|
48
|
{{ user.get_full_name|default:user.username }} |
|
49
|
<svg class="ml-1 h-4 w-4" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z" clip-rule="evenodd"/></svg> |
|
50
|
</button> |
|
51
|
<div x-show="open" @click.outside="open = false" x-transition |
|
52
|
class="absolute right-0 z-10 mt-2 w-48 rounded-md bg-gray-800 py-1 shadow-lg ring-1 ring-gray-700"> |
|
53
|
<a href="{% url 'accounts:profile' %}" class="block px-4 py-2 text-sm text-gray-300 hover:bg-gray-700 hover:text-white">Profile</a> |
|
54
|
<form method="post" action="{% url 'accounts:logout' %}">{% csrf_token %}<button type="submit" class="block w-full text-left px-4 py-2 text-sm text-gray-300 hover:bg-gray-700 hover:text-white">Sign out</button></form> |
|
55
|
</div> |
|
56
|
</div> |
|
57
|
</div> |
|
58
|
</div> |
|
59
|
</div> |
|
60
|
</nav> |
|
61
|
|