MobileNav

app/scodoc/sco_formsemestre_status.py

@@ -484,7 +484,9 @@ def formsemestre_status_menubar(formsemestre: FormSemestre | None) -> str:
         "Liens": formsemestre_custommenu_html(formsemestre_id),
     }
 
-    return render_template("formsemestre/menu.j2", menu=menus)
+    return render_template(
+        "formsemestre/menu.j2", menu=menus, formsemestre=formsemestre
+    )
 
 
 # Element HTML decrivant un semestre (barre de menu et infos)

app/static/css/scodoc97.css

@@ -80,10 +80,13 @@
 .app-corner .scodoc-index,
 .app-corner .scodoc-index a {
     font-size: 14pt;
-    display: inline;
+    display: flex;
     color: rgb(4, 16, 159);
+    justify-content: center;
+    width: 100%;
 }
 
+
 .hamburger-menu {
     display: none;
     flex-direction: column;
@@ -157,8 +160,7 @@
 @media screen and (max-width: 768px),
 print {
 
-    #sidebar,
+    .toggle-sidebar {
-    div.toggle-sidebar {
         display: none;
     }
 
@@ -166,6 +168,37 @@ print {
         grid-column-start: 1;
         grid-column-end: 3;
     }
+
+    div#sidebar {
+        position: fixed;
+        width: 100vw;
+        height: 100vh;
+        background: whitesmoke;
+        z-index: 900;
+        display: flex !important;
+        flex-direction: column;
+        align-items: center;
+        gap: 4px;
+        text-align: center;
+        left: -100%;
+        transition: left 400ms ease;
+
+        padding-top: 15vh;
+    }
+
+    div#sidebar[aria-expanded="true"] {
+        left: 0;
+    }
+
+    [ordi="true"] {
+        display: none !important;
+    }
+}
+
+@media screen and (min-width: 769px) {
+    [mobile="true"] {
+        display: none !important;
+    }
 }
 
 /* Sidebar */
@@ -204,4 +237,35 @@ print {
     height: 100%;
     margin-left: 10px;
     margin-bottom: 10px;
+}
+
+/*Mobile Navbar*/
+
+#logo-scodoc {
+    --size: 48px;
+    width: var(--size);
+    height: var(--size);
+    margin: 4px;
+    cursor: pointer;
+}
+
+#mobileNav {
+    position: sticky;
+    top: 0;
+    z-index: 1000;
+    display: flex;
+    justify-content: space-evenly;
+    align-items: center;
+
+    /* From https://css.glass */
+    background: rgba(255, 255, 255, 0.2);
+    border-radius: 16px;
+    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
+    backdrop-filter: blur(5px);
+    -webkit-backdrop-filter: blur(5px);
+    border: 1px solid rgba(255, 255, 255, 0.3);
+}
+
+body {
+    position: relative;
 }

app/templates/formsemestre/menu.j2

