{{ define "navigation.html" }}
<div class="container-fluid sticky-top pb-0">
    <div class="row align-items-center justify-content-center h-100 shadow-lg p-0 mb-0 rounded" style="background-color: #2a2e2f;">
        <div class="col-sm-8 p-3">
            <div style="color: whitesmoke; font-size: xx-large; font-family: monospace;">
                <a href="/" style="color:whitesmoke">aetherial.dev homepage</a>
            </div>
        </div>
        <div class="col-sm">
            <div class="row">
                {{ range .headers }}
                    <div class="col-2">
                        <div class="bg-image hover-overlay shadow-1-strong rounded d-inline-flex p-0"
                            data-mdb-ripple-init
                            data-mdb-ripple-color="light">
                            <img src="/api/v1/assets/{{ .Link}}" style="max-height: 5vh;"/>
                            <a href="{{ .Redirect}}" target="_blank">
                              <div class="mask" style="background-color: hsla(0, 0%, 98%, 0.2)"></div>
                            </a>
                        </div>
                    </div>
                {{ end }}
                <div class="col-2">
                    <div class="bg-image hover-overlay shadow-1-strong d-inline-flex p-0 row"
                            id="dropdownMenuButton" data-bs-toggle="dropdown"
                            data-mdb-ripple-init
                            data-mdb-ripple-color="light">
                            <span onclick="toggleNav()">
                            <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>
{{ end }}