My question is: how can I give mm-active class to the sidebar navigation on click event? (mm-active is class of jQuery metisMenu). The mm-active class must be at li tag, not on second level menu.
This is my sidebar navigation HTML structure which is inside of include folder.
<nav id="sidebarMenu" class="px-0 pe-0 pt-0 sidebar sidebar-sticky animate__fadeInUpBig animate__animated scroller">
<div class="position-sticky sidebar-scroll">
<h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-3 mb-1">
<span>Menu</span>
</h6>
<ul class="nav flex-column" id="metismenu">
<li class="nav-item mm-active">
<a class="nav-link" href="#" aria-expanded="true">
<span data-feather="home"></span>
<span class="category-name">Dashboard</span>
<span class="fa arrow"></span>
</a>
<ul class="nav nav-second-level" aria-expanded="true">
<li class="nav-item"><a class="nav-link" href="/home"><span data-feather="circle"></span> Analytics</a></li>
<li class="nav-item"><a class="nav-link" href="/dashboard-demographic"><span data-feather="circle"></span> Demographic</a></li>
<li class="nav-item"><a class="nav-link" href="/dashboard-project"><span data-feather="circle"></span> Project</a></li>
<li class="nav-item"><a class="nav-link" href="/dashboard-hospital"><span data-feather="circle"></span> Hospital</a></li>
<li class="nav-item"><a class="nav-link" href="/dashboard-hrm"><span data-feather="circle"></span> HRM Dashboard</a></li>
<li class="nav-item"><a class="nav-link" href="/dashboard-real-estate"><span data-feather="circle"></span> Real Estate</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="#" aria-expanded="true">
<span data-feather="settings"></span>
<span class="category-name">E-Commerce</span>
<span class="fa arrow"></span>
</a>
<ul class="nav nav-second-level mm-collapse" aria-expanded="true">
<li class="nav-item"><a class="nav-link" href="/ecommerce-dashboard"><span data-feather="circle"></span> Dashboard</a></li>
<li class="nav-item"><a class="nav-link" href="/ecommerce-products"><span data-feather="circle"></span> Products</a></li>
<li class="nav-item"><a class="nav-link" href="/ecommerce-product-detail"><span data-feather="circle"></span> Product Detail</a></li>
<li class="nav-item"><a class="nav-link" href="/ecommerce-add-product"><span data-feather="circle"></span> Add Product</a></li>
<li class="nav-item"><a class="nav-link" href="/ecommerce-orders"><span data-feather="circle"></span> Orders</a></li>
<li class="nav-item"><a class="nav-link" href="/ecommerce-cart"><span data-feather="circle"></span> Cart</a></li>
<li class="nav-item"><a class="nav-link" href="/ecommerce-checkout"><span data-feather="circle"></span> Checkout</a></li>
</ul>
</li>
</ul>
</div>
</nav>
If it is in blade you can mix in some php like this:
<nav id="sidebarMenu" class="px-0 pe-0 pt-0 sidebar sidebar-sticky animate__fadeInUpBig animate__animated scroller">
<div class="position-sticky sidebar-scroll">
<h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-3 mb-1">
<span>Menu</span>
</h6>
<ul class="nav flex-column" id="metismenu">
@php
$activeDashboard = [
'home',
'dashboard-demographic',
'dashboard-project',
'dashboard-hospital',
'dashboard-hrm',
'dashboard-real-estate',
];
$isDashboard = Request::is($activeDashboard);
@endphp
<li class="nav-item {{ $isDashboard ? 'mm-active' : null }}">
<a class="nav-link" href="#" aria-expanded="{{ $isDashboard ? true : false }}">
<span data-feather="home"></span>
<span class="category-name">Dashboard</span>
<span class="fa arrow"></span>
</a>
<ul class="nav nav-second-level" aria-expanded="{{ $isDashboard ? true : false }}">
<li class="nav-item"><a class="nav-link" href="/home"><span data-feather="circle"></span> Analytics</a></li>
<li class="nav-item"><a class="nav-link" href="/dashboard-demographic"><span data-feather="circle"></span> Demographic</a></li>
<li class="nav-item"><a class="nav-link" href="/dashboard-project"><span data-feather="circle"></span> Project</a></li>
<li class="nav-item"><a class="nav-link" href="/dashboard-hospital"><span data-feather="circle"></span> Hospital</a></li>
<li class="nav-item"><a class="nav-link" href="/dashboard-hrm"><span data-feather="circle"></span> HRM Dashboard</a></li>
<li class="nav-item"><a class="nav-link" href="/dashboard-real-estate"><span data-feather="circle"></span> Real Estate</a></li>
</ul>
</li>
@php
$activeEcommerce = [
'ecommerce-dashboard',
'ecommerce-products',
'ecommerce-product-detail',
'ecommerce-add-product',
'ecommerce-orders',
'ecommerce-cart',
'ecommerce-checkout',
];
$isEcommerce = Request::is($activeEcommerce);
@endphp
<li class="nav-item {{ $isEcommerce ? 'mm-active' : null }}">
<a class="nav-link" href="#" aria-expanded="{{ $isEcommerce ? true : false }}">
<span data-feather="settings"></span>
<span class="category-name">E-Commerce</span>
<span class="fa arrow"></span>
</a>
<ul class="nav nav-second-level mm-collapse" aria-expanded="{{ $isEcommerce ? true : false }}">
<li class="nav-item"><a class="nav-link" href="/ecommerce-dashboard"><span data-feather="circle"></span> Dashboard</a></li>
<li class="nav-item"><a class="nav-link" href="/ecommerce-products"><span data-feather="circle"></span> Products</a></li>
<li class="nav-item"><a class="nav-link" href="/ecommerce-product-detail"><span data-feather="circle"></span> Product Detail</a></li>
<li class="nav-item"><a class="nav-link" href="/ecommerce-add-product"><span data-feather="circle"></span> Add Product</a></li>
<li class="nav-item"><a class="nav-link" href="/ecommerce-orders"><span data-feather="circle"></span> Orders</a></li>
<li class="nav-item"><a class="nav-link" href="/ecommerce-cart"><span data-feather="circle"></span> Cart</a></li>
<li class="nav-item"><a class="nav-link" href="/ecommerce-checkout"><span data-feather="circle"></span> Checkout</a></li>
</ul>
</li>
</ul>
</div>
</nav>