aConnect-UX/src/app/shared/components/side-nav/side-nav.component.html

<div class="vertical-menu bg-primary" (click)="handleMenuClick($event)">
    <div id="sidebar-menu" class="hidden-scroll">
        <ul class="metismenu list-unstyled" id="side-menu">
            <li>
                <a href="javascript: void(0);" routerLink="/home/dashboard" routerLinkActive="mm-active">
                    <i class="fa fa-home"></i>
                    <span>{{ 'dashboard' | translate }}</span>
                </a>
            </li>
            <li>
                <a href="javascript:void(0);" class="has-arrow waves-effect" (click)="toggleMenu($event)">
                    <i class="fa fa-user-secret"></i>
                    <span>{{ 'UserManagement' | translate }}</span>
                </a>

                <ul class="sub-menu" aria-expanded="false">
                    <li>
                        <a routerLink="/home/thirdPartyRegistration" routerLinkActive="mm-active">
                            <span> {{ 'thirdPartyRegistration' | translate }}</span>
                        </a>
                    </li>
                    <li>
                        <a routerLink="/home/setupUser" routerLinkActive="mm-active">
                            <span>{{ 'setupUser' | translate }}</span>
                        </a>
                    </li>
                    <li>
                        <a routerLink="/home/resetPassword" routerLinkActive="mm-active">
                            <span> {{ 'resetPassword' | translate }}</span>
                        </a>
                    </li>
                    <li>
                        <a  routerLink="/home/changePassword" routerLinkActive="mm-active" style="cursor: pointer">
                            <span> {{ 'changePassword' | translate }}</span>
                        </a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="javascript:void(0);" class="has-arrow waves-effect" (click)="toggleMenu($event)">
                    <i class="fa fa-history"></i>
                    <span>{{ 'Logging' | translate }}</span>
                </a>
                <ul class="sub-menu" aria-expanded="false">
                    <li>
                        <a routerLink="/home/loggerManager" routerLinkActive="mm-active">
                            <span> {{ 'loggerManager' | translate }}</span>
                        </a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="javascript:void(0);" class="has-arrow waves-effect" (click)="toggleMenu($event)">
                    <i class="mdi mdi-comment-outline"></i>
                    <span>{{ 'SMSBanking' | translate }}</span>
                </a>
                <ul class="sub-menu" aria-expanded="false">
                    <li>
                        <a routerLink="/home/smsLogger" routerLinkActive="mm-active">
                            <span> {{ 'smsLogger' | translate }}</span>
                        </a>
                    </li>
                    <li>
                        <a routerLink="/home/smsGateway" routerLinkActive="mm-active">
                            <span> {{ 'smsGateway' | translate }}</span>
                        </a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="javascript:void(0);" class="has-arrow waves-effect" (click)="toggleMenu($event)">
                    <i class="mdi mdi-comment-outline"></i>
                    <span>{{ 'ibSupport' | translate }}</span>
                </a>
                <ul class="sub-menu" aria-expanded="false">
                    <li>
                        <a routerLink="/home/ibUnblockUser" routerLinkActive="mm-active">
                            <span> {{ 'ibUnblockUser' | translate }}</span>
                        </a>
                    </li>
                    <li>
                        <a routerLink="/home/feedbackSetup" routerLinkActive="mm-active">
                            <span> {{ 'feedbackSetup' | translate }}</span>
                        </a>
                    </li>
                    <li>
                        <a routerLink="/home/purposeSetup" routerLinkActive="mm-active">
                            <span> {{ 'purposeSetup' | translate }}</span>
                        </a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="javascript:void(0);" class="has-arrow waves-effect" (click)="toggleMenu($event)">
                    <i class='fa fa-lock'></i>
                    <span>{{ 'Permissions' | translate }}</span>
                </a>
                <ul class="sub-menu" aria-expanded="false">
                    <li>
                        <a routerLink="/home/permissions" routerLinkActive="mm-active">
                            <span> {{ 'permissions' | translate }}</span>
                        </a>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
</div>