How to read html classname from a nodejs file that is in a different folder than the scripts.js file?

I have a front-end folder with a src folder, HTML, Css an Script.js file along with my nodejs files. In my src folder I have a folder called components and in there there is a component header for my navbar like this:

const Header = {
   render: () => {
     const { firstname, isAdmin} = getCustomerInfo();
     return ` 
     <div class="container">
     <nav>
       <div class="Rlogo"><h4>At Home</h4></div>
       
       <ul class="nav-links">
         <li><a href="/#home">Home</a></li>
         <li><a href="/#about">About Us</a></li>
         <li><a href="/#menu">Menu</a></li>
         <li><a href="/#resturant">Resturant</a></li>
         ${ 
          firstname
          ? `<li><a href="/#/profile">${firstname}</a></li>`
          : `<li><a href="/#/signin">Sign-In</a></li>`
          }
         <li><a href="/#/cart">Cart</a></li>
        ${isAdmin?`<li><a href="/#/dashboard"> Dashboard</a></li>`: ''}
       </ul>
       <div class="burger">
         <div class="line1"></div>
         <div class="line2"></div>
         <div class="line3"></div>
       </div>
     </nav>
     </div>
     `;
   },
   after_render: () => {},
 };

export default Header;

I have a function navslide in my script.js file like this:

const navSlide = () =>{
  const burger = document.querySelector('.burger');
  const nav = document.querySelector('.nav-links');
  const navLinks = document.querySelectorAll('.nav-links li');
    // toggle Nav
    burger.addEventListener('click', () =>{
      nav.classList.toggle('nav-active');
      // Animate links
      navLinks.forEach((link, index) => {
        if(link.style.animation ){
          link.style.animation = ''
        }else{
          link.style.animation = `navLinkFade 0.5 ease forwards ${index/7 + 2.0}s`
      }
      });
      // burger animation
      burger.classList.toggle('toggle');
    })
 }
 navSlide();

I have linked my script like this at right before the end of the closing body tag like this but in my console I´m getting the error: Cannot read properties of null (reading 'addEventListener'):

 <script src="./scripts.js"></script>
    <script src="main.js"></script>
  </body>
</html>

I´m aware that the script isn't able to find the .navlinks, .burger classes as they´re not in the HTML file but in the component folder in the header.js file my question is how can I make the script read the class so its not returned as null cause I want to have a menu for the responsive design. Thank you for any guidance and help