@@ -201,13 +201,9 @@
         /* Menu toggle button styles for mobile */
         .sco-formsemestre-menu-toggle {
             display: block;
-            background-color: var(--sco-formsemestre-color-accent);
+            background-color: var(--sco-formsemestre-color-primary);
             padding: 10px;
             border-radius: 5px;
-            position: absolute;
-            top: 10px;
-            right: 10px;
-            z-index: 1000;
         }
 
         .sco-formsemestre-menu-toggle-icon {
@@ -225,7 +221,7 @@
             height: 100vh;
             background-color: var(--sco-formsemestre-color-primary);
             box-shadow: -2px 0 5px rgba(0, 0, 0, 0.2);
-            padding: 2rem 1rem;
+            padding: 4rem 1rem;
             transition: right 0.3s ease-in-out;
             z-index: 999;
             overflow-y: scroll;
@@ -371,6 +367,8 @@
         const navbarMenu = document.querySelector(".sco-formsemestre-menu-menu");
         const dropdownItems = document.querySelectorAll(".dropdown");
 
+        document.getElementById('mobileNav').append(document.getElementById('titre-court-sem'));
+        document.getElementById('mobileNav').append(navbarToggle);
         // Affichage du menu mobile au clic
         navbarToggle.addEventListener("click", () => {
 
@@ -453,7 +451,12 @@
 <div class="menu-wrapper">
     <nav class="sco-formsemestre-menu">
         <div class="sco-formsemestre-menu-container">
-            {# Icône menu hamburger #}
+            {# Titre semestre court sera déplacé dans #mobileNav #}
+            <h2 id="titre-court-sem">
+                <a class="stdlink" title="{{formsemestre.session_id()}}" href="{{url_for('notes.formsemestre_status',
+            scodoc_dept=g.scodoc_dept, formsemestre_id=formsemestre.id)}}">{{formsemestre.formation.acronyme}}</a>
+            </h2>
+            {# Icône menu hamburger sera déplacé dans #mobileNav #}
             <button class="sco-formsemestre-menu-toggle" aria-label="Toggle menu">
                 <span class="sco-formsemestre-menu-toggle-icon"></span>
             </button>

app/templates/sco_page.j2

@@ -23,16 +23,17 @@
 
 {% block content %}
 <!-- sco_page revamp -->
-<div class="overlay" id="overlay" onclick="closeMobileMenu()"></div>
+    <div id="mobileNav" mobile="true">
-    <div class="hamburger-menu" id="hamburgerMenu">
+        <!-- Logo ScoDoc -->
-        {% block hamburger_menu %}
+        <img src="{{url_for('static', filename='icons/logo.png')}}" alt="Logo ScoDoc" id="logo-scodoc">
-            {% include "hamburger_menu.j2" %}
+        {% block mobileSemestre %}
-        {% endblock %}
+        <!--  Titre Semestre -->
+        <!-- Icone Menu Semestre -->
+        {% endblock mobileSemestre %}
     </div>
     <div class="scodoc-container">
         <div class="app-corner">
-            <div class="hamburger">
+            <div class="hamburger" ordi="true">
-                <div class="hamburger-icon" onclick="toggleMobileMenu()">☰</div>
                 <div class="scodoc-index"><a class="sco-title" href="{{
                     url_for('scodoc.index', scodoc_dept=g.scodoc_dept) }}"
                     >ScoDoc</a>
@@ -81,6 +82,10 @@
         if (document.getElementById('sidebar')) {
             enableTooltips("sidebar");
         }
+
+        document.getElementById("logo-scodoc").addEventListener("click", function () {
+            toggleSidebarOffCanvas();
+        });
     };
     const SCO_URL = "{{ url_for('scolar.index_html', scodoc_dept=g.scodoc_dept) }}";
     function toggleSidebar() {
@@ -89,26 +94,6 @@
         document.getElementById('toggle-sidebar-img').classList.toggle('collapsed');
     }
 
-    function toggleMobileMenu() {
-        const menu = document.getElementById('hamburgerMenu');
-        const overlay = document.getElementById('overlay');
-        if (menu.style.display === 'none' || menu.style.display === '') {
-            menu.style.display = 'flex';
-            overlay.style.display = 'block';
-        } else {
-            menu.style.display = 'none';
-            overlay.style.display = 'none';
-        }
-    }
-
-    function closeMobileMenu() {
-        document.getElementById('hamburgerMenu').style.display = 'none';
-        document.getElementById('overlay').style.display = 'none';
-    }
-
-    // Ensure the hamburger menu and overlay are hidden initially
-    document.getElementById('hamburgerMenu').style.display = 'none';
-    document.getElementById('overlay').style.display = 'none';
 </script>
 
 {% endblock %}

app/templates/sidebar.j2

@@ -2,6 +2,10 @@
 {# -*- mode: jinja-html -*- #}
 <!-- sidebar -->
     {# sidebar_common #}
+    <h1 mobile="true">
+        <a href="{{url_for('scolar.index_html', scodoc_dept=g.scodoc_dept)}}">ScoDoc</a>
+    </h1>
+
     <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>
@@ -107,4 +111,19 @@
             <div style="color:gold; background-color:navy; margin-top: 8px;">DEBUG</div>
         {% endif %}
     </div>
-<!-- end of sidebar -->
+<!-- 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);
+    }
+
+</script>