I am a novice at angular and trying to convert a website (admin theme) into angular using Jquery and metismenu (I understand many people do not want to use Jquery but as I am trying to migrate the website I do not wish to modify lots of things)
Scenario: In the website when opening through a small device the page looks like below
the steps are: 1. the user clicks on the fa-bars icon 2. the vertical menu appears and when the user clicks on any of the menus icons, 3. the links appear to the right
The challenge is to get the same behaviour using Angular 8. At this point my header component.html (the one that gets the fa-bar working reads)
<div class="row border-bottom">
<nav class="navbar navbar-static-top " role="navigation" style="margin-bottom: 0">
<div class="navbar-header">
<a class="minimalize-styl-2 btn btn-primary " (click)="toggleNavigation()"><i class="fa
fa-bars"></i> </a>
</div>
<ul class="nav navbar-top-links navbar-right">
<li>
<span class="m-r-sm text-muted welcome-message">XXXX</span>
</li>
<li>
<a (click)="removeValue()">
<i class="fa fa-sign-out"></i> Log out
</a>
</li>
</ul>
</nav>
</div>
and my header component.ts reads:
toggleNavigation(): void {
jQuery("body").toggleClass("mini-navbar");
smoothlyMenu();
}
My sidebar menu reads:
<nav class="navbar-default navbar-static-side" role="navigation">
<div class="sidebar-collapse">
<ul class="nav metismenu" id="side-menu">
<li class="nav-header">
<div class="dropdown profile-element" dropdown>
<div class="circle">
<span class="initials" id="myFunction(twoinitials)">
{{currentUser.firstnameletter}}{{currentUser.lastnameletter}}</span>
</div>
<a data-toggle="dropdown" class="dropdown-toggle" href="#">
<span style="width: 100%;text-align: center" class="block m-t-xs font-bold">
{{currentUser.firstname}} {{currentUser.lastname}}</span>
<span style="width: 100%;text-align: center" class="block m-t-xs font-bold">
{{currentUser.role_id}}</span>
</a>
</div>
<div class="logo-element">
</div>
</li>
<li>
<a href="#"><i class="fa fa-th-large"></i> <span class="nav-label" >Accounts</span> <span
class="fa arrow"></span></a>
**<ul class="nav nav-second-level collapse">
<li><a routerLink="/paymentreq/newrequest" routerLinkActive="active- link"
[routerLinkActiveOptions]="{exact:true}" *ngIf="show_paymentrequest">Payment
Request</a></li>
<li><a routerLink="/paymentreq/payment-approval"
routerLinkActive="active-link" [routerLinkActiveOptions]="
{exact:true}" *ngIf="show_paymentapproval">Payment Approval</a> </li>
<li><a routerLink="/paymentreq/payment-pay" routerLinkActive="active-
link" [routerLinkActiveOptions]="{exact:true}"
*ngIf="show_paymentpay">Process Payment </a></li>
<li><a routerLink="/paymentreq/payment-reports" routerLinkActive="active-
link" [routerLinkActiveOptions]="{exact:true}"
*ngIf="show_paymentreport">Payment Reports</a></li>
</ul>**
</li>
.......................
My sidebard component ts reads:
jQuery('#side-menu').metisMenu();
if (jQuery("body").hasClass('fixed-sidebar')) {
jQuery('.sidebar-collapse').slimscroll({
height: '100%'
})
}
}
Now, with that setup everything "works" fine in a normal screen (the menu is normal to the side, the fa-bars button is there and I can follow the links etc) BUT when I go into mobile mode, the fa-bars button works and the slim scroll appears, HOWEVER, the second level navigation links DO NOT appear even if I can see that something happens (the green bar to the left is active) after clicking any of the menus buttons. I have been going on with this for a day or so and read tons and try tons of different setups but to no avail, If a kind soul could help me or point me in the right direction I will appreciate greatly.
