{# Basic menu list #}
<div class="hide-md">
    <a href="{% url 'bookmarks:new' %}" class="btn btn-primary mr-2">Add bookmark</a>
    <a href="{% url 'bookmarks:archived' %}" class="btn btn-link">Archive</a>
    <a href="{% url 'bookmarks:settings.index' %}" class="btn btn-link">Settings</a>
    <a href="{% url 'logout' %}" class="btn btn-link">Logout</a>
</div>
{# Menu drop-down for smaller devices #}
<div class="show-md">
    <a href="{% url 'bookmarks:new' %}" class="btn btn-primary">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" style="width: 24px; height: 24px">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
        </svg>
    </a>
    <div class="dropdown dropdown-right">
        <a href="#" id="mobile-nav-menu-trigger" class="btn btn-link dropdown-toggle" tabindex="0">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" style="width: 24px; height: 24px">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
            </svg>
        </a>
        <!-- menu component -->
        <ul class="menu">
            <li>
                <a href="{% url 'bookmarks:archived' %}" class="btn btn-link">Archive</a>
            </li>
            <li>
                <a href="{% url 'bookmarks:settings.index' %}" class="btn btn-link">Settings</a>
            </li>
            <li>
                <a href="{% url 'logout' %}" class="btn btn-link">Logout</a>
            </li>
        </ul>
    </div>
</div>
<script>
    // Hide mobile menu on outside click
    // The Spectre CSS component relies on focus changes to show/hide the dropdown, however mobile browsers like
    // Safari will not trigger a blur event when clicking on a non-focusable element, so we have to simulate the
    // behaviour through Javascript
    const mobileNavMenuTrigger = document.getElementById('mobile-nav-menu-trigger');

    function mobileNavMenuOutsideClickHandler(clickEvent) {
        if (mobileNavMenuTrigger.parentElement.contains(clickEvent.target)) return
        mobileNavMenuTrigger.blur();
    }

    mobileNavMenuTrigger.addEventListener('focus', function () {
        document.addEventListener('click', mobileNavMenuOutsideClickHandler);
    })
    mobileNavMenuTrigger.addEventListener('blur', function () {
        document.removeEventListener('click', mobileNavMenuOutsideClickHandler);
    })
</script>