Use CSS for 200ms navbar transition-delay

This commit is contained in:
Pieter Lambrecht 2023-01-23 09:27:21 +01:00
parent a4d8169df8
commit 5e14a4265a
6 changed files with 22 additions and 0 deletions

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

View File

@ -27,6 +27,12 @@ class SideNav {
*/
private sections: Section[] = [];
/**
* Tracker if the mouse on the navbar or not
*/
// private mouseOver: boolean = false;
constructor(base: HTMLDivElement) {
this.base = base;
this.state = new StateManager<NavState>(
@ -247,6 +253,18 @@ class SideNav {
* Show the sidenav and expand any active sections.
*/
private onEnter(): void {
// this.mouseOver = true;
// if (!this.bodyHas('pinned')) {
// setTimeout(() => {
// if (this.mouseOver) {
// this.bodyRemove('hide', 'hidden');
// this.bodyAdd('show');
// for (const link of this.getActiveLinks()) {
// this.activateLink(link, 'expand');
// }
// }
// }, 200); // add a 200ms delay before the sidenav opens
// }
if (!this.bodyHas('pinned')) {
this.bodyRemove('hide', 'hidden');
this.bodyAdd('show');
@ -254,12 +272,15 @@ class SideNav {
this.activateLink(link, 'expand');
}
}
}
/**
* Hide the sidenav and collapse any active sections.
*/
private onLeave(): void {
// this.mouseOver = false;
if (!this.bodyHas('pinned')) {
this.bodyRemove('show');
this.bodyAdd('hide');

View File

@ -78,6 +78,7 @@
background-color: var(--nbx-sidebar-bg);
border-right: 1px solid $border-color;
transition: $transition-100ms-ease-in-out;
transition-delay: 200ms;
// Media fixes for mobile resolutions.
@include media-breakpoint-down(lg) {