feat(nav-drawer): use popover API for top layer without z-index hassle (#16913)

Author: damyanpetev

CHANGELOG.md

@@ -45,6 +45,7 @@ All notable changes for each version of this project will be documented in this
         <igx-icon [igxTooltipTarget]="tooltipRef" [showTriggers]="'click,focus'" [hideTriggers]="'keypress,blur'">info</igx-icon>
         <span #tooltipRef="tooltip" igxTooltip>Hello there, I am a tooltip!</span>
         ```
+- `IgxNavigationDrawer` - Integrated HTML Popover API to place overlay elements when not pinned in the top layer, eliminating z-index stacking issues.
 
 ### General
 

projects/igniteui-angular/core/src/core/styles/components/navdrawer/_navdrawer-theme.scss

@@ -71,16 +71,19 @@
         min-height: 100%;
         overflow-x: hidden;
         background: var-get($theme, 'background');
-        top: 0;
-        bottom: 0;
+        inset: 0 auto;
         width: var(--igx-nav-drawer-size);
         inset-inline-start: 0;
-        z-index: 999;
         transition: width, padding, transform;
         transition-timing-function: $in-out-quad;
         box-shadow: var-get($theme, 'elevation');
         padding: $aside-padding;
 
+        // additional popover overrides:
+        margin: 0;
+        border: none;
+        display: block;
+
         @if $variant != 'fluent' {
             border-inline-end: rem(1px) solid var-get($theme, 'border-color');
         } @else {
@@ -98,7 +101,6 @@
     %aside--pinned {
         position: relative;
         box-shadow: none;
-        z-index: 0;
     }
 
     %aside--collapsed--right {
@@ -178,11 +180,16 @@
         transition-delay: 0s, 0s;
         position: absolute;
         inset-inline-start: 0;
-        top: 0;
+        inset: 0;
         width: 100%;
         height: 100%;
         visibility: visible;
-        z-index: 999;
+
+        // additional popover overrides:
+        margin: 0;
+        padding: 0;
+        border: none;
+        display: block;
     }
 
     %overlay-panning {

projects/igniteui-angular/navigation-drawer/src/navigation-drawer/navigation-drawer.component.html

@@ -9,13 +9,15 @@
 </ng-template>
 
 <div [hidden]="pin"
+    [attr.popover]="pin ? null : 'manual'"
     class="igx-nav-drawer__overlay"
     [class.igx-nav-drawer__overlay--hidden]="!isOpen"
     [class.igx-nav-drawer--disable-animation]="disableAnimation"
     (click)="close()" #overlay>
 </div>
 <nav
     class="igx-nav-drawer__aside"
+    [attr.popover]="pin ? null : 'manual'"
     [class.igx-nav-drawer__aside--collapsed]="!miniTemplate && !isOpen"
     [class.igx-nav-drawer__aside--mini]="miniTemplate && !isOpen"
     [class.igx-nav-drawer__aside--normal]="!miniTemplate || isOpen"

projects/igniteui-angular/navigation-drawer/src/navigation-drawer/navigation-drawer.component.spec.ts

@@ -85,6 +85,9 @@ describe('Navigation Drawer', () => {
             expect(fixture.componentInstance.navDrawer.styleDummy.classList).toContain('igx-nav-drawer__style-dummy');
             expect(fixture.componentInstance.navDrawer.hasAnimateWidth).toBeFalsy();
 
+            expect(fixture.componentInstance.navDrawer.drawer.getAttribute('popover')).toBe('manual');
+            expect(fixture.componentInstance.navDrawer.overlay.getAttribute('popover')).toBe('manual');
+
             fixture.componentInstance.navDrawer.id = 'customNavDrawer';
             fixture.detectChanges();
 
@@ -198,6 +201,7 @@ describe('Navigation Drawer', () => {
             expect(fixture.componentInstance.navDrawer.hasAnimateWidth).toBeTruthy();
             expect(fixture.debugElement.query(By.css('.igx-nav-drawer__aside')).nativeElement.classList)
                 .toContain('igx-nav-drawer__aside--mini');
+            expect(fixture.componentInstance.navDrawer.drawer.getAttribute('popover')).toBe('manual');
         }).catch((reason) => Promise.reject(reason));
     }));
 
@@ -259,6 +263,8 @@ describe('Navigation Drawer', () => {
             expect(fixture.componentInstance.navDrawer.pin).toBeTruthy();
             expect(fixture.debugElement.query(By.css('.igx-nav-drawer__aside')).nativeElement.classList)
                 .toContain('igx-nav-drawer__aside--pinned');
+            expect(fixture.componentInstance.navDrawer.drawer.getAttribute('popover')).toBeNull();
+            expect(fixture.componentInstance.navDrawer.overlay.getAttribute('popover')).toBeNull();
 
             expect(fixture.componentInstance.navDrawer.enableGestures).toBe(false);
 
@@ -272,6 +278,7 @@ describe('Navigation Drawer', () => {
     it('should stay at 100% parent height when pinned', waitForAsync(() => {
         const template = `<div style="height: 100%; position: relative;">
                             <igx-nav-drawer
+                                [isOpen]="true"
                                 [pin]="pin"
                                 pinThreshold="false"
                                 [enableGestures]="enableGestures">
@@ -291,10 +298,12 @@ describe('Navigation Drawer', () => {
                 fixture.componentInstance.pin = false;
                 fixture.detectChanges();
                 expect(navdrawer.clientHeight).toEqual(windowHeight);
+                expect(navdrawer.getAttribute('popover')).toBe('manual');
 
                 fixture.componentInstance.pin = true;
                 fixture.detectChanges();
                 expect(navdrawer.clientHeight).toEqual(container.clientHeight);
+                expect(navdrawer.getAttribute('popover')).toBeNull();
 
                 container.style.height = `${windowHeight - 50}px`;
                 fixture.detectChanges();
@@ -304,6 +313,7 @@ describe('Navigation Drawer', () => {
                 fixture.componentInstance.pin = false;
                 fixture.detectChanges();
                 expect(navdrawer.clientHeight).toEqual(windowHeight);
+                expect(navdrawer.getAttribute('popover')).toBe('manual');
             });
     }));
 
