fix: top on sticky header and add method for close NavBar on mobile

italia · Jul 12, 2024 · d1df044 · d1df044
1 parent f29bfd3
commit d1df044
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 2 deletions.
diff --git a/projects/design-angular-kit/src/lib/components/navigation/header/header.component.html b/projects/design-angular-kit/src/lib/components/navigation/header/header.component.html
@@ -3,7 +3,8 @@
   class="it-header-wrapper"
   [class.it-header-sticky]="sticky"
   data-bs-position-type="fixed"
-  data-bs-sticky-class-name="is-sticky">
+  data-bs-sticky-class-name="is-sticky"
+  data-bs-target="#header-nav-wrapper">
   @if (showSlim) {
     <div class="it-header-slim-wrapper" [class.theme-light]="light">
       <div class="container">
@@ -84,7 +85,7 @@
         </div>
       </div>
     </div>
-    <div class="it-header-navbar-wrapper" [class.theme-light-desk]="light">
+    <div class="it-header-navbar-wrapper" [class.theme-light-desk]="light" id="header-nav-wrapper">
       <div class="container">
         <div class="row">
           <div class="col-12">

diff --git a/projects/design-angular-kit/src/lib/components/navigation/header/header.component.ts b/projects/design-angular-kit/src/lib/components/navigation/header/header.component.ts
@@ -13,6 +13,7 @@ import {
 import { TranslateModule } from '@ngx-translate/core';
 import { ItIconComponent } from '../../utils/icon/icon.component';
 import { ItNavBarModule } from '../navbar/navbar.module';
+import { ItNavBarComponent } from '../navbar/navbar/navbar.component';
 
 import { ItButtonDirective } from '../../core/button/button.directive';
 import { inputToBoolean } from '../../../utils/coercion';
@@ -48,6 +49,8 @@ export class ItHeaderComponent implements AfterViewInit, OnChanges {
 
   @ViewChild('headerWrapper') private headerWrapper?: ElementRef<HTMLButtonElement>;
 
+  @ViewChild(ItNavBarComponent) private itNavBarComponent?: ItNavBarComponent;
+
   @Input({ transform: inputToBoolean }) megamenu?: boolean;
   @Input({ transform: inputToBoolean }) expand?: boolean = true;
 
@@ -89,4 +92,8 @@ export class ItHeaderComponent implements AfterViewInit, OnChanges {
     event.preventDefault();
     this.searchClick.emit(event);
   }
+
+  toggleCollapse() {
+    this.itNavBarComponent?.toggleCollapse();
+  }
 }