Is there a way to save the menu state when pressing F5? I'm looking for a similar functionality as seen on the Binance website. For example, clicking on the Sell NFT's submenu and then refreshing the page with F5 should maintain the menu state on Sell NFT's.
You can find an example at this URL: Binance
https://i.stack.imgur.com/TGMMF.png
I want to replicate this behavior in my web application.
If I click on 'Dealing'
I have two subcategories
(Dealing Overview & Order Authorization)If I click on 'Dealing Overview' and refresh the page with F5, it resets to the initial state.
I would like to remain on
Dealing Overview & Order AuthorizationI'm unsure how to achieve this.
Here are 2 console logs:
1/ Here, I correctly retrieve the 13 categories.
https://i.stack.imgur.com/B7aX3.png
2/ When I click on a subcategory, it displays correctly.
https://i.stack.imgur.com/q0Zgy.png
The issue is that pressing F5 resets the menu state to 0. Any ideas on how to fix this?
Here is my code
export class OnlineComponent implements OnInit {
// Code for Online Component...
}
template
<div class="menu-content" [ngClass]="{ 'show-elem': !showElement, 'noshow-elem': showElement }">
<ul class="menu-items">
<li class="item" [ngClass]="{ active: item.active }" *ngFor="let item of nav">
<div class="menu-item" [ngClass]="{ 'show-menu': showMenu, 'noshow-menu': !showMenu }">
<span class="title" (click)="onClickChangeActiveFlag(item)">
<span>{{ item.name }}</span>
<fa-icon [icon]="faChevronRight"></fa-icon>
</span>
</div>
</li>
</ul>
</div>
<div [ngClass]="{ 'show-elem': showElement, 'noshow-elem': !showElement }">
<ul class="submenu-title">
<span class="title-sub" (click)="closeChildNav()">
<fa-icon [icon]="faChevronLeft"></fa-icon>
<span class="ml-2 btnBack">Retour</span>
</span>
<li class="items" routerLink="{{ subItem.state }}" *ngFor="let subItem of subMenu">
<span>{{subItem.name}}</span>
</li>
</ul>
</div>