feat: add megamenu component

projects/design-angular-kit/src/lib/components/core/dropdown/dropdown/dropdown.component.html

@@ -1,4 +1,4 @@
-<div class="dropdown {{ direction }}" [class.nav-item]="mode === 'nav'">
+<div class="dropdown {{ direction }}" [class.nav-item]="mode === 'nav'" [class.megamenu]="megamenu">
   @if (mode === 'button') {
     <button
       #dropdownButton

projects/design-angular-kit/src/lib/components/core/dropdown/dropdown/dropdown.component.ts

@@ -54,6 +54,12 @@ export class ItDropdownComponent extends ItAbstractComponent implements AfterVie
    */
   @Input({ transform: inputToBoolean }) fullWidth?: boolean;
 
+  /**
+   * Contains a Megamenu element
+   * @default false
+   */
+  @Input({ transform: inputToBoolean }) megamenu?: boolean;
+
   /**
    * Dark menu style
    * @default false

projects/design-angular-kit/src/lib/components/navigation/header/header.component.html

@@ -54,7 +54,7 @@
   }
   <div class="it-nav-wrapper">
     <div class="it-header-center-wrapper" [class.it-small-header]="smallHeader" [class.theme-light]="light">
-      <div class="container-fluid">
+      <div class="container">
         <div class="row">
           <div class="col-12">
             <div class="it-header-center-content-wrapper">
@@ -86,7 +86,7 @@
       <div class="container">
         <div class="row">
           <div class="col-12">
-            <it-navbar>
+            <it-navbar [megamenu]="megamenu" [expand]="expand">
               <ng-container navItems>
                 <ng-content select="[navItems]"></ng-content>
               </ng-container>

projects/design-angular-kit/src/lib/components/navigation/header/header.component.ts

@@ -47,6 +47,9 @@ export class ItHeaderComponent implements AfterViewInit, OnChanges {
 
   @ViewChild('headerWrapper') private headerWrapper?: ElementRef<HTMLButtonElement>;
 
+  @Input({ transform: inputToBoolean }) megamenu?: boolean;
+  @Input({ transform: inputToBoolean }) expand?: boolean = true;
+
   private stickyHeader?: HeaderSticky;
 
   constructor() {

projects/design-angular-kit/src/lib/components/navigation/megamenu/megamenu.component.html

@@ -0,0 +1,34 @@
+<div class="megamenu pb-5 pt-3 py-lg-0">
+  <div class="row">
+    @if (mode === 'left-section') {
+      <div class="col-xs-12 col-lg-4 px-0">
+        <div class="row">
+          <div class="col-12 it-vertical it-description pb-lg-3">
+            <div class="description-content ps-4 ps-sm-5 ms-3">
+              <ng-content select="[megamenuLeftZone]"></ng-content>
+            </div>
+          </div>
+        </div>
+      </div>
+    }
+    <div class="col-12" [class.col-lg-8]="mode !== 'normal'">
+      @if (header) {
+        <div class="it-heading-link-wrapper">
+          <ng-content select="[megamenuHeadingLink]"></ng-content>
+        </div>
+      }
+      <div class="row">
+        <ng-content select="[megamenuLinkList]"></ng-content>
+      </div>
+    </div>
+    @if (footer || mode === 'right-section') {
+      <div [class.col-xs-12]="mode === 'right-section'" [class.col-lg-4]="mode === 'right-section'" [class.px-0]="mode === 'right-section'">
+        <div [class.it-footer-link-wrapper]="footer" [class.it-footer-link-wrapper-vertical]="mode === 'right-section'">
+          <div class="d-flex flex-column justify-content-around" [class.flex-lg-row]="mode !== 'right-section'">
+            <ng-content select="[megamenuFooter]"></ng-content>
+          </div>
+        </div>
+      </div>
+    }
+  </div>
+</div>

projects/design-angular-kit/src/lib/components/navigation/megamenu/megamenu.component.scss

@@ -0,0 +1,5 @@
+::ng-deep .theme-light-desk {
+  .nav-link::before {
+    background-color: #06c;
+  }
+}

projects/design-angular-kit/src/lib/components/navigation/megamenu/megamenu.component.ts

@@ -0,0 +1,30 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { NgTemplateOutlet } from '@angular/common';
+import { inputToBoolean } from '../../../utils/coercion';
+
+@Component({
+  standalone: true,
+  selector: 'it-megamenu',
+  templateUrl: './megamenu.component.html',
+  styleUrls: ['./megamenu.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [NgTemplateOutlet],
+})
+export class ItMegamenuComponent {
+  /**
+   * Megamenu mode
+   */
+  @Input() mode: 'right-section' | 'left-section' | 'normal' = 'normal';
+
+  /**
+   * To show Megamenu header
+   * @default false
+   */
+  @Input({ transform: inputToBoolean }) header?: boolean;
+
+  /**
+   * To show Megamenu footer
+   * @default false
+   */
+  @Input({ transform: inputToBoolean }) footer?: boolean;
+}

