arimelody.me/views/header.html

{{define "header"}}

<header>
        <nav>
                <div id="header-home" hx-get="/" hx-on="click" hx-target="body" hx-swap="outerHTML show:window:top" preload="mouseover" hx-push-url="true">
                        <img src="/img/favicon.png" id="header-icon" width="100" height="100" alt="">
                        <div id="header-text">
                                <h1>ari melody</h1>
                                <h2>your local SPACEGIRL 💫</h2>
                        </div>
                </div>
                <a id="header-links-toggle">
                        <svg viewBox="0 0 70 50" xmlns="http://www.w3.org/2000/svg" width="24" height="24">
                                <rect y="00" width="70" height="10" rx="5" fill="#eee" />
                                <rect y="20" width="70" height="10" rx="5" fill="#eee" />
                                <rect y="40" width="70" height="10" rx="5" fill="#eee" />
                        </svg>
                </a>
                <ul id="header-links" hx-boost="true" hx-target="body" hx-swap="outerHTML show:window:top">
                        <li>
                                <a href="/" preload="mouseover">home</a>
                        </li>
                        <li>
                                <a href="/music" preload="mouseover">music</a>
                        </li>
                        <li>
                                <a href="https://git.arimelody.me/ari/arimelody.me" target="_blank">source</a>
                        </li>
                        <li>
                                <!-- coming later! -->
                                <span title="coming later!">blog</span>
                        </li>
                        <li>
                                <!-- coming later! -->
                                <span title="coming later!">art</span>
                        </li>
                        <li id="toggle-crt">
                                <a href="javascript:void(0)">crt</a>
                        </li>
                </ul>
        </nav>
</header>

{{end}}