
<section id="section-menu-lateral" class="bs-col-auto">
    {# TODO transtion width #} 
    <nav id="menu-lateral">
        <div>
            <button id="btn-menu-fold" class="px-small" onclick="menuLeft.foldToggle()">
                <span class="menu-label d-fold-none text-light">
                    {{ 'Replier' | trad }}
                </span>
                <i class="icosq-arrow-left d-fold-none menu-icon"></i>
                <i class="icosq-arrow-right d-unfold-none mx-auto menu-icon"></i>
            </button>
        </div>
        <ul class="menu">

        {#___________________________________________________________________
        Menu favorite #}
        {% if listeFav is not empty %}
            <li>
                {# Folded #}
                <a class="menu-item d-unfold-none" href="{{ path('Utilisateur.Index.menuIntermediaireFav')}}">
                    <i class="menu-icon icosq-favoris"></i>
                </a>

                {# Unfolded #}
                {% set input_id = uid()%}
                <input id="menuLeft_{{ input_id }}" class="d-none" type="checkbox" {{ item.active ? 'checked' }}/>
                <label for="menuLeft_{{ input_id }}" class="menu-item d-fold-none" href="{{ path('Utilisateur.Index.menuIntermediaireFav')}}">
                    <span class="menu-label">{{ 'Favoris' | trad }}</span>
                    <i class="icosq-chevron"></i>
                    <i class="menu-icon icosq-favoris"></i>
                </label>

                {# Submenu #}
                <ul class="submenu">
                {% for favoris in listeFav %}
                    <li>
                        <a class="submenu-item menu_fav_suppr {{ favoris.active ?  'active' }} context-menu-one" data-id="{{ favoris.ID_FAV }}" 
                            href="{{ path( favoris.PATH_FAV, favoris.PATH_PARAMS) }}" 
                        >
                            <span>{{ favoris.TITRE_FAV | trad }}</span>
                        </a>
                    </li>
                {% endfor %}
                </ul>

            </li>
        {% endif %}

        {#___________________________________________________________________
         # Menu #}
        {% for item in menu %}
            <li>
                {% if item.submenu is defined %}
                    {# Folded #}
                    <a class="menu-item d-unfold-none {{ item.active ?  'active' }}"
                        {% if item.link is defined %}
                            href="{{ item.link }}"
                        {% else %}
                            href="#" {# TODO #}
                        {% endif %}
                    >
                        {% if item.notif != null %}
                            <div class="badge-counter">{{ item.notif }}</div>
                        {% endif %}
                        <i class="menu-icon icosq-{{ item.icon }}"></i>
                    </a>

                    {# Unfolded #}
                    {% set input_id = uid() %}
                    <input id="menuLeft_{{ input_id }}" class="d-none" type="checkbox" {{ item.active ?  'checked' }} />
                    <label for="menuLeft_{{ input_id }}" class="menu-item d-fold-none {{ item.active ?  'active' }}">
                        <span class="menu-label">
                            {{ item.label }}
                            {% if item.label_notif != null %}
                                <div class="badge-counter">{{ item.label_notif }}</div>
                            {% endif %}
                        </span>
                        {% if item.notif != null %}
                            <div class="badge-counter">{{ item.notif }}</div>
                        {% endif %}
                        {% if item.submenu is defined %}
                            <i class="icosq-chevron"></i>
                        {% endif %}
                        <i class="menu-icon icosq-{{ item.icon }}"></i>
                    </label>
                    
                    {# Submenu #}
                    <ul class="submenu">
                        {% for subitem in item.submenu %}
                            {% if subitem %}
                            <li>
                                <a class="submenu-item {{ subitem.data_title is defined ? 'menu_fav_ajout' }} {{ subitem.active ?  'active' }}"
                                    href="{{ subitem.link }}" 
                                    data-titre="{{ subitem.data_title }}" 
                                    data-path="{{ subitem.data_path }}"
                                    {% if subitem.data_param is defined -%}
                                        data-param="{{ subitem.data_param | json_encode }}"
                                    {%- endif %}
                                >
                                    <span class="mr-auto">{{ subitem.label }}</span>
                                    {% if (subitem.notif|default(0)) != 0 %}
                                        <div class="badge-counter">{{ subitem.notif }}</div>
                                    {% endif %}
                                </a>
                            </li>
                            {% endif %}
                        {% endfor %}
                    </ul>
                {% else %}
                    {# Case : Single link #}
                    {# Link #}
                    <a class="menu-item {{ item.active ?  'active' }} {{ item.data_title is defined ? 'menu_fav_ajout' }}" 
                        data-titre="{{ item.data_title }}" 
                        data-path="{{ item.data_path }}"
                        {% if item.data_param is defined -%}
                            data-param="{{ item.data_param }}"
                        {%- endif %}
                        {% if item.link is defined %}
                        href="{{ item.link }}"
                        {% else %}
                            href="#" {# TODO #}
                        {% endif %}
                    >
                        <span class="menu-label d-fold-none">
                            {{ item.label }}
                            {% if item.label_notif != null %}
                                <div class="badge-counter">{{ item.label_notif }}</div>
                            {% endif %}
                        </span>
                        {% if item.notif != null %}
                            <div class="badge-counter">{{ item.notif }}</div>
                        {% endif %}
                        <i class="menu-icon icosq-{{ item.icon }}"></i>
                    </a>
                    {# Submenu #}
                    {# 
                    For menu link with no submenu we add a submenu repeating the main link 
                    so that in folded mode when hovered we can see its label in a submenu
                    #}
                    <ul class="submenu-single-link">
                        <li>
                            <a class="submenu-item {{ item.data_title is defined ? 'menu_fav_ajout' }}" 
                                href="{{ item.link }}"
                                data-titre="{{ item.data_title }}" 
                                data-path="{{ item.data_path }}"
                                {% if item.data_param is defined -%}
                                    data-param="{{ item.data_param }}"
                                {%- endif %}
                            >
                                <span>{{ item.label }}</span>
                            </a>
                        </li>
                    </ul>
                {% endif %}
            </li>
        {% endfor %}


        </ul>
    </nav>
</section>
<script>
class MenuLeft {
    constructor(name) {
        this._elRoot = document.getElementById('menu-lateral');
        this.state = this.getState();
        this.update();
    }
    getState() {
        // Get from cache
        let state = localStorage.getItem('menuLeft_state');
        if( state != null )
            return JSON.parse( state );
        // Default
        return {
            fold: true,
        };
    }
    update() {
        if( this.state.fold ) {
            this._elRoot.classList.add('fold');
        } else {
            this._elRoot.classList.remove('fold');
        }
    }
    foldToggle() {
        this.state.fold = ! this.state.fold;
        localStorage.setItem('menuLeft_state',JSON.stringify( this.state ) );
        this.update();
    }
};

window.menuLeft = new MenuLeft();

</script>
        