I am working on an Angular project with a sidebar that I want to modify in order to disable click events on the menu items. My goal is to guide users through a specific flow without allowing them to navigate freely. However, simply disabling the [routerLink] attribute is causing issues with the CSS styling of the sidebar. Do you have any suggestions or tricks to help me resolve this issue?
Below is the HTML code for the Sidebar Navigation:
<ul class="nav">
<li *ngFor="let menuItem of menuItems" routerLinkActive="active" class="{{ menuItem.class }}">
<a [routerLink]="[menuItem.path]">
<i class="nc-icon {{ menuItem.icon }}"></i>
<p>{{ menuItem.title }}</p>
</a>
</li>
Current appearance of the sidebar:
https://i.sstatic.net/aAEqU.png
My objective is to visually indicate to the user which page they are currently on within the sidebar while restricting navigation through it. Instead, I plan to guide users through the flow using 'go back' and 'go next' buttons within each component.
I have tried utilizing the [disabled] attribute and other solutions found on Stack Overflow, but none of them seem to work properly. Removing the [menuItem.path] from RouterLink disrupts the CSS styling. Any advice would be greatly appreciated!