¿Cómo colapsar el árbol de navegación cuando hago clic en el submenú en AdminLTE 3.0?

Aquí está el código HTML modificado con el código JavaScript agregado:

<li class="nav-item">
  <a href="#" class="nav-link <?= $page == 'patients.php' || $page == 'medical_history.php' ? 'active':'';?>">
    <i class="nav-icon fa fa-users-medical"></i>
    Pacientes
    <i class="fas fa-angle-left right"></i>
  </a>
  <ul class="nav nav-treeview <?= $page == 'patients.php' || $page == 'medical_history.php' ? 'show':'';?>" style="display: none;">
    <li class="nav-item">
      <a href="patients.php" class="nav-link <?= $page == 'patients.php' ? 'active':'';?>">
        <i class="far fa-circle nav-icon"></i>
        Lista de Pacientes
      </a>
    </li>
    <li class="nav-item">
      <a href="medical_history.php" class="nav-link <?= $page == 'medical_history.php' ? 'active':'';?>">
        <i class="far fa-circle nav-icon"></i>
        Historial Médico
      </a>
    </li>
  </ul>
</li>

<script>
  $(document).ready(function() {
    // toggle submenu when clicked
    $('.nav-item > .nav-link').click(function() {
      var submenu = $(this).next('.nav-treeview');
      submenu.toggleClass('show');
    });

    // prevent submenu from closing when clicked
    $('.nav-treeview').click(function(event) {
      event.stopPropagation();
    });

    // hide all submenus when page is clicked
    $(document).click(function() {
      $('.nav-treeview').removeClass('show');
    });
  });
</script>

También agregamos otro escucha de eventos clic al submenú en sí, lo que evita que se cierre al hacer clic en él. Esto es necesario porque de lo contrario, hacer clic en un enlace dentro del submenú lo cerraría antes de que se pudiera hacer clic en el enlace.

Finalmente, agregamos un escucha de eventos clic al objeto de documento en sí, que oculta todos los submenús cuando se hace clic en la página. Esto garantiza que todos los submenús abiertos se cierren cuando el usuario hace clic fuera de ellos.