nav.html
74 lines1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
<nav class="sticky top-0 z-50 border-b" style="background: rgba(248,249,252,0.88); backdrop-filter: blur(12px); border-color: rgba(100,130,180,0.08);">
<div class="max-w-3xl mx-auto px-6 h-14 flex items-center justify-between">
<a href="/" class="text-base font-semibold tracking-tight text-bright" hx-boost="true">Congo</a>
<div class="hidden sm:flex items-center gap-0.5" hx-boost="true">
<div class="nav-dropdown">
<button class="nav-link nav-dropdown-btn">Software <svg class="inline w-3 h-3 ml-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"/></svg></button>
<div class="nav-dropdown-menu"><div class="nav-dropdown-menu-inner">
<a href="/philosophy" class="nav-dropdown-item">Philosophy</a>
<a href="/framework" class="nav-dropdown-item">Framework</a>
<a href="/workspace" class="nav-dropdown-item">Workspace</a>
<a href="/source" class="nav-dropdown-item">Source Code</a>
</div></div>
</div>
<div class="nav-dropdown">
<button class="nav-link nav-dropdown-btn">Services <svg class="inline w-3 h-3 ml-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"/></svg></button>
<div class="nav-dropdown-menu"><div class="nav-dropdown-menu-inner">
<a href="https://host.congo.gg" class="nav-dropdown-item" target="_blank">Hosting</a>
<a href="https://mail.congo.gg" class="nav-dropdown-item" target="_blank">Mail</a>
</div></div>
</div>
<a href="/download" class="nav-link">Download</a>
<a href="https://news.congo.gg" class="nav-link" target="_blank">News</a>
<div class="ml-2 pl-2" style="border-left: 1px solid rgba(100,130,180,0.12);">
{{template "star.html" .}}
</div>
</div>
<details class="sm:hidden relative" id="mobile-nav">
<summary class="list-none cursor-pointer p-2 text-muted">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5">
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 9h16.5m-16.5 6.75h16.5"/>
</svg>
</summary>
<div class="absolute right-0 top-full mt-2 py-2 w-48 border bg-white z-50 rounded shadow-lg" style="border-color: rgba(100,130,180,0.1);" hx-boost="true">
<div class="px-4 py-1 text-[10px] font-semibold uppercase tracking-widest text-muted">Software</div>
<a href="/philosophy" class="mobile-nav-link block px-4 py-2 text-sm text-body hover:text-bright transition-colors">Philosophy</a>
<a href="/framework" class="mobile-nav-link block px-4 py-2 text-sm text-body hover:text-bright transition-colors">Framework</a>
<a href="/workspace" class="mobile-nav-link block px-4 py-2 text-sm text-body hover:text-bright transition-colors">Workspace</a>
<a href="/source" class="mobile-nav-link block px-4 py-2 text-sm text-body hover:text-bright transition-colors">Source Code</a>
<div class="my-1" style="border-top: 1px solid rgba(100,130,180,0.08);"></div>
<div class="px-4 py-1 text-[10px] font-semibold uppercase tracking-widest text-muted">Services</div>
<a href="https://host.congo.gg" class="mobile-nav-link block px-4 py-2 text-sm text-body hover:text-bright transition-colors" target="_blank">Hosting</a>
<a href="https://mail.congo.gg" class="mobile-nav-link block px-4 py-2 text-sm text-body hover:text-bright transition-colors" target="_blank">Mail</a>
<div class="my-1" style="border-top: 1px solid rgba(100,130,180,0.08);"></div>
<a href="/download" class="mobile-nav-link block px-4 py-2 text-sm text-body hover:text-bright transition-colors">Download</a>
<a href="https://news.congo.gg" class="mobile-nav-link block px-4 py-2 text-sm text-body hover:text-bright transition-colors" target="_blank">News</a>
<div class="my-1" style="border-top: 1px solid rgba(100,130,180,0.08);"></div>
<div class="px-4 py-2">{{template "star-compact.html" .}}</div>
</div>
</details>
</div>
</nav>
<script nonce="{{nonce}}">
(function() {
var path = location.pathname;
document.querySelectorAll('nav .nav-link, nav .nav-dropdown-item').forEach(function(a) {
if (a.hostname !== location.hostname) return;
if (a.pathname === path || (a.pathname !== '/' && path.startsWith(a.pathname))) {
a.classList.add('nav-link-active');
}
});
document.querySelectorAll('nav .mobile-nav-link').forEach(function(a) {
if (a.hostname !== location.hostname) return;
if (a.pathname === path || (a.pathname !== '/' && path.startsWith(a.pathname))) {
a.classList.remove('text-body');
a.classList.add('text-accent');
}
});
document.querySelectorAll('nav .nav-dropdown').forEach(function(dd) {
if (dd.querySelector('.nav-link-active')) {
dd.querySelector('.nav-dropdown-btn').classList.add('nav-link-active');
}
});
})();
</script>