<a class="off-canvas-toggle btn btn-primary btn-action" href="#left-navigation"><i class="icon icon-menu"></i></a>
<div id="left-navigation" class="off-canvas-sidebar">
    <div class="navigation-menu">
        <a href="/" class="logo" style="display: block;">
            <img src="{{ url_for('static', path='/img/ghostforge-sidebar.png') }}" class="brand">
        </a>
        {% include "navigation/side_buttons.html" %}
        <div class="nav-menus">
            {% for key, value in gf_navbar.items() %}
            <details id="{{ key }}" , class="accordion">
                <summary class="accordion-header c-hand left-nav">
                    <span class="nav-item header">{{ key }}</span>
                </summary>
                <div class="accordion-body">
                    <ul class="menu menu-nav">
                        {% for subkey, subvalue in value.items() %}
                        <li class="menu-item">
                            <a href="{{ subvalue }}" class="nav-item">{{
                                subkey
                                }}</a>
                        </li>
                        {% endfor %}
                    </ul>
                </div>
            </details>
            {% endfor %}
        </div>
    </div>
    <div align="right">
        <kbd>
            {{ gf_version }}
            <a href="{{ gf_repository_url }}">
                <img src="{{ url_for('static', path='/img/github-inverted.png') }}" class="version-size">
            </a>
        </kbd>
    </div>
</div>

<a class="off-canvas-overlay" href="#close"></a>
{% block bottom_modals %}
{% include "modals/side_modals.html" %}
{% endblock bottom_modals %}
{% block bottomjs %}
<script type="module">
    import { faker } from "/faker.mjs";

    console.log(faker.person.firstName());
</script>
{% endblock bottomjs %}
