{% macro nav(selected="", show_lhs=true) -%}
<nav>
    <div class="content_container">
        <div class="flex nav_side">
            <a href="/" class="button desktop title">
                <b>{{ config.name }}</b>
            </a>

            {% if show_lhs %}
            <a
                href="/"
                class="button {% if selected == 'home' %}active{% endif %}"
            >
                {{ icon "house" }}
                <span class="desktop">{{ text "general:link.home" }}</span>
            </a>

            <a
                href="/communities"
                class="button {% if selected == 'communities' %}active{% endif %}"
            >
                {{ icon "book-heart" }}
                <span class="desktop"
                    >{{ text "general:link.communities" }}</span
                >
            </a>
            {% endif %}
        </div>

        <div class="flex nav_side">
            {% if user %}
            <a href="/notifs" class="button" title="Notifications">
                {{ icon "bell" }} {% if user.notification_count > 0 %}
                <span class="notification tr"
                    >{{ user.notification_count }}</span
                >
                {% endif %}
            </a>

            <div class="dropdown">
                <!-- prettier-ignore -->
                <button
                    class="flex-row title"
                    onclick="trigger('atto::hooks::dropdown', [event])"
                    exclude="dropdown"
                    style="gap: 0.25rem !important"
                >
                    {{ macros::avatar(username=user.username, size="24px") }}
                    {{ icon "chevron-down" c(dropdown-arrow) }}
                </button>

                <div class="inner">
                    <b class="title">{{ user.username }}</b>
                    <a href="/user/{{ user.username }}">
                        {{ icon "circle-user-round" }}
                        <span>{{ text "auth:link.my_profile" }}</span>
                    </a>

                    <a href="/settings">
                        {{ icon "settings" }}
                        <span>{{ text "auth:link.settings" }}</span>
                    </a>

                    <div class="title"></div>
                    <button class="red" onclick="trigger('me::logout')">
                        {{ icon "log-out" }}
                        <span>{{ text "auth:action.logout" }}</span>
                    </button>
                </div>
            </div>
            {% else %}
            <div class="dropdown">
                <button
                    class="title"
                    onclick="trigger('atto::hooks::dropdown', [event])"
                    exclude="dropdown"
                >
                    {{ icon "chevron-down" c(dropdown-arrow) }}
                </button>

                <div class="inner">
                    <a href="/auth/login" class="button">
                        {{ icon "log-in" }}
                        <span>{{ text "auth:action.login" }}</span>
                    </a>
                    <a href="/auth/register" class="button">
                        {{ icon "user-plus" }}
                        <span>{{ text "auth:action.register" }}</span>
                    </a>
                </div>
            </div>
            {% endif %}
        </div>
    </div>
</nav>
{%- endmacro %} {% macro avatar(username, size="24px") -%}
<img
    title="{{ username }}'s avatar"
    src="/api/v1/auth/profile/{{ username }}/avatar"
    alt="@{{ username }}"
    class="avatar shadow"
    style="--size: {{ size }}"
/>
{%- endmacro %}