Order a new service + store links don't get the active class in the menu

[Negin]

I have the following in my menu. When I click on the store links, I want the 'a' tags of this item to get the active class, and when I click on the order a new service, I want the 'a' tags of this item to get the active class. This active class is for styling purposes.  But in action, none of them get the class, and the style doesn't change for the active one. How can I fix this bug? Anyone here has the same experience?

 

{if $loggedin}
    <li data-username="Services" class="nav-item hasmenu">

        <a class="">
            <span class="icony">
                <img class="{if !$loggedin}d-none {/if}svg normal-icon menu-icon"
                    src="{$WEB_ROOT}/templates/{$template}/assets/fonts/icohorn/user.svg" alt="">
                <img class="{if !$loggedin}d-none {/if}svg active-icon menu-icon"
                    src="{$WEB_ROOT}/templates/{$template}/assets/fonts/icohorn/user-active.svg" alt="">
            </span>
            <span class="sideinfo ">{$LANG.navservices}</span>
        </a>
        <ul class="submenu">
            <li><a href="{$WEB_ROOT}/clientarea.php?action=services">{$LANG.clientareanavservices}</a></li>
            <li><a href="{$WEB_ROOT}/cart.php" class="">{$LANG.navservicesorder}</a>
            </li>
        </ul>
    </li>
{/if}


<li data-username="store" class="{if !$loggedin}pt-3 guest {/if}nav-item hasmenu">
    <a class="">
        <span class="icony">
            <img class="{if !$loggedin}d-none {/if}svg normal-icon menu-icon"
                src="{$WEB_ROOT}/templates/{$template}/assets/fonts/icohorn/shop.svg" alt="">
            <img class="{if !$loggedin}d-none {/if}svg active-icon menu-icon"
                src="{$WEB_ROOT}/templates/{$template}/assets/fonts/icohorn/shop-active.svg" alt="">
        </span>
        <span class="sideinfo">{$LANG.navStore}</span>
    </a>
    <ul class="submenu">
        <li><a href="{$WEB_ROOT}/cart.php">{$LANG.navBrowseProductsServices}</a></li>
        {foreach from=$productgroups item=productgroup}
            <li><a href="{$WEB_ROOT}/cart.php?gid={$productgroup.gid}" class="">{$productgroup.name}</a>
            </li>
        {/foreach}
    </ul>
</li>

 

[WHMCS Ricardo]

Hey negin!

I believe you could use something as the following?

{* SERVICES *}
<a class="{if $filename eq 'clientarea' && $smarty.get.action eq 'services'}active{/if}">

{* STORE (cart root + product groups) *}
<a class="{if $filename eq 'cart'}active{/if}">

You can narrow them depending on the active file.