{{ define "navigation.html" }}
<div class="container-fluid sticky-top pb-0">
    <div class="row align-items-center justify-content-center bg-dark h-100 shadow-lg p-0 mb-0 rounded">
        <div class="col-sm-8 p-3">
            <div style="color: whitesmoke; font-size: xx-large; font-family: monospace;">
                <a href="/home" style="color:whitesmoke">aetherial.dev homepage</a>
            </div>
        </div>
        <div class="col-sm">
            <div class="row">

                {{ range .headers }}
                    {{ template "link.html" . }}
                {{ end }}
                <div class="col-2">
                    <div class="bg-image hover-overlay shadow-1-strong d-inline-flex p-0"
                            id="dropdownMenuButton" data-bs-toggle="dropdown"
                            data-mdb-ripple-init
                            data-mdb-ripple-color="light">
                            <span onclick="openNav()">
                            <img src="/api/v1/assets/menu.png" style="max-height: 5vh;"/>
                                <div class="mask" style="background-color: hsla(0, 0%, 98%, 0.2)"></div>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{{ end }}