Update api/templates/base.html

api/templates/base.html

@@ -4,19 +4,19 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>{% block title %}Plateforme Éducative{% endblock %}</title>
-    
+
     <!-- Bootstrap CSS from CDN -->
     <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
-    
+
     <!-- Font Awesome for icons -->
     <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
-    
+
     <!-- Google Fonts -->
     <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
-    
+
     <!-- Custom CSS -->
     <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
-    
+
     <!-- Additional CSS specific to templates -->
     {% block styles %}{% endblock %}
 </head>
@@ -24,16 +24,21 @@
     <!-- Header -->
     <header class="main-header">
         <div class="container header-container">
+            <!-- Burger Menu Button -->
+            <button id="burger-menu" class="burger-menu-button" title="Ouvrir le menu">
+                <i class="fas fa-bars"></i>
+            </button>
+
             <h1 class="site-title">
                 <a href="{{ url_for('main_bp.index') }}">Méthodologies</a>
             </h1>
-            
+
             <div class="header-actions">
                 <!-- Theme toggle button -->
                 <button id="theme-toggle" class="theme-toggle" title="Changer de thème">
                     <i class="fas fa-moon"></i>
                 </button>
-                
+
                 <!-- Admin link if admin is logged in -->
                 {% if session.get('admin_logged_in') %}
                 <a href="{{ url_for('admin_bp.dashboard') }}" class="btn btn-primary btn-sm ms-2">
@@ -43,9 +48,50 @@
             </div>
         </div>
     </header>
-    
+
+    <!-- Sidebar Overlay -->
+    <div id="sidebar-overlay" class="sidebar-overlay"></div>
+
+    <!-- Sidebar 1: Matières -->
+    <nav id="sidebar-matieres" class="sidebar">
+        <div class="sidebar-header">
+            <h4>Matières</h4>
+            <button class="close-sidebar-btn" data-sidebar-id="sidebar-matieres" title="Fermer le menu">×</button>
+        </div>
+        <ul id="matieres-list-sidebar" class="sidebar-list">
+            {# Assure-toi de passer la variable 'matieres' depuis ta route Flask #}
+            {# Example: return render_template('index.html', matieres=get_all_matieres()) #}
+            {% if matieres %}
+                {% for matiere in matieres %}
+                    {# Utilise |e pour échapper les caractères spéciaux dans le nom pour l'attribut data #}
+                    <li data-matiere-id="{{ matiere.id }}" data-matiere-nom="{{ matiere.nom | e }}">
+                        {{ matiere.nom }}
+                        <i class="fas fa-chevron-right float-end"></i>
+                    </li>
+                {% endfor %}
+            {% else %}
+                <li>Aucune matière disponible.</li>
+            {% endif %}
+        </ul>
+    </nav>
+
+    <!-- Sidebar 2: Sous-catégories -->
+    <nav id="sidebar-sous-categories" class="sidebar">
+        <div class="sidebar-header">
+            <button id="sidebar-back-button" class="sidebar-back-button" title="Retour aux matières">
+                <i class="fas fa-arrow-left"></i>
+            </button>
+            <h4 id="sidebar-sous-categories-title">Sous-catégories</h4>
+            <button class="close-sidebar-btn" data-sidebar-id="sidebar-sous-categories" title="Fermer le menu">×</button>
+        </div>
+        <ul id="sous-categories-list-sidebar" class="sidebar-list">
+            <!-- Les sous-catégories seront chargées ici par JavaScript -->
+            <li>Chargement...</li>
+        </ul>
+    </nav>
+
     <!-- Flash messages -->
-    <div class="container mt-3">
+    <div class="container mt-3 flash-container">
         {% with messages = get_flashed_messages(with_categories=true) %}
             {% if messages %}
                 {% for category, message in messages %}
@@ -57,46 +103,47 @@
             {% endif %}
         {% endwith %}
     </div>
-    
+
     <!-- Main content -->
     <main class="main-content">
         <div class="container">
             {% block content %}{% endblock %}
         </div>
     </main>
-    
+
     <!-- Footer -->
     <footer class="main-footer">
         <div class="container footer-content">
             <div>
-                <p>&copy; {{ year|default(2023) }} Méthodologies - Tous droits réservés</p>
+                {# Tu peux injecter l'année actuelle depuis Flask #}
+                <p>© {{ year if year else '2024' }} Méthodologies - Tous droits réservés</p>
                 <ul class="footer-links">
                     <li><a href="#">À propos</a></li>
                     <li><a href="#">Contact</a></li>
                     <li><a href="#">Mentions légales</a></li>
                 </ul>
             </div>
-            
+
             <!-- Feedback form -->
             <div class="feedback-form">
                 <h4 class="feedback-title">Votre avis nous intéresse</h4>
                 <form id="feedback-form" action="{{ url_for('main_bp.submit_feedback') }}" method="POST">
                     <div class="form-group mb-2">
-                        <textarea id="feedback-message" name="message" class="form-control" rows="2" placeholder="Laissez-nous un message..."></textarea>
+                        <textarea id="feedback-message" name="message" class="form-control" rows="2" placeholder="Laissez-nous un message..." required></textarea>
                     </div>
                     <button type="submit" class="btn btn-primary">Envoyer</button>
                 </form>
             </div>
         </div>
     </footer>
-    
+
     <!-- Bootstrap JS Bundle with Popper -->
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
-    
+
     <!-- Main JavaScript -->
     <script src="{{ url_for('static', filename='js/main.js') }}"></script>
-    
+
     <!-- Additional JavaScript -->
     {% block scripts %}{% endblock %}
 </body>
-</html>
+</html>