@@ -499,6 +509,9 @@ describe('Navigation Drawer', () => {
         // Standard default:
         expect(asideWidth).toBe('240px');
 
+        // Not pinned and open: popover should be shown
+        expect(asideElem.matches(':popover-open')).toBeTruthy();
+
         // Change sizes:
         fixture.componentInstance.drawerMiniWidth = '80px';
         fixture.componentInstance.drawerWidth = '250px';
@@ -637,6 +650,37 @@ describe('Navigation Drawer', () => {
             expect(navbarEl.offsetLeft).toEqual(parseInt(flexBasis));
     });
 
+    it('should not hide popover during closing animation', async () => {
+        const template = `<igx-nav-drawer pinThreshold="false"></igx-nav-drawer>`;
+        TestBed.overrideComponent(TestComponentDIComponent, {
+            set: { template }
+        });
+        await TestBed.compileComponents();
+        const fixture = TestBed.createComponent(TestComponentDIComponent);
+        fixture.detectChanges();
+        const drawer = fixture.componentInstance.navDrawer;
+
+        drawer.open();
+        fixture.detectChanges();
+        await wait(50);
+
+        // Begin close - _closingAnimation should prevent immediate popover hide
+        drawer.close();
+        fixture.detectChanges();
+        await wait(50);
+
+        // The drawer popover should still be showing during the closing animation
+        expect(drawer.isOpen).toBeFalsy();
+        expect(drawer.drawer.matches(':popover-open')).toBeTruthy();
+
+        // Complete the transition
+        fixture.debugElement.children[0].nativeElement.dispatchEvent(new Event('transitionend'));
+        fixture.detectChanges();
+        await wait(50);
+
+        expect(drawer.drawer.matches(':popover-open')).toBeFalsy();
+    });
+
     const swipe = (element, posX, posY, duration, deltaX, deltaY) => {
         const swipeOptions = {
             deltaX,

projects/igniteui-angular/navigation-drawer/src/navigation-drawer/navigation-drawer.component.ts

@@ -1,4 +1,4 @@
-import { AfterContentInit, Component, ContentChild, ElementRef, EventEmitter, HostBinding, Input, OnChanges, OnDestroy, OnInit, Output, SimpleChange, ViewChild, Renderer2, booleanAttribute, inject } from '@angular/core';
+import { AfterContentInit, afterRenderEffect, Component, ContentChild, ElementRef, EventEmitter, HostBinding, Input, OnChanges, OnDestroy, OnInit, Output, SimpleChange, ViewChild, Renderer2, booleanAttribute, inject, signal, computed } from '@angular/core';
 import { fromEvent, interval, Subscription } from 'rxjs';
 import { debounce } from 'rxjs/operators';
 import { IgxNavigationService, IToggleView } from 'igniteui-angular/core';
@@ -49,10 +49,18 @@ export class IgxNavigationDrawerComponent implements
     OnChanges {
     private elementRef = inject<ElementRef>(ElementRef);
     private _state = inject(IgxNavigationService, { optional: true });
-    protected renderer = inject(Renderer2);
+    private renderer = inject(Renderer2);
     private _touchManager = inject(HammerGesturesManager);
     private platformUtil = inject(PlatformUtil);
 
+    private _isOpen = signal(false);
+    private _pinned = signal(false);
+    private _miniTemplate = signal<IgxNavDrawerMiniTemplateDirective | undefined>(undefined);
+    private _visibleOverlay = computed<boolean>(() => {
+        return !this._pinned() && (this._isOpen() || !!this._miniTemplate());
+    });
+    private _closingAnimation = signal(false);
+
 
     /** @hidden @internal */
     @HostBinding('class.igx-nav-drawer')
@@ -140,7 +148,14 @@ export class IgxNavigationDrawerComponent implements
      * <igx-nav-drawer [pin]="false"></igx-nav-drawer>
      * ```
      */
-    @Input({ transform: booleanAttribute }) public pin = false;
+    @Input({ transform: booleanAttribute })
+    public get pin(): boolean {
+        return this._pinned();
+    }
+    public set pin(v: boolean) {
+        this._pinned.set(v);
+    }
+
 
     /**
      * Width of the drawer in its open state.
@@ -237,11 +252,9 @@ export class IgxNavigationDrawerComponent implements
     @ContentChild(IgxNavDrawerTemplateDirective, { read: IgxNavDrawerTemplateDirective })
     protected contentTemplate: IgxNavDrawerTemplateDirective;
 
-    @ViewChild('aside', { static: true }) private _drawer: ElementRef;
-    @ViewChild('overlay', { static: true }) private _overlay: ElementRef;
-    @ViewChild('dummy', { static: true }) private _styleDummy: ElementRef;
-
-    private _isOpen = false;
+    @ViewChild('aside', { static: true }) private _drawer: ElementRef<HTMLElement>;
+    @ViewChild('overlay', { static: true }) private _overlay: ElementRef<HTMLElement>;
+    @ViewChild('dummy', { static: true }) private _styleDummy: ElementRef<HTMLElement>;
 
     /**
      * State of the drawer.
@@ -264,11 +277,11 @@ export class IgxNavigationDrawerComponent implements
      */
     @Input({ transform: booleanAttribute })
     public get isOpen() {
-        return this._isOpen;
+        return this._isOpen();
     }
     public set isOpen(value) {
-        this._isOpen = value;
-        this.isOpenChange.emit(this._isOpen);
+        this._isOpen.set(value);
+        this.isOpenChange.emit(value);
     }
 
     /**
@@ -290,27 +303,25 @@ export class IgxNavigationDrawerComponent implements
             return this.contentTemplate.template;
         }
     }
-
-    private _miniTemplate: IgxNavDrawerMiniTemplateDirective;
     /**
      * @hidden
      */
     public get miniTemplate(): IgxNavDrawerMiniTemplateDirective {
-        return this._miniTemplate;
+        return this._miniTemplate();
     }
 
     /**
      * @hidden
      */
     @ContentChild(IgxNavDrawerMiniTemplateDirective, { read: IgxNavDrawerMiniTemplateDirective })
     public set miniTemplate(v: IgxNavDrawerMiniTemplateDirective) {
-        this._miniTemplate = v;
+        this._miniTemplate.set(v);
     }
 
     /** @hidden @internal */
     @HostBinding('class.igx-nav-drawer--mini')
     public get isMini(): boolean {
-        return !!this._miniTemplate && !this.isOpen;
+        return !!this.miniTemplate && !this.isOpen;
     }
 
     /** @hidden @internal */
@@ -361,14 +372,14 @@ export class IgxNavigationDrawerComponent implements
      * @hidden
      */
     public get drawer() {
-        return this._drawer.nativeElement;
+        return this._drawer?.nativeElement;
     }
 
     /**
      * @hidden
      */
     public get overlay() {
-        return this._overlay.nativeElement;
+        return this._overlay?.nativeElement;
     }
 
     /**
@@ -440,6 +451,13 @@ export class IgxNavigationDrawerComponent implements
         return this._state;
     }
 
+    constructor() {
+        afterRenderEffect(() => {
+            if (this._closingAnimation()) return;
+            this.togglePopover(this._visibleOverlay());
+        });
+    }
+
     /**
      * @hidden
      */
@@ -572,6 +590,8 @@ export class IgxNavigationDrawerComponent implements
 
         this.closing.emit();
 
+        // TODO: intersection observer for close popover instead of transitionend
+        this._closingAnimation.set(true);
         this.isOpen = false;
         this.elementRef.nativeElement.addEventListener('transitionend', this.toggleClosedEvent, false);
     }
@@ -827,13 +847,30 @@ export class IgxNavigationDrawerComponent implements
         });
     }
 
+    private togglePopover(show: boolean) {
+        // check element and functionality exist:
+        if (typeof this.drawer?.showPopover !== 'function') return;
+
+        const popoverOpen = this.drawer.matches(':popover-open');
+        if (show === popoverOpen) return;
+
+        if (show) {
+            this.overlay.showPopover();
+            this.drawer.showPopover();
+        } else {
+            this.overlay.hidePopover();
+            this.drawer.hidePopover();
+        }
+    }
+
     private toggleOpenedEvent = () => {
         this.elementRef.nativeElement.removeEventListener('transitionend', this.toggleOpenedEvent, false);
         this.opened.emit();
     };
 
     private toggleClosedEvent = () => {
         this.elementRef.nativeElement.removeEventListener('transitionend', this.toggleClosedEvent, false);
+        this._closingAnimation.set(false);
         this.closed.emit();
     };
 }

src/app/app.component.html

@@ -1,7 +1,7 @@
 <div class="main">
     <igx-nav-drawer #navdrawer
         [enableGestures]="drawerState.enableGestures" id="navdrawer"
-        [isOpen]="drawerState.open"
+        [(isOpen)]="drawerState.open"
         [(pin)]="drawerState.pin" [position]="drawerState.position">
 
         <ng-template igxDrawer>

src/app/app.component.ts

@@ -67,7 +67,7 @@ export class AppComponent implements OnInit {
 
     public drawerState = {
         enableGestures: true,
-        open: true,
+        open: signal(true),
         pin: false,
         pinThreshold: 768,
         position: 'left',

src/app/navdrawer/navdrawer.sample.html

@@ -4,7 +4,7 @@ <h4 class="sample-title">Settings</h4>
         <article>
             <h5 class="setting-title">Visibility</h5>
             <div class="setting-container">
-                <igx-switch (ngModelChange)="toggle()" [checked]="this.app.navdrawer.isOpen" [(ngModel)]="this.app.drawerState.open">
+                <igx-switch [(ngModel)]="this.app.drawerState.open">
                     Show Navdrawer
                 </igx-switch>
             </div>