<div class="hamburger" onclick="toggleMenu()">
    <div class="bar bar1"></div>
    <div class="bar bar2"></div>
    <div class="bar bar3"></div>
</div>

<div id="menu" class="menu">
    <ul>
        <li>
            <a href={{path("app_home")}}#acceuil>
               Accueil
            </a>
        </li>
 
           <li>
            <a href={{path("app_home")}}#partenaires>
                Partenaires
            </a>
        </li>
        <li>
            <a href={{path("app_home")}}#solutions>
                Solutions
            </a>
        </li>
        <li>
            <a href={{path("app_home")}}#expertise>
                Expertise
            </a>
        </li>
        
        <li>
            <a href={{path("app_home")}}#qui>
                Qui Sommes-Nous
            </a>
        </li>
        <li>
            <a href={{path("app_home")}}#documents>
                Documentation
            </a>
        </li>
        <li>
            <a href={{path("app_home")}}#contact>
                Contact
            </a>
        </li>
        
    </ul>
</div>

<script>
    function toggleMenu() {
        document.querySelector('.hamburger').classList.toggle('change');
        document.getElementById('menu').classList.toggle('show');
    }
  document.querySelectorAll('.menu a').forEach(link => {
    link.addEventListener('click', () => {
        // Retire la classe 'change' du hamburger
        document.querySelector('.hamburger').classList.remove('change');
        // Retire la classe 'show' du menu
        document.getElementById('menu').classList.remove('show');
    });
});
</script>