tijl.dev-core/views/partials/menu.html

75 lines
3.6 KiB
HTML
Raw Normal View History

2024-08-19 22:32:43 +02:00
<nav class="flex">
<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" href="/">
<span class="w-5 text-center">
2024-08-20 11:49:05 +02:00
{{icon "home" }}
2024-08-19 22:32:43 +02:00
</span>
2024-08-20 11:49:05 +02:00
<span class="text-base">{{translate "home"}}</span>
2024-08-19 22:32:43 +02:00
</a></li>
<li><a class="flex gap-4" href="/blog">
<span class="w-5 text-center">
2024-08-20 11:49:05 +02:00
{{icon "blog"}}
2024-08-19 22:32:43 +02:00
</span>
2024-08-20 11:49:05 +02:00
<span class="text-base">{{translate "blog"}}</span>
2024-08-19 22:32:43 +02:00
</a></li>
<li class="flex-none">
<details class="dropdown">
<summary><a class="flex gap-4">
<span class="w-5 text-center">
2024-08-20 11:49:05 +02:00
{{icon "language"}}
2024-08-19 22:32:43 +02:00
</span>
2024-08-20 11:49:05 +02:00
<span class="text-base">{{translate "language"}}</span>
2024-08-19 22:32:43 +02:00
</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 active" href="/settings?lang=en">
<span class="w-5 h-5 text-center">
🇬🇧
</span>
<span class="text-base">
2024-08-20 11:49:05 +02:00
{{translate "english"}}
2024-08-19 22:32:43 +02:00
</span>
</a></li>
<li><a class="flex gap-4" href="/settings?lang=nl">
<span class="w-5 h-5 text-center">
🇳🇱
</span>
<span class="text-base">
2024-08-20 11:49:05 +02:00
{{translate "dutch"}}
2024-08-19 22:32:43 +02:00
</span>
</a></li>
</ul>
</details>
</li>
<li><a class="active flex gap-4" href="/login">
<span class="w-5 text-center">
2024-08-20 11:49:05 +02:00
{{icon "login"}}
2024-08-19 22:32:43 +02:00
</span>
2024-08-20 11:49:05 +02:00
<span class="text-base">{{translate "login"}}</span>
2024-08-19 22:32:43 +02:00
</a>
</li>
</ul>
</details>
</div>
</div>
</nav>