fix(nav-drawer): fixing a bug with ripple directive going in material…

… theme. (#14574) Co-authored-by: Simeon Simeonoff <[email protected]>
IgniteUI · Jul 31, 2024 · 56b32d2 · 56b32d2
1 parent ecb0e40
commit 56b32d2
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 15 deletions.
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/navdrawer/_navdrawer-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/navdrawer/_navdrawer-theme.scss
@@ -384,13 +384,18 @@
         }
 
         @if $variant == 'material' {
+	        $reduce-size: rem(8px);
+
+			// The clip path here fixes a bug: https://github.com/IgniteUI/igniteui-angular/issues/14554
+	        clip-path: inset(calc($reduce-size / 2) 0 round var-get($theme, 'item-border-radius'));
+
             &::after {
                 content: '';
                 position: absolute;
                 width: 100%;
                 inset-block-start: rem(4px);
                 inset-inline-start: 0;
-                height: calc(100% - #{rem(8px)});
+                height: calc(100% - #{$reduce-size});
                 border-radius: var-get($theme, 'item-border-radius');
                 z-index: -1;
             }

diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -1,7 +1,7 @@
 import { Component, OnInit, ViewChild, HostBinding } from '@angular/core';
 import { Router, NavigationStart, NavigationEnd, RouterLinkActive, RouterLink, RouterOutlet } from '@angular/router';
 import { filter } from 'rxjs/operators';
-import { IgxNavigationDrawerComponent, IgxIconService } from 'igniteui-angular';
+import { IgxNavigationDrawerComponent, IgxIconService, IgxRippleDirective } from 'igniteui-angular';
 import { PageHeaderComponent } from './pageHeading/pageHeading.component';
 import { IgxIconComponent } from '../../projects/igniteui-angular/src/lib/icon/icon.component';
 import { NgFor, NgIf } from '@angular/common';
@@ -12,19 +12,20 @@ import { IgxNavDrawerTemplateDirective, IgxNavDrawerItemDirective, IgxNavDrawerM
     templateUrl: './app.component.html',
     styleUrls: ['./app.component.scss'],
     standalone: true,
-    imports: [
-        IgxNavigationDrawerComponent,
-        IgxNavDrawerTemplateDirective,
-        IgxNavDrawerItemDirective,
-        NgFor,
-        RouterLinkActive,
-        RouterLink,
-        IgxIconComponent,
-        NgIf,
-        IgxNavDrawerMiniTemplateDirective,
-        PageHeaderComponent,
-        RouterOutlet
-    ]
+	imports: [
+		IgxNavigationDrawerComponent,
+		IgxNavDrawerTemplateDirective,
+		IgxNavDrawerItemDirective,
+		NgFor,
+		RouterLinkActive,
+		RouterLink,
+		IgxIconComponent,
+		NgIf,
+		IgxNavDrawerMiniTemplateDirective,
+		PageHeaderComponent,
+		RouterOutlet,
+		IgxRippleDirective,
+	],
 })
 export class AppComponent implements OnInit {
     @HostBinding('attr.id')