I have a dynamically built navigation bar as the below code shows:(and it works just fine)

NavBuilder = () => {
    //to loop from section 1 to 4 and add sections to navigation 
    for (s = 0; s < sections.length; s++) {
        const liElem = document.createElement('li');
        //const divElem = document.createElement("div");
        const Id = sections[s].id;
        const DataNav = sections[s].dataset.nav;
        liElem.innerHTML = `<a class="menu__link" href="#${Id}">${DataNav}</a>`;
        Menu.appendChild(liElem);
    }
}
NavBuilder();

my navigation bar should be compatible for small devices .. so in order to achieve this i need to make a hamburger menu to put the liElem inside that hamburger menu. any idea of how can i do it?

the html code is:

<header class="page__header">
  <nav class="navbar__menu">
    <!-- Navigation starts as empty UL that will be populated with JS ->
    <ul id="navbar__list"></ul>
  </nav>
</header>
  <main>
    <header class="main__hero">
      <h1>Landing Page </h1>
    </header>
<section id="section1" data-nav="Section 1">
      <div class="landing__container">
        <h2>Section 1</h2>
        <p> porttitor. Suspendisse imperdiet porttitor tortor, eget elementum tortor mollis non.</p>
      </div>
    </section>
    <section id="section2" data-nav="Section 2">
      <div class="landing__container">
        <h2>Section 2</h2>
        <p> porttitor. Suspendisse imperdiet porttitor tortor, eget elementum tortor mollis non.</p>
      </div>
    </section>