I'm currently developing an angular application that features a responsive navigation using the angular navbar. To ensure smooth navigation, I have implemented swipe gestures by utilizing hammer.js. Swiping right reveals the menu, while swiping left hides it.
However, I've encountered an issue where if the user swipes quickly to the right (at a normal smartphone speed), the navigation buttons don't respond to the first click, only registering on the second attempt. Interestingly, when the swipe is performed slowly, the buttons function as expected. Additionally, manually toggling the menu using the toggle button works without any problems.
See this example gif for reference (first slow, then fast): https://i.sstatic.net/c2bYe.gif
This bug seems to occur specifically when using the "toggle device toolbar" in Chrome and selecting a device, as well as on my Android 9 device with Chrome for Android. It does not happen when simply resizing the browser window.
The app.component.html code snippet:
<mat-sidenav-container>
<mat-sidenav #sidenav fxLayout="column" mode="side" opened="false" class="hidelarge sidenav">
<mat-nav-list fxLayout="column">
<!-- Navigation links here -->
</mat-nav-list>
</mat-sidenav>
<mat-sidenav-content fxFlexFill (swiperight)="sidenav.open()" (swipeleft)="sidenav.close()" >
<app-header (navToggle)="sidenav.toggle()">
</app-header>
<main class="minheight">
<router-outlet></router-outlet>
</main>
<app-footer>
</app-footer>
</mat-sidenav-content>
</mat-sidenav-container>
And in my app.module.ts file:
...
export class MyHammerConfig extends HammerGestureConfig {
overrides = <any>{
// Customized hammerjs configuration
'swipe': { direction: Hammer.DIRECTION_HORIZONTAL },
'pinch': { enable: false },
'rotate': { enable: false },
'pan': { enable: false },
'tap': { enable: false },
'press':{enable:false},
'doubletap':{enable:false},
};
}
...
providers: [
{ provide: HAMMER_GESTURE_CONFIG, useClass: MyHammerConfig }
],
...
I imported hammer.js in my main.ts like so:
import 'hammerjs';