Collapse sidebar on small screens

Signed-off-by: Emmy D'Anello <emmy.danello@animath.fr>

tfjm/templates/sidebar.html

@@ -3,8 +3,26 @@
 {% if user.is_authenticated %}
     <div class="card">
         <div class="card-header bg-dark-subtle">
+            <div class="d-lg-none btn" data-bs-toggle="collapse"
+                 data-bs-target="#sidebar-card" aria-controls="sidebar-card" aria-expanded="false"
+                 aria-label="Toggle information sidebar">
+                <h3 class="card-title">
+                    {% trans "Informations" %}
+                    <span class="d-lg-none">
+                        <span class="badge text-small bg-danger">
+                            <i class="fa fa-warning"></i>
+                            {{ user.registration.important_informations|length }}
+                        </span>
+                        <span class="navbar-toggler-icon"></span>
+                    </span>
+                </h3>
+            </div>
+            <div class="d-none d-lg-block">
                 <h3 class="card-title">{% trans "Informations" %}</h3>
             </div>
+        </div>
+
+        <div id="sidebar-card" class="collapse d-lg-block">
             <div class="card-body">
                 {% for information in user.registration.important_informations %}
                     <div class="card my-2">
@@ -18,4 +36,5 @@
                 {% endfor %}
             </div>
         </div>
+    </div>
 {% endif %}