feat: improve mobile navigation experience

This commit is contained in:
Johannes Millan 2025-10-23 16:37:56 +02:00
parent 0bdf379df9
commit 8b27fe6658

View file

@ -13,7 +13,7 @@ import {
AfterViewInit,
} from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import { NavigationStart, Router, RouterModule } from '@angular/router';
import { NavItemComponent } from './nav-item/nav-item.component';
import { NavListTreeComponent } from './nav-list/nav-list-tree.component';
import { NavItem } from './magic-side-nav.model';
@ -25,6 +25,8 @@ import { NavMatMenuComponent } from './nav-mat-menu/nav-mat-menu.component';
import { TaskService } from '../../features/tasks/task.service';
import { LayoutService } from '../layout/layout.service';
import { magicSideNavAnimations } from './magic-side-nav.animations';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { filter } from 'rxjs/operators';
import { Subscription } from 'rxjs';
import { ScheduleExternalDragService } from '../../features/schedule/schedule-week/schedule-external-drag.service';
import { Log } from '../../core/log';
@ -61,9 +63,11 @@ export class MagicSideNavComponent implements OnInit, OnDestroy, AfterViewInit {
private readonly _sideNavConfigService = inject(MagicNavConfigService);
private readonly _taskService = inject(TaskService);
private readonly _layoutService = inject(LayoutService);
private readonly _router = inject(Router);
private _dragDropRegistry = inject(DragDropRegistry);
private _externalDragService = inject(ScheduleExternalDragService);
private _pointerUpSubscription: Subscription | null = null;
// Use service's computed signal directly
readonly config = this._sideNavConfigService.navConfig;
readonly WorkContextType = WorkContextType;
@ -144,6 +148,17 @@ export class MagicSideNavComponent implements OnInit, OnDestroy, AfterViewInit {
this._destroyRef.onDestroy(() => {
window.removeEventListener('resize', resizeListener);
});
this._router.events
.pipe(
filter((event): event is NavigationStart => event instanceof NavigationStart),
takeUntilDestroyed(this._destroyRef),
)
.subscribe(() => {
if (this.isMobile() && this.showMobileMenuOverlay()) {
this.showMobileMenuOverlay.set(false);
}
});
}
ngOnDestroy(): void {