96 lines
4.9 KiB
HTML
96 lines
4.9 KiB
HTML
<nav hx-boost="true" class="flex fixed mx-auto w-full lg:w-[80%] xl:w-[75%]">
|
|
<div class="mt-4 mx-4 rounded-2xl shadow-2xl bg-base-300 navbar">
|
|
<div class="flex-1">
|
|
<a href="/" class="btn btn-ghost font-mono text-xl">tijl.dev</a>
|
|
</div>
|
|
<div class="flex-none">
|
|
<details class="dropdown dropdown-bottom dropdown-end">
|
|
<summary class="btn btn-ghost btn-square">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
|
|
stroke="currentColor" stroke-width="2">
|
|
<path stroke-linecap="round" stroke-linejoin="round"
|
|
d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" />
|
|
</svg>
|
|
</summary>
|
|
<ul class="mt-3 z-[1] menu dropdown-content bg-base-300 rounded-box w-52 p-3 shadow-xl gap-1">
|
|
<li>
|
|
<a class='flex gap-4 {{if eq .Path "/"}}active{{end}}' href="/">
|
|
<span class="w-5 text-center">
|
|
{{icon "home" }}
|
|
</span>
|
|
<span class="text-base">{{.T.home}}</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a class='flex gap-4 {{if eq .Path "/blog"}}active{{end}}' href="/blog">
|
|
<span class=" w-5 text-center">
|
|
{{icon "blog"}}
|
|
</span>
|
|
<span class="text-base">{{.T.blog}}</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a class='flex gap-4 {{if eq .Path "/projects"}}active{{end}}' href="/projects">
|
|
<span class="w-5 text-center">
|
|
{{icon "projects"}}
|
|
</span>
|
|
<span class="text-base">{{.T.projects}}</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a class='flex gap-4 {{if eq .Path "/about"}}active{{end}}' href="/about">
|
|
<span class="w-5 text-center">
|
|
{{icon "about"}}
|
|
</span>
|
|
<span class="text-base">{{.T.about}}</span>
|
|
</a>
|
|
</li>
|
|
<li class="flex-none">
|
|
<details class="dropdown">
|
|
<summary><a class="flex gap-4">
|
|
<span class="w-5 text-center">
|
|
{{icon "language"}}
|
|
</span>
|
|
<span class="text-base">{{.T.language}}</span>
|
|
</a>
|
|
</summary>
|
|
|
|
<ul class="menu dropdown-content z-[12] bg-base-200 rounded-box w-48 p-3 shadow-xl gap-1">
|
|
<li>
|
|
<a class='flex gap-4 {{if eq .Language "en"}}active{{end}}'
|
|
href="/settings?lang=en&redirect={{.Path}}">
|
|
<span class="w-5 h-5 text-center">
|
|
🇬🇧
|
|
</span>
|
|
<span class="text-base">
|
|
{{.T.english}}
|
|
</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a class='flex gap-4 {{if eq .Language "nl"}}active{{end}}'
|
|
href="/settings?lang=nl&redirect={{.Path}}">
|
|
<span class="w-5 h-5 text-center">
|
|
🇳🇱
|
|
</span>
|
|
<span class="text-base">
|
|
{{.T.dutch}}
|
|
</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</details>
|
|
</li>
|
|
<li><a class="active flex gap-4" hx-boost="false" href="/login">
|
|
<span class="w-5 text-center">
|
|
{{icon "login"}}
|
|
</span>
|
|
<span class="text-base">{{.T.login}}</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</details>
|
|
</div>
|
|
</div>
|
|
</nav>
|