<!-- Preloader Start -->
<div id="preloader">
    <div class="preload-content">
        <div id="world-load"></div>
    </div>
</div>
<!-- Preloader End -->


<header class="header">
    <nav class="nav-container" data-menu>
        <a href="index.php?code=home" class="logo"><img src="../1413914/logo/logo01.png" alt="Logo" width="150px"></a>

        <button
            class="menu-toggle"
            type="button"
            data-menu-toggle
            aria-label="Ouvrir le menu"
            aria-expanded="false"
        >
            <span></span>
            <span></span>
            <span></span>
        </button>

        <ul class="nav-menu" data-menu-panel>
            <li class="nav-item">
                <a href="index.php?code=home" class="nav-link">Accueil</a>
            </li>

            <li class="nav-item has-dropdown" data-dropdown>
                <a
                    href="#"
                    class="nav-link"
                    data-dropdown-trigger
                    aria-expanded="false"
                >
                    Qui sommes-nous
                    <span class="arrow">▼</span>
                </a>
                <ul class="dropdown">
                    <li><a href="#">Présentation</a></li>
                    <li><a href="#">Historique</a></li>
                    <li><a href="#">Missions</a></li>
                    <li><a href="#">Organigramme</a></li>
                </ul>
            </li>

            <li class="nav-item has-dropdown" data-dropdown>
                <a
                    href="#"
                    class="nav-link"
                    data-dropdown-trigger
                    aria-expanded="false"
                >
                    Ressources & Publications
                    <span class="arrow">▼</span>
                </a>
                <ul class="dropdown">
                    <li><a href="#">Communiqués</a></li>
                    <li><a href="#">Evenements</a></li>
                    <li><a href="#">Cadre Juridique</a></li>
                    <li><a href="#">Documentation diverse</a></li>
                </ul>
            </li>

            <li class="nav-item has-dropdown" data-dropdown>
                <a
                    href="#"
                    class="nav-link"
                    data-dropdown-trigger
                    aria-expanded="false"
                >
                    Médias
                    <span class="arrow">▼</span>
                </a>
                <ul class="dropdown">
                    <li><a href="#">Galerie Photo</a></li>
                    <li><a href="#">Vidéothèque</a></li>
                </ul>
            </li>


            <li class="nav-item has-dropdown" data-dropdown>
                <a
                    href="#"
                    class="nav-link"
                    data-dropdown-trigger
                    aria-expanded="false"
                >
                    E-service
                    <span class="arrow">▼</span>
                </a>
                <ul class="dropdown">
                    <li><a href="#">Renseignements</a></li>
                    <li><a href="#">Dénonciations & Plaintes</a></li>
                    <li><a href="#">Produits dangéreux</a></li>
                </ul>
            </li>

            <li class="nav-item">
                <a href="#" class="nav-link btn-contact">Contact</a>
            </li>
        </ul>
    </nav>
</header>

<script>
    (function () {
        "use strict";

        function initMenu(menuRoot) {
            if (!menuRoot) return;

            var menuToggle = menuRoot.querySelector("[data-menu-toggle]");
            var menuPanel = menuRoot.querySelector("[data-menu-panel]");
            var dropdownItems = menuRoot.querySelectorAll("[data-dropdown]");
            var mobileBreakpoint = 992;

            if (!menuToggle || !menuPanel) return;

            function isMobile() {
                return window.innerWidth <= mobileBreakpoint;
            }

            function closeAllDropdowns(exceptItem) {
                var i;
                for (i = 0; i < dropdownItems.length; i++) {
                    if (dropdownItems[i] !== exceptItem) {
                        dropdownItems[i].classList.remove("is-open");

                        var trigger = dropdownItems[i].querySelector("[data-dropdown-trigger]");
                        if (trigger) {
                            trigger.setAttribute("aria-expanded", "false");
                        }
                    }
                }
            }

            function closeMenu() {
                menuPanel.classList.remove("is-open");
                menuToggle.classList.remove("is-active");
                menuToggle.setAttribute("aria-expanded", "false");
                closeAllDropdowns();
            }

            function openMenu() {
                menuPanel.classList.add("is-open");
                menuToggle.classList.add("is-active");
                menuToggle.setAttribute("aria-expanded", "true");
            }

            function toggleMenu() {
                if (menuPanel.classList.contains("is-open")) {
                    closeMenu();
                } else {
                    openMenu();
                }
            }

            menuToggle.addEventListener("click", function () {
                toggleMenu();
            });

            var i;
            for (i = 0; i < dropdownItems.length; i++) {
                (function (item) {
                    var trigger = item.querySelector("[data-dropdown-trigger]");
                    if (!trigger) return;

                    trigger.addEventListener("click", function (e) {
                        if (!isMobile()) return;

                        e.preventDefault();

                        var isOpen = item.classList.contains("is-open");
                        closeAllDropdowns(item);

                        if (isOpen) {
                            item.classList.remove("is-open");
                            trigger.setAttribute("aria-expanded", "false");
                        } else {
                            item.classList.add("is-open");
                            trigger.setAttribute("aria-expanded", "true");
                        }
                    });
                })(dropdownItems[i]);
            }

            menuRoot.addEventListener("click", function (e) {
                var link = e.target.closest("a");
                if (!link) return;
                if (!isMobile()) return;
                if (link.hasAttribute("data-dropdown-trigger")) return;

                closeMenu();
            });

            document.addEventListener("click", function (e) {
                if (!menuRoot.contains(e.target) && isMobile()) {
                    closeMenu();
                }
            });

            window.addEventListener("resize", function () {
                if (!isMobile()) {
                    menuPanel.classList.remove("is-open");
                    menuToggle.classList.remove("is-active");
                    menuToggle.setAttribute("aria-expanded", "false");
                    closeAllDropdowns();
                }
            });

            document.addEventListener("keydown", function (e) {
                if (e.key === "Escape") {
                    closeMenu();
                }
            });
        }

        function bootMenus() {
            var menus = document.querySelectorAll("[data-menu]");
            var i;
            for (i = 0; i < menus.length; i++) {
                initMenu(menus[i]);
            }
        }

        if (document.readyState === "loading") {
            document.addEventListener("DOMContentLoaded", bootMenus);
        } else {
            bootMenus();
        }
    })();
</script>


