ScoDoc/app/templates/sidebar.j2

{# Barre marge gauche ScoDoc #}
{# -*- mode: jinja-html -*- #}
<!-- sidebar -->
    {# sidebar_common #}
    <div class="scodoc-index" mobile="true">
        <a href="{{url_for('scodoc.index', scodoc_dept=g.scodoc_dept)}}">ScoDoc</a>
    </div>

    <div id="authuser"><a id="authuserlink" href="{{
            url_for('users.user_info_page', scodoc_dept=g.scodoc_dept, user_name=current_user.user_name)
            }}">{{current_user.user_name}}</a>
        <br /><a id="deconnectlink" href="{{url_for('auth.logout')}}">déconnexion</a>
    </div>

    {% block sidebar_dept %}
        <div class="sidebar-link-dept">
            <a href="{{ url_for('scolar.index_html', scodoc_dept=g.scodoc_dept) }}"
        >Dépt. {{ sco.prefs["DeptName"] }}</a>
        </div>

        {% if sco.prefs["DeptIntranetURL"] %}
        <div class="sidebar-item">
            <a href="{{ sco.prefs['DeptIntranetURL'] }}">{{ sco.prefs["DeptIntranetTitle"] }}</a>
        </div>
        {% endif %}
    {% endblock %}

    <div class="sidebar-item">
    <a href="{{url_for('scolar.index_html', scodoc_dept=g.scodoc_dept)}}">Semestres</a>
    </div>
    <div class="sidebar-item">
    <a href="{{url_for('notes.index_html', scodoc_dept=g.scodoc_dept)}}">Formations</a>
    </div>

    {% if current_user.has_permission(sco.Permission.AbsChange)%}
    <div class="sidebar-item">
    <a href="{{url_for('assiduites.bilan_dept', scodoc_dept=g.scodoc_dept)}}">Assiduité</a>
    </div>
    {% endif %}
    {% if current_user.has_permission(sco.Permission.UsersAdmin)
    or current_user.has_permission(sco.Permission.UsersView)
    %}
    <div class="sidebar-item">
    <a href="{{url_for('users.index_html', scodoc_dept=g.scodoc_dept)}}">Utilisateurs</a>
    </div>
    {% endif %}

    {% if current_user.has_permission(sco.Permission.EditPreferences) %}
    <div class="sidebar-item">
    <a href="{{url_for('scolar.edit_preferences', scodoc_dept=g.scodoc_dept)}}">Paramétrage</a>
    </div>
    {% endif %}

    <div class="sidebar-item" mobile="true">
    <a href="{{url_for('scolar.dept_news', scodoc_dept=g.scodoc_dept)}}">Dernières Opérations</a>
    </div>
    {# /sidebar_common #}

    <div class="box-chercheetud">Chercher étudiant:
        <form method="get" id="form-chercheetud"
            action="{{ url_for('scolar.search_etud_in_dept', scodoc_dept=g.scodoc_dept) }}">
            <div>
                <input type="text" size="12" class="in-expnom" name="expnom" spellcheck="false" />
            </div>
        </form>
    </div>

    <div class="etud-insidebar">
        {% if sco.etud %}
        <h2 id="insidebar-etud"><a href="{{url_for(
            'scolar.fiche_etud', scodoc_dept=g.scodoc_dept, etudid=sco.etud.id )}}" class="sidebar">
                <span class="fontred">{{sco.etud.nomprenom}}</span></a>
        </h2>
        <b>Absences</b>
        {% if sco.etud_cur_sem %}
        <span title="absences du {{ sco.etud_cur_sem['date_debut'].strftime('%d/%m/%Y') }}
        au {{ sco.etud_cur_sem['date_fin'].strftime('%d/%m/%Y') }}" data-tooltip>({{sco.prefs["assi_metrique"]}})
            <br />{{'%1g'|format(sco.nb_abs_just)}} J., {{'%1g'|format(sco.nb_abs_nj)}} N.J.</span>
        {% endif %}
        <ul>
            {% if current_user.has_permission(sco.Permission.AbsChange) %}
            <li><a href="{{ url_for('assiduites.ajout_assiduite_etud', scodoc_dept=g.scodoc_dept,
                    etudid=sco.etud.id) }}">Ajouter</a></li>
            <li><a href="{{ url_for('assiduites.ajout_justificatif_etud', scodoc_dept=g.scodoc_dept,
                    etudid=sco.etud.id) }}">Justifier</a></li>
            {% if sco.prefs["handle_billets_abs"] %}
            <li><a href="{{ url_for('absences.billets_etud', scodoc_dept=g.scodoc_dept,
                    etudid=sco.etud.id) }}">Billets</a></li>
            {% endif %}
            {% endif %}
            <li><a href="{{ url_for('assiduites.calendrier_assi_etud', scodoc_dept=g.scodoc_dept,
                    etudid=sco.etud.id) }}">Calendrier</a></li>
            <li><a href="{{ url_for('assiduites.bilan_etud', scodoc_dept=g.scodoc_dept,
                    etudid=sco.etud.id) }}">Bilan</a></li>
        </ul>
        {% endif %}
    </div> {# /etud-insidebar #}

    {# LOGO #}
    <div class="logo-insidebar">
        <div class="sidebar-bottom">
            <div class="sidebar-item">
                <a href="{{ url_for( 'scodoc.about', scodoc_dept=g.scodoc_dept ) }}">À propos</a>
            </div>
            <div class="sidebar-item">
                <a href="{{ scu.SCO_USER_MANUAL }}" target="_blank" rel="noopener">Aide</a>
            </div>
        </div>
    </div>
    <div class="logo-logo">
        <a href="{{ url_for( 'scodoc.about', scodoc_dept=g.scodoc_dept ) }}">
            {{ scu.icontag("scologo_img", no_size=True) | safe}}</a>
        <div class="sidebar-item version">
        {{ sco.SCOVERSION }}
        </div>
        {% if DEBUG %}
            <div style="color:gold; background-color: var(--sco-deep-blue); margin-top: 8px;">DEBUG</div>
        {% endif %}
    </div>
<!-- end of sidebar -->

<script>
    // Mobile Sidebar Toggle

    function toggleSidebarOffCanvas() {
        // vérification de la taille de l'écran, si faux ne fait rien
        if (window.innerWidth > 768) {
            return;
        }
        const sidebar = document.querySelector('#sidebar');
        const expanded = sidebar.getAttribute('aria-expanded') === 'true';
        sidebar.setAttribute('aria-expanded', !expanded);
        toggleScroll();
    }

    function toggleScroll(){

        const changeScroll = (b) => {
            document.querySelectorAll("body, html").forEach(el => el.classList.toggle("no-scroll", b));
        }

        const sidebar = document.querySelector('#sidebar');
        const formSemestreMenu = document.querySelector('.sco-formsemestre-menu-menu');

        const sidebarExpanded = sidebar ? sidebar.getAttribute('aria-expanded') === 'true' : false;
        const formSemestreMenuExpanded = formSemestreMenu ? formSemestreMenu.classList.contains("active") : false;

        let isScrollToggled = document.body.classList.contains("no-scroll");

        if (isScrollToggled && !sidebarExpanded && !formSemestreMenuExpanded) {
            changeScroll(false);
        }
        else if (!isScrollToggled && (sidebarExpanded || formSemestreMenuExpanded)) {
            changeScroll(true);
        }
    }

</script>