projects/design-angular-kit/src/lib/design-angular-kit.module.ts

@@ -16,6 +16,7 @@ import { ItDropdownModule } from './components/core/dropdown/dropdown.module';
 import { ItForwardDirective } from './components/core/forward/forward.directive';
 import { ItLinkComponent } from './components/core/link/link.component';
 import { ItListModule } from './components/core/list/list.module';
+import { ItMegamenuComponent } from './components/navigation/megamenu/megamenu.component';
 import { ItModalComponent } from './components/core/modal/modal.component';
 import { ItNotificationsComponent } from './components/core/notifications/notifications.component';
 import { ItPaginationComponent } from './components/core/pagination/pagination.component';
@@ -75,7 +76,14 @@ const core = [
 /**
  * Navigation Components
  */
-const navigation = [ItBackButtonComponent, ItBackToTopComponent, ItBreadcrumbsModule, ItHeaderComponent, ItNavBarModule];
+const navigation = [
+  ItBackButtonComponent,
+  ItBackToTopComponent,
+  ItBreadcrumbsModule,
+  ItHeaderComponent,
+  ItNavBarModule,
+  ItMegamenuComponent,
+];
 
 /**
  * Utils components

projects/design-angular-kit/src/public_api.ts

@@ -88,6 +88,7 @@ export * from './lib/components/navigation/breadcrumbs/breadcrumb/breadcrumb.com
 export * from './lib/components/navigation/breadcrumbs/breadcrumb-item/breadcrumb-item.component';
 
 export * from './lib/components/navigation/header/header.component';
+export * from './lib/components/navigation/megamenu/megamenu.component';
 
 export * from './lib/components/navigation/navbar/navbar.module';
 export * from './lib/components/navigation/navbar/navbar/navbar.component';

src/app/app-routing.module.ts

@@ -3,65 +3,79 @@ import { Routes, RouterModule } from '@angular/router';
 import { RouterDispatcherComponent } from './router-dispatcher/router-dispatcher.component';
 import { ItErrorPageComponent } from 'design-angular-kit/components/utils/error-page/error-page.component';
 
-
 const routes: Routes = [
   { path: '', redirectTo: 'info', pathMatch: 'full' },
-  { path: 'info', component: RouterDispatcherComponent, children: [
-    { path: '', redirectTo: 'welcome', pathMatch: 'full' },
-    { path: 'welcome', loadChildren: () => import('src/app/welcome/welcome.module').then(m => m.WelcomeModule) }
-  ]},
-  { path: 'componenti', component: RouterDispatcherComponent, children: [
-    { path: '', redirectTo: 'badge', pathMatch: 'full' },
-    { path: 'avatar', loadChildren: () => import('src/app/avatar/avatar.module').then(m => m.AvatarModule) },
-    { path: 'badge', loadChildren: () => import('src/app/badge/badge.module').then(m => m.BadgeModule) },
-    { path: 'checkbox', loadChildren: () => import('src/app/checkbox/checkbox.module').then(m => m.CheckboxModule) },
-    { path: 'progress-bar', loadChildren: () => import('src/app/progress-bar/progress-bar.module').then(m => m.ProgressBarModule) },
-    { path: 'toggle', loadChildren: () => import('src/app/toggle/toggle.module').then(m => m.ToggleModule) },
-    { path: 'popover', loadChildren: () => import('src/app/popover/popover.module').then(m => m.PopoverModule) },
-    { path: 'radio', loadChildren: () => import('src/app/radio/radio.module').then(m => m.RadioModule) },
-    { path: 'breadcrumb', loadChildren: () => import('src/app/breadcrumb/breadcrumb.module').then(m => m.BreadcrumbModule) },
-    { path: 'tabs', loadChildren: () => import('src/app/tabs/tabs.module').then(m => m.TabsModule) },
-    { path: 'tooltip', loadChildren: () => import('src/app/tooltip/tooltip.module').then(m => m.TooltipModule) },
-    { path: 'button', loadChildren: () => import('src/app/button/button.module').then(m => m.ButtonModule) },
-    { path: 'header', loadChildren: () => import('src/app/header/header.module').then(m => m.HeaderModule) },
-    { path: 'collapse', loadChildren: () => import('src/app/collapse/collapse.module').then(m => m.CollapseModule) },
-    { path: 'form-input', loadChildren: () => import('src/app/form-input/form-input.module').then(m => m.FormInputModule) },
-    { path: 'dropdown', loadChildren: () => import('src/app/dropdown/dropdown.module').then(m => m.DropdownModule) },
-    { path: 'back-button', loadChildren: () => import('src/app/back-button/back-button.module').then(m => m.BackButtonModule) },
-    { path: 'back-to-top', loadChildren: () => import('src/app/back-to-top/back-to-top.module').then(m => m.BackToTopModule) },
-    { path: 'chip', loadChildren: () => import('src/app/chip/chip.module').then(m => m.ChipModule) },
-    { path: 'forward', loadChildren: () => import('src/app/forward/forward.module').then(m => m.ForwardModule) },
-    { path: 'dimmer', loadChildren: () => import('src/app/dimmer/dimmer.module').then(m => m.DimmerModule) },
-    { path: 'list', loadChildren: () => import('src/app/list/list.module').then(m => m.ListModule) },
-    { path: 'callout', loadChildren: () => import('src/app/callout/callout.module').then(m => m.CalloutModule) },
-    { path: 'upload', loadChildren: () => import('src/app/upload/upload.module').then(m => m.UploadModule) },
-    { path: 'steppers', loadChildren: () => import('src/app/steppers/steppers.module').then(m => m.SteppersModule) },
-    { path: 'select', loadChildren: () => import('src/app/select/select.module').then(m => m.SelectModule) },
-    { path: 'notifications', loadChildren: () => import('src/app/notifications/notifications.module').then(m => m.NotificationsModule) },
-    { path: 'rating', loadChildren: () => import('src/app/rating/rating.module').then(m => m.RatingModule) },
-    { path: 'pagination', loadChildren: () => import('src/app/pagination/pagination.module').then(m => m.PaginationModule) },
-    { path: 'table', loadChildren: () => import('src/app/table/table.module').then(m => m.TableModule) },
-    { path: 'textarea', loadChildren: () => import('src/app/textarea/textarea.module').then(m => m.TextareaModule) },
-    { path: 'alert', loadChildren: () => import('src/app/alert/alert.module').then(m => m.AlertModule) },
-    { path: 'spinner', loadChildren: () => import('src/app/spinner/spinner.module').then(m => m.SpinnerModule) },
-    { path: 'icon', loadChildren: () => import('src/app/icon/icon.module').then(m => m.IconModule) },
-    { path: 'error-page', loadChildren: () => import('src/app/error-page/error-page.module').then(m => m.ErrorPageModule) },
-    { path: 'modal', loadChildren: () => import('src/app/modal/modal.module').then(m => m.ModalModule) },
-    { path: 'language-switcher', loadChildren: () => import('src/app/language-switcher/language-switcher.module').then(m => m.LanguageSwitcherModule) },
-    { path: 'password-input', loadChildren: () => import('src/app/password-input/password-input.module').then(m => m.PasswordInputModule) },
-    { path: 'carousel', loadChildren: () => import('src/app/carousel/carousel.module').then(m => m.CarouselModule) },
-    { path: 'card', loadChildren: () => import('src/app/card/card.module').then(m => m.CardModule) },
-    { path: 'range', loadChildren: () => import('src/app/range/range.module').then(m => m.RangeModule) },
-    { path: 'autocomplete', loadChildren: () => import('src/app/autocomplete/autocomplete.module').then(m => m.AutocompleteModule) },
-  ]},
+  {
+    path: 'info',
+    component: RouterDispatcherComponent,
+    children: [
+      { path: '', redirectTo: 'welcome', pathMatch: 'full' },
+      { path: 'welcome', loadChildren: () => import('src/app/welcome/welcome.module').then(m => m.WelcomeModule) },
+    ],
+  },
+  {
+    path: 'componenti',
+    component: RouterDispatcherComponent,
+    children: [
+      { path: '', redirectTo: 'badge', pathMatch: 'full' },
+      { path: 'avatar', loadChildren: () => import('src/app/avatar/avatar.module').then(m => m.AvatarModule) },
+      { path: 'badge', loadChildren: () => import('src/app/badge/badge.module').then(m => m.BadgeModule) },
+      { path: 'checkbox', loadChildren: () => import('src/app/checkbox/checkbox.module').then(m => m.CheckboxModule) },
+      { path: 'progress-bar', loadChildren: () => import('src/app/progress-bar/progress-bar.module').then(m => m.ProgressBarModule) },
+      { path: 'toggle', loadChildren: () => import('src/app/toggle/toggle.module').then(m => m.ToggleModule) },
+      { path: 'popover', loadChildren: () => import('src/app/popover/popover.module').then(m => m.PopoverModule) },
+      { path: 'radio', loadChildren: () => import('src/app/radio/radio.module').then(m => m.RadioModule) },
+      { path: 'breadcrumb', loadChildren: () => import('src/app/breadcrumb/breadcrumb.module').then(m => m.BreadcrumbModule) },
+      { path: 'tabs', loadChildren: () => import('src/app/tabs/tabs.module').then(m => m.TabsModule) },
+      { path: 'tooltip', loadChildren: () => import('src/app/tooltip/tooltip.module').then(m => m.TooltipModule) },
+      { path: 'button', loadChildren: () => import('src/app/button/button.module').then(m => m.ButtonModule) },
+      { path: 'header', loadChildren: () => import('src/app/header/header.module').then(m => m.HeaderModule) },
+      { path: 'collapse', loadChildren: () => import('src/app/collapse/collapse.module').then(m => m.CollapseModule) },
+      { path: 'form-input', loadChildren: () => import('src/app/form-input/form-input.module').then(m => m.FormInputModule) },
+      { path: 'dropdown', loadChildren: () => import('src/app/dropdown/dropdown.module').then(m => m.DropdownModule) },
+      { path: 'back-button', loadChildren: () => import('src/app/back-button/back-button.module').then(m => m.BackButtonModule) },
+      { path: 'back-to-top', loadChildren: () => import('src/app/back-to-top/back-to-top.module').then(m => m.BackToTopModule) },
+      { path: 'chip', loadChildren: () => import('src/app/chip/chip.module').then(m => m.ChipModule) },
+      { path: 'forward', loadChildren: () => import('src/app/forward/forward.module').then(m => m.ForwardModule) },
+      { path: 'dimmer', loadChildren: () => import('src/app/dimmer/dimmer.module').then(m => m.DimmerModule) },
+      { path: 'list', loadChildren: () => import('src/app/list/list.module').then(m => m.ListModule) },
+      { path: 'megamenu', loadChildren: () => import('src/app/megamenu/megamenu.module').then(m => m.MegamenuModule) },
+      { path: 'callout', loadChildren: () => import('src/app/callout/callout.module').then(m => m.CalloutModule) },
+      { path: 'upload', loadChildren: () => import('src/app/upload/upload.module').then(m => m.UploadModule) },
+      { path: 'steppers', loadChildren: () => import('src/app/steppers/steppers.module').then(m => m.SteppersModule) },
+      { path: 'select', loadChildren: () => import('src/app/select/select.module').then(m => m.SelectModule) },
+      { path: 'notifications', loadChildren: () => import('src/app/notifications/notifications.module').then(m => m.NotificationsModule) },
+      { path: 'rating', loadChildren: () => import('src/app/rating/rating.module').then(m => m.RatingModule) },
+      { path: 'pagination', loadChildren: () => import('src/app/pagination/pagination.module').then(m => m.PaginationModule) },
+      { path: 'table', loadChildren: () => import('src/app/table/table.module').then(m => m.TableModule) },
+      { path: 'textarea', loadChildren: () => import('src/app/textarea/textarea.module').then(m => m.TextareaModule) },
+      { path: 'alert', loadChildren: () => import('src/app/alert/alert.module').then(m => m.AlertModule) },
+      { path: 'spinner', loadChildren: () => import('src/app/spinner/spinner.module').then(m => m.SpinnerModule) },
+      { path: 'icon', loadChildren: () => import('src/app/icon/icon.module').then(m => m.IconModule) },
+      { path: 'error-page', loadChildren: () => import('src/app/error-page/error-page.module').then(m => m.ErrorPageModule) },
+      { path: 'modal', loadChildren: () => import('src/app/modal/modal.module').then(m => m.ModalModule) },
+      {
+        path: 'language-switcher',
+        loadChildren: () => import('src/app/language-switcher/language-switcher.module').then(m => m.LanguageSwitcherModule),
+      },
+      {
+        path: 'password-input',
+        loadChildren: () => import('src/app/password-input/password-input.module').then(m => m.PasswordInputModule),
+      },
+      { path: 'carousel', loadChildren: () => import('src/app/carousel/carousel.module').then(m => m.CarouselModule) },
+      { path: 'card', loadChildren: () => import('src/app/card/card.module').then(m => m.CardModule) },
+      { path: 'range', loadChildren: () => import('src/app/range/range.module').then(m => m.RangeModule) },
+      { path: 'autocomplete', loadChildren: () => import('src/app/autocomplete/autocomplete.module').then(m => m.AutocompleteModule) },
+    ],
+  },
   { path: 'error/not-found', component: ItErrorPageComponent, data: { errorCode: 404 } },
   { path: 'error/forbidden', component: ItErrorPageComponent, data: { errorCode: 403 } },
   { path: 'error/server-error', component: ItErrorPageComponent, data: { errorCode: 500 } },
-  { path: '**', redirectTo: 'error/not-found'  }
+  { path: '**', redirectTo: 'error/not-found' },
 ];
 
 @NgModule({
-  imports: [RouterModule.forRoot(routes, {useHash: true, scrollPositionRestoration: 'enabled'})],
-  exports: [RouterModule]
+  imports: [RouterModule.forRoot(routes, { useHash: true, scrollPositionRestoration: 'enabled' })],
+  exports: [RouterModule],
 })
-export class AppRoutingModule { }
+export class AppRoutingModule {}