From ae84ed26c3d0af94bed844e511dd993c86e8eedc Mon Sep 17 00:00:00 2001
From: Iziram <matthias.hartmann@iziram.fr>
Date: Tue, 13 Aug 2024 16:01:31 +0200
Subject: [PATCH] Rework : Menu formsemestre

---
 app/scodoc/sco_formsemestre_custommenu.py |   2 +-
 app/scodoc/sco_formsemestre_status.py     |  24 +-
 app/templates/formsemestre/menu.j2        | 469 ++++++++++++++++++++++
 3 files changed, 482 insertions(+), 13 deletions(-)
 create mode 100644 app/templates/formsemestre/menu.j2

diff --git a/app/scodoc/sco_formsemestre_custommenu.py b/app/scodoc/sco_formsemestre_custommenu.py
index 485fdcd14..3be638311 100644
--- a/app/scodoc/sco_formsemestre_custommenu.py
+++ b/app/scodoc/sco_formsemestre_custommenu.py
@@ -101,7 +101,7 @@ def formsemestre_custommenu_html(formsemestre_id):
             "args": {"formsemestre_id": formsemestre_id},
         }
     )
-    return htmlutils.make_menu("Liens", menu)
+    return menu
 
 
 def formsemestre_custommenu_edit(formsemestre_id):
diff --git a/app/scodoc/sco_formsemestre_status.py b/app/scodoc/sco_formsemestre_status.py
index db7143e13..e3c7fe037 100755
--- a/app/scodoc/sco_formsemestre_status.py
+++ b/app/scodoc/sco_formsemestre_status.py
@@ -473,18 +473,18 @@ def formsemestre_status_menubar(formsemestre: FormSemestre | None) -> str:
     ]
 
     menu_stats = _build_menu_stats(formsemestre)
-    H = [
-        '<ul id="sco_menu">',
-        htmlutils.make_menu("Semestre", menu_semestre),
-        htmlutils.make_menu("Inscriptions", menu_inscriptions),
-        htmlutils.make_menu("Groupes", menu_groupes),
-        htmlutils.make_menu("Notes", menu_notes),
-        htmlutils.make_menu("Jury", menu_jury),
-        htmlutils.make_menu("Statistiques", menu_stats),
-        formsemestre_custommenu_html(formsemestre_id),
-        "</ul>",
-    ]
-    return "\n".join(H)
+
+    menus = {
+        "Semestre": menu_semestre,
+        "Inscriptions": menu_inscriptions,
+        "Groupes": menu_groupes,
+        "Notes": menu_notes,
+        "Jury": menu_jury,
+        "Statistiques": menu_stats,
+        "Liens": formsemestre_custommenu_html(formsemestre_id),
+    }
+
+    return render_template("formsemestre/menu.j2", menu=menus)
 
 
 # Element HTML decrivant un semestre (barre de menu et infos)
