From ca9652cc607e2703f5b21e0f0b8ab8df43e07172 Mon Sep 17 00:00:00 2001
From: Emmy D'Anello <emmy.danello@animath.fr>
Date: Sun, 11 Feb 2024 20:59:34 +0100
Subject: [PATCH] Collapse sidebar on small screens

Signed-off-by: Emmy D'Anello <emmy.danello@animath.fr>
---
 tfjm/templates/sidebar.html | 41 +++++++++++++++++++++++++++----------
 1 file changed, 30 insertions(+), 11 deletions(-)

diff --git a/tfjm/templates/sidebar.html b/tfjm/templates/sidebar.html
index 7811b99..c58ab7d 100644
--- a/tfjm/templates/sidebar.html
+++ b/tfjm/templates/sidebar.html
@@ -3,19 +3,38 @@
 {% if user.is_authenticated %}
     <div class="card">
         <div class="card-header bg-dark-subtle">
-            <h3 class="card-title">{% trans "Informations" %}</h3>
+            <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 class="card-body">
-            {% for information in user.registration.important_informations %}
-                <div class="card my-2">
-                    <div class="card-header bg-dark-subtle">
-                        <h5 class="card-title">{{ information.title }}</h5>
+
+        <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">
+                        <div class="card-header bg-dark-subtle">
+                            <h5 class="card-title">{{ information.title }}</h5>
+                        </div>
+                        <div class="card-body bg-{{ information.type }}-subtle">
+                            {{ information.content|safe }}
+                        </div>
                     </div>
-                <div class="card-body bg-{{ information.type }}-subtle">
-                    {{ information.content|safe }}
-                </div>
-                </div>
-            {% endfor %}
+                {% endfor %}
+            </div>
         </div>
     </div>
 {% endif %}
\ No newline at end of file