I am encountering an issue with a scrollbar that is related to a fullscreen menu appearing on a page and causing the page scrollbar to reset due to a display: none property.
The images below provide a visual representation of the problem:
Below is the TypeScript code snippet:
// ISSUE: The method responsible for toggling the menu by adding a CSS class with 'display: none'.
toggleMenu() {
const main = document.getElementById('main');
if (main !== null) {
if (this.menuOpen) {
this.menuOpen = false;
main.classList.remove('hidden');
} else {
this.menuOpen = true;
setTimeout(() => this.menuOpen ? main.classList.add('hidden') : null, 250);
}
}
}
Here is the corresponding HTML code snippet:
<label class="main-menu">
<input type='checkbox' #checkbox (click)="toggleMenu()">
<span class='menu'><span class='hamburger'></span></span>
<div class="theme-menu">
<app-theme-switcher></app-theme-switcher>
</div>
<ul class="pb-4 pt-2">
<li><a routerLink="/home" (click)="toggleMenu()">Home</a></li>
</ul>
</label>
<main id="main">
<router-outlet></router-outlet>
</main>
<app-footer></app-footer>
And lastly, the CSS code snippet:
.hidden {
display: none !important;
opacity: 0;
}
.main-menu {
*, *:before, *:after {
box-sizing: border-box;
}
/* CSS styles for the menu animation */
}
If you have any insights or solutions to offer, I would greatly appreciate it. Thank you!