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

<nav hx-boost="true" class="flex fixed mx-auto w-full md:w-[80%] lg:w-[75%] z-[102]">
    <div class="mt-4 mx-4 rounded-2xl shadow-xl bg-base-100 border-base-300 border-[2px] navbar z-[103]">
        <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="menu dropdown-content bg-base-100 border-2 border-base-300 rounded-t-none rounded-box w-52 p-3 shadow-xl gap-1 mt-2">
                    <li>
                        <a class='hover:bg-base-300 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='hover:bg-base-300 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='hover:bg-base-300 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>
                    {{if .SignedIn}}
                    <li>
                        <a class='hover:bg-base-300 flex gap-4 {{if eq .Path "/services"}}active{{end}}'
                            href="/services">
                            <span class="w-5 text-center">
                                {{icon "services"}}
                            </span>
                            <span class="text-base">{{.T.services}}</span>
                        </a>
                    </li>
                    {{end}}
                    <li>
                        <a class='hover:bg-base-300 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>
                        <details>
                            <summary class="hover:bg-base-300">
                                <button class="flex gap-4">
                                    <span class="w-5 text-center">
                                        {{icon "language"}}
                                    </span>
                                    <span class="text-base">{{.T.language}}</span>
                                </button>
                            </summary>

                            <ul>
                                <li>
                                    <a class='mt-1 gap-4 hover:bg-base-300 flex {{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='mt-1 gap-4 hover:bg-base-300 flex {{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>
                            </ul>
                        </details>
                    </li>
                    <li>
                        {{if .SignedIn}}
                        <a class='hover:bg-base-300 flex gap-4 {{if eq .Path "/account"}}active{{end}}' href="/account">
                            <span class="w-5 text-center">
                                {{icon "login"}}
                            </span>
                            <span class="text-base">{{.T.account}}</span>
                        </a>
                        {{else}}
                        <a hx-boost="false" class="active flex gap-4" href="/auth?redirect={{.Path}}">
                            <span class="w-5 text-center">
                                {{icon "login"}}
                            </span>
                            <span class="text-base">{{.T.login}}</span>
                        </a>
                        {{end}}
                    </li>
                </ul>
            </details>
        </div>
    </div>
</nav>