// Fetch all the details element.
const details = document.querySelectorAll('details');

// Add the onclick listeners.
details.forEach((targetDetail) => {
  targetDetail.addEventListener('click', () => {
    // Close all the details that are not targetDetail.
    details.forEach((detail) => {
      if (detail !== targetDetail) {
        detail.removeAttribute('open');
      };

      // change menu items and menu collapse icons
      const icon = document.querySelector('.arrow i');

      if (icon.classList.contains('fa-chevron-down')) {
        icon.classList.remove('fa-chevron-down');
        icon.classList.add('fa-chevron-up');
      } else {
        icon.classList.remove('fa-chevron-up');
        icon.classList.add('fa-chevron-down');
      }
    });
  });
});

details > summary {
  cursor: pointer;
  list-style: none;
 }

details > summary::-webkit-details-marker {
  display: none;
}

details {
  transition: all 0.2s ease-in-out;
}

details[open] {
  display: block;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" rel="stylesheet"/>

<aside class="sidebar">
  <details>
    <summary>
      <i class="fas fa-users"></i>

      <span class="text hidden">Users</span>

      <span class="arrow">
        <i class="fas fa-chevron-down"></i>
      </span>
    </summary>

    <div>
      <a href="/dashboard/users/{{user._id}}">My profile</a>
    </div>
    <div>
      <a href="/dashboard/users/edit/{{user._id}}">Edit Profile</a>
    </div>
  </details>

  <details>
    <summary>
      <i class="fas fa-life-ring"></i>

      <span class="text hidden">Support</span>

      <span class="arrow">
        <i class="fas fa-chevron-down"></i>
      </span>
    </summary>

    <div>
      <a href="#">Tickets</a>
    </div>
  </details>
</aside>