diff --git a/app/templates/formsemestre/menu.j2 b/app/templates/formsemestre/menu.j2
new file mode 100644
index 000000000..53e38b9ae
--- /dev/null
+++ b/app/templates/formsemestre/menu.j2
@@ -0,0 +1,469 @@
+{# Styles du menu #}
+<style>
+    /**
+ * Menu Formsemestre
+ *
+ * @author Matthias HARTMANN (Iziram)
+ * @license MIT
+
+ * Approche Mobile-first
+ */
+
+    /* CSS défaut */
+    * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+
+        --sco-formsemestre-color-primary: rgb(214, 233, 248);
+        --sco-formsemestre-color-accent: rgb(103, 167, 227);
+    }
+
+    body {
+        font-family: Arial, sans-serif;
+        color: #333;
+        background-color: #f4f4f4;
+    }
+
+    html{
+        scroll-behavior: smooth;
+        overflow: hidden;
+    }
+
+    .no-scroll {
+        overflow: hidden !important;
+        margin: 0 !important;
+        height: 100vh !important;
+    }
+
+    /* CSS menu */
+    .sco-formsemestre-menu {
+        background-color: var(--sco-formsemestre-color-primary);
+        border-top: var(--sco-formsemestre-color-accent) solid 3px;
+        padding: 0 1rem;
+        border-radius: 4px;
+        margin: 0 4px;
+    }
+
+    .sco-formsemestre-menu-container {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        position: relative;
+    }
+
+    .sco-formsemestre-menu-toggle {
+        display: block;
+        background: none;
+        border: none;
+        cursor: pointer;
+        z-index: 1000;
+    }
+
+    .sco-formsemestre-menu-toggle-icon {
+        display: block;
+        width: 25px;
+        height: 3px;
+        background-color: #333;
+        position: relative;
+        transition: background-color 0.3s ease;
+        margin: 10px 5px;
+    }
+
+    .sco-formsemestre-menu-toggle-icon::before,
+    .sco-formsemestre-menu-toggle-icon::after {
+        content: '';
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        background-color: #333;
+        transition: all 0.3s ease;
+        left: 0;
+    }
+
+    .sco-formsemestre-menu-toggle-icon::before {
+        top: -8px;
+    }
+
+    .sco-formsemestre-menu-toggle-icon::after {
+        bottom: -8px;
+    }
+
+    .sco-formsemestre-menu-menu {
+        position: fixed;
+        top: 0;
+        right: -100%;
+        width: 100%;
+        height: 100vh;
+        background-color: #fff;
+        box-shadow: -2px 0 4px rgba(0, 0, 0, 0.1);
+        transition: right 0.3s ease;
+        z-index: 999;
+        overflow-y: auto;
+        padding-top: 5vh;
+        margin: 0;
+
+        transition: all 0.3s ease;
+    }
+
+    .sco-formsemestre-menu-menu.active {
+        right: 0;
+    }
+
+    .sco-formsemestre-menu-item {
+        list-style: none;
+        width: 100%;
+        user-select: none;
+        display: flex;
+        justify-content: center;
+        border: none;
+
+        text-transform: uppercase;
+        font-weight: bold;
+        font-size: 12px;
+
+        padding: 4px 8px;
+        border-radius: 4px;
+    }
+
+    .sco-formsemestre-menu-link {
+        color: #333;
+        text-decoration: none;
+        transition: color 0.3s ease;
+    }
+
+    .sco-formsemestre-menu-link:hover {
+        color: #007bff;
+    }
+
+    .sco-formsemestre-menu-link[disabled] {
+        pointer-events: none;
+        color: #b7b7b7;
+
+    }
+
+
+    /* Animation */
+    @keyframes fadeIn {
+        from {
+            opacity: 0;
+        }
+
+        to {
+            opacity: 1;
+        }
+    }
+
+    /* Styles spécifiques PC */
+    @media screen and (min-width: 768px) {
+        .sco-formsemestre-menu-toggle {
+            display: none;
+        }
+
+        .sco-formsemestre-menu-menu {
+            position: static;
+            display: flex;
+            width: auto;
+            height: auto;
+            background-color: transparent;
+            box-shadow: none;
+            overflow-y: visible;
+
+            flex-direction: row;
+            justify-content: center;
+            padding: 0;
+        }
+
+        .sco-formsemestre-menu-item {
+            width: auto;
+        }
+
+        .sco-formsemestre-menu-link {
+            text-wrap: nowrap;
+        }
+
+        .sco-formsemestre-menu .dropdown {
+            position: relative;
+        }
+
+        .sco-formsemestre-menu .dropdown[open] .dropdown-content {
+            position: absolute;
+            top: 100%;
+            left: 0;
+            z-index: 1;
+            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+        }
+
+        .sco-formsemestre-menu{
+            margin-top: 4px;
+        }
+    }
+
+    /* Styles spécifiques mobile */
+    @media screen and (max-width: 767px) {
+
+        /* Menu toggle button styles for mobile */
+        .sco-formsemestre-menu-toggle {
+            display: block;
+            background-color: var(--sco-formsemestre-color-accent);
+            padding: 10px;
+            border-radius: 5px;
+            position: absolute;
+            top: 10px;
+            right: 10px;
+            z-index: 1000;
+        }
+
+        .sco-formsemestre-menu-toggle-icon {
+            width: 30px;
+            height: 4px;
+            background-color: #fff;
+        }
+
+        /* Mobile menu styles */
+        .sco-formsemestre-menu-menu {
+            position: fixed;
+            top: 0;
+            right: -100%;
+            width: 100vw;
+            height: 100vh;
+            background-color: var(--sco-formsemestre-color-primary);
+            box-shadow: -2px 0 5px rgba(0, 0, 0, 0.2);
+            padding: 2rem 1rem;
+            transition: right 0.3s ease-in-out;
+            z-index: 999;
+            overflow-y: scroll;
+        }
+
+        .sco-formsemestre-menu-menu.active {
+            right: 0;
+        }
+
+        /* Menu item styles */
+        .sco-formsemestre-menu-item {
+            width: 100%;
+            padding: 10px;
+            margin-bottom: 5px;
+            border-bottom: 1px solid var(--sco-formsemestre-color-accent);
+            font-size: small;
+        }
+
+        .sco-formsemestre-menu-menu>.dropdown>.sco-formsemestre-menu-item {
+            font-size: 16px;
+        }
+
+        .sco-formsemestre-menu-link {
+            color: #333;
+            font-size: 16px;
+            text-decoration: none;
+            display: block;
+            width: 100%;
+            transition: color 0.3s ease;
+            font-size: small !important;
+            text-wrap: wrap;
+
+        }
+
+        .sco-formsemestre-menu-link:hover {
+            color: var(--sco-formsemestre-color-accent);
+        }
+
+        /* Dropdown styles */
+        .sco-formsemestre-menu .dropdown>summary {
+            padding: 10px;
+            border-bottom: 1px solid var(--sco-formsemestre-color-accent);
+            cursor: pointer;
+        }
+
+        .sco-formsemestre-menu .dropdown-content {
+            display: none;
+            padding-left: 10px;
+            background-color: var(--sco-formsemestre-color-primary);
+        }
+
+        .sco-formsemestre-menu .dropdown[open]>.dropdown-content {
+            display: block;
+        }
+
+        .sco-formsemestre-menu .dropdown-content>.sco-formsemestre-menu-item {
+            padding: 8px;
+            margin-bottom: 5px;
+        }
+
+        .sco-formsemestre-menu .dropdown>summary::after {
+            border-top: 4px solid #333;
+        }
+
+        /* Toggling the dropdown arrow */
+        .sco-formsemestre-menu .dropdown[open]>summary::after {
+            transform: rotate(180deg);
+        }
+
+        .sco-formsemestre-menu{
+            border: none;
+        }
+    }
+
+
+    .sco-formsemestre-menu-toggle.active .sco-formsemestre-menu-toggle-icon {
+        background-color: transparent;
+    }
+
+    .sco-formsemestre-menu-toggle.active .sco-formsemestre-menu-toggle-icon::before {
+        transform: translateY(8px) rotate(45deg);
+    }
+
+    .sco-formsemestre-menu-toggle.active .sco-formsemestre-menu-toggle-icon::after {
+        transform: translateY(-8px) rotate(-45deg);
+    }
+
+    /*<== DROPDOWNS ==>*/
+    .sco-formsemestre-menu .dropdown>summary {
+        list-style: none;
+        padding: 0.25rem 0.5rem;
+        border-radius: 4px;
+    }
+
+    .sco-formsemestre-menu .dropdown>summary::marker {
+        display: none;
+    }
+
+    .sco-formsemestre-menu .dropdown>summary::after {
+        content: "";
+        display: inline-block;
+        width: 0;
+        height: 0;
+        margin-left: 4px;
+        vertical-align: middle;
+        border-top: 4px dashed;
+        border-right: 4px solid transparent;
+        border-left: 4px solid transparent;
+    }
+
+    .sco-formsemestre-menu .dropdown>summary:hover {
+        background-color: #92cbf6;
+        cursor: pointer;
+    }
+
+    .sco-formsemestre-menu .dropdown-content {
+        background-color: #fff;
+        padding: 10px;
+        border: 1px solid #ccc;
+        border-top: none;
+    }
+
+    .sco-formsemestre-menu .dropdown-content .sco-formsemestre-menu-item {
+        padding: 0.25rem 0.5rem;
+        list-style: none;
+        width: 100%;
+        display: block;
+        text-align: left;
+        transition: all 0.3s ease;
+        border-radius: 5px;
+    }
+
+    .sco-formsemestre-menu .dropdown-content .sco-formsemestre-menu-item:hover {
+        background-color: #f0f0f0;
+    }
+
+</style>
+{# Scripts #}
+<script>
+    document.addEventListener("DOMContentLoaded", () => {
+        const navbarToggle = document.querySelector(".sco-formsemestre-menu-toggle");
+        const navbarMenu = document.querySelector(".sco-formsemestre-menu-menu");
+        const dropdownItems = document.querySelectorAll(".dropdown");
+
+        // Affichage du menu mobile au clic
+        navbarToggle.addEventListener("click", () => {
+
+            document.body.classList.toggle("no-scroll");
+
+            navbarMenu.classList.toggle("active");
+            navbarToggle.classList.toggle("active");
+
+            // Animation de l'icône
+            navbarToggle.setAttribute(
+                "aria-expanded",
+                navbarToggle.getAttribute("aria-expanded") === "false" ? "true" : "false"
+            );
+
+            // Fermeture des dropdowns
+            dropdownItems.forEach((item) => item.removeAttribute("open"));
+        });
+
+        // Fermeture du menu mobile au clic en dehors du menu
+        document.addEventListener("click", (e) => {
+            if (!navbarMenu.contains(e.target) && !navbarToggle.contains(e.target)) {
+                navbarMenu.classList.remove("active");
+                navbarToggle.classList.remove("active");
+                navbarToggle.setAttribute("aria-expanded", "false");
+            }
+        });
+
+        // Gestion du menu au redimensionnement de la fenêtre
+        window.addEventListener("resize", () => {
+            if (window.innerWidth >= 768) {
+                navbarMenu.classList.remove("active");
+                navbarToggle.classList.remove("active");
+                navbarToggle.setAttribute("aria-expanded", "false");
+                dropdownItems.forEach((item) => item.classList.remove("active"));
+            }
+        });
+
+        // Gestion des dropdowns
+        dropdownItems.forEach((item) => {
+            item.addEventListener("mouseover", () => {
+                if (window.innerWidth >= 768) {
+                    item.setAttribute("open", "");
+                }
+            });
+
+            item.addEventListener("mouseout", () => {
+                if (window.innerWidth >= 768) {
+                    item.removeAttribute("open");
+                }
+            });
+        });
+    });
+
+</script>
+
+{# Macro génération dropdown #}
+{% macro dropdown(category, items) %}
+<details class="dropdown">
+    <summary class="sco-formsemestre-menu-item">{{category}}</summary>
+    <div class="dropdown-content">
+        {% for item in items %}
+            {% if item.submenu is defined %}
+                {{dropdown(item.title, item.submenu)}}
+            {% else %}
+            {% set args = item.args or dict() %}
+            <a href="{{url_for(item.endpoint, scodoc_dept=g.scodoc_dept,**args)}}"
+            {{'disabled aria-disabled="true"' if item.enabled is defined and not item.enabled}}
+            class="sco-formsemestre-menu-item sco-formsemestre-menu-link"
+            >
+                {{item.title}}
+            </a>
+            {% endif %}
+        {% endfor %}
+    </div>
+</details>
+{% endmacro %}
+
+{# Menu HTML #}
+<nav class="sco-formsemestre-menu">
+    <div class="sco-formsemestre-menu-container">
+        {# Icône menu hamburger #}
+        <button class="sco-formsemestre-menu-toggle" aria-label="Toggle menu">
+            <span class="sco-formsemestre-menu-toggle-icon"></span>
+        </button>
+
+        {# Menu #}
+        <ul class="sco-formsemestre-menu-menu">
+            {% for category, items in menu.items() %}
+                {{dropdown(category, items)}}
+            {% endfor %}
+        </ul>
+    </div>
+</nav>
\ No newline at end of file