As you can see in the GIF when I click the submenu it no longer collapses. What I want is when I click the submenu it will collapse and will not automatically close when I click the page
<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>
<p>Patients</p>
<i class="fas fa-angle-left right"></i>
</a>
<ul class="nav nav-treeview <?= $page == 'patients.php' || $page == 'medical_history.php' ? 'show':''?>">
<li class="nav-item">
<a href="patients.php" class="nav-link <?= $page == 'patients.php' ? 'active':''?>">
<i class="far fa-circle nav-icon"></i>
<p>Patient List</p>
</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>
<p>Medical History</p>
</a>
</li>
</ul>
</li>
Updated...
I've updated and provided the code you need... just copy and paste this code in the relevant section of your file. I'm sure this will work for you : )
<li class="nav-item <?= $page == 'patients.php' || $page == 'medical_history.php' ? 'menu-open' : '' ?>">
<a href="#" class="nav-link <?= $page == 'patients.php' || $page == 'medical_history.php' ? 'active' : '' ?>">
<i class="nav-icon fa fa-users-medical"></i>
<p>Patients</p>
<i class="fas fa-angle-left right"></i>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="patients.php" class="nav-link <?= $page == 'patients.php' ? 'active' : '' ?>">
<i class="far fa-circle nav-icon"></i>
<p>Patient List</p>
</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>
<p>Medical History</p>
</a>
</li>
</ul>
</li>