Reports

CSS will not apply a transition effect to the mobile navbar element when you use display: none; in the .closed style rule. Remove or comment out this rule setting.

In addition, remove right: -200; from your sample and add the following:

.navbaritensmobile {
    left: 100%;
    transform: translateX(0);
    transition: transform 0.5s ease-in-out;
 }

This places the left edge of the mobile navbar element off-screen at the right side.

When you display the mobile navbar element, use a transform that transitions the mobile navbar element to the left by the width of the navbar (200px in your sample).

.navbaritensmobile.open {
    transform: translateX(-200px);
}

Here's a working sample with minimal changes to your sample code. It includes the modifications listed above.

function injectNavbar() {
    const navbarHTML = `
    <nav class="navigationbar">
      <div class="navbarcontainer">
        <div class="navbaritens navbaritens1">
          <a href="/" class="navbarlogo"><img src="images/RMLevel.png" alt="Navigation Bar Logo"></a>
        </div>
        <button class="navbaritens navbaritens2 navbarmenuhamburger" onclick="toggleMobileMenu()">
          <span class="lines line1"></span>
          <span class="lines line2"></span>
          <span class="lines line3"></span>
        </button>
        <div class="navbaritens navbaritens3">
          <a href="/" class="navbaritem">Início</a>
          <a href="/comprar.html" class="navbaritem">Comprar</a>
          <a href="/empresas.html" class="navbaritem">Empresas</a>
          <a href="/eventos.html" class="navbaritem">Eventos</a>
          <a href="/manutencao.html" class="navbaritem">Manutenção</a>
          <a href="/contato.html" class="navbaritem">Contato</a>
        </div>
      </div>
    </nav>

    <div class="navbaritensmobile closed">
      <a href="/" class="navbaritem mobile-item">Início</a>
      <a href="/comprar.html" class="navbaritem mobile-item">Comprar</a>
      <a href="/empresas.html" class="navbaritem mobile-item">Empresas</a>
      <a href="/eventos.html" class="navbaritem mobile-item">Eventos</a>
      <a href="/manutencao.html" class="navbaritem mobile-item">Manutenção</a>
      <a href="/contato.html" class="navbaritem mobile-item">Contato</a>
    </div>
  `;

    document.querySelectorAll('.navbarplaceholder').forEach(placeholder => {
        placeholder.insertAdjacentHTML('beforeend', navbarHTML);
    });
}

document.addEventListener('DOMContentLoaded', injectNavbar());

function toggleMobileMenu() {
    const navbarItensMobile = document.querySelector(".navbaritensmobile");
    const hamburgerButton = document.querySelector(".navbarmenuhamburger");

    if (navbarItensMobile.classList.contains("closed")) { //Abre o menu
        navbarItensMobile.classList.add('open');
        navbarItensMobile.classList.remove('closed');
        hamburgerButton.classList.add('xshape'); // Add 'open' to the button
        hamburgerButton.classList.remove('regularshape'); // Ensure 'closed' is removed from button
    }
    else if (navbarItensMobile.classList.contains("open")) {  //Fecha o menu
        navbarItensMobile.classList.add('closed');
        navbarItensMobile.classList.remove('open');
        hamburgerButton.classList.add('normalshape'); // Add 'open' to the button
        hamburgerButton.classList.remove('xshape'); // Ensure 'closed' is removed from button
    }
    else { //Caso o menu não tenha sido aberto ou fechado, adiciona a classe closed
        navbarItensMobile.classList.add('closed');
        navbarItensMobile.classList.remove('open');
        console.error("Elemento '.navbaritensmobile' não encontrado!");
    }

    hamburgerButton.classList.toggle("change");
}

.navbaritensmobile {
    position: fixed;
    top: 64px;
    height: calc(100% - 64px);
    border-radius: 5% 0 0 5%;
    width: 200px;
    left: 100%;
    display: grid;
    grid-template-rows: auto;
    background-color: #242738;
    padding: 20px 0;
    padding-top: 64px;
    box-shadow: -5px 0px 5px rgba(0, 0, 0, 0.2);
    z-index: 8888;
    transform: translateX(0);
    transition: transform 0.5s ease-in-out;
}

    .navbaritensmobile.open {
        opacity: 1;
        transform: translateX(-200px);
    }

@media (max-width: 960px) {
    .navbarmenuhamburger {
        display: block;
        /* Show on smaller screens */
    }

    .closed {
        /*display: none;*/
        /* Hide the menu items on smaller screens */
    }

    .open {
        display: grid;
        /* Show the menu items on smaller screens */
    }

    .navbaritens2.open {
        display: flex;
        /* Show the menu when the 'open' class is applied */
    }

    .navbaritens3 {
        display: none;
        /* Hide the original menu items on smaller screens */
    }
}

/* https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_menu_icon_js */
.navbarmenuhamburger {
    display: inline-block;
    cursor: pointer;
}

.line1, .line2, .line3 {
    display: block;
    width: 35px;
    height: 5px;
    background-color: #333;
    margin: 6px 0;
    transition: 0.4s;
}

.change .line1 {
    transform: translate(0, 11px) rotate(-45deg);
}

.change .line2 {
    opacity: 0;
}

.change .line3 {
    transform: translate(0, -11px) rotate(45deg);
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Home</title>
</head>
<body>
    <header class="navbarplaceholder"></header>
    <div class="container">
        <main role="main" class="pb-3">
            <h1>Home</h1>
        </main>
    </div>
</body>
</html>

79615620