Skip to content

Commit

Permalink
feat: use ng containers for megamenu
Browse files Browse the repository at this point in the history
  • Loading branch information
@astagi
astagi committed Feb 7, 2024
1 parent ab22947 commit baa8513
Show file tree
Hide file tree
Showing 2 changed files with 56 additions and 76 deletions.
78 changes: 3 additions & 75 deletions projects/design-angular-kit/src/lib/components/navigation/megamenu/megamenu.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,89 +4,17 @@
<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">
<div class="ratio ratio-21x9 lightgrey-bg-a1 mb-4 rounded">
<figure class="figure">
<img
src="https://via.placeholder.com/560x240/ebebeb/808080/?text=Immagine"
class="figure-img img-fluid rounded"
alt="Segnaposto" />
</figure>
</div>
<p>Testo utile a fornire una descrizione dei contenuti della sezione <strong>megamenu 1</strong>.</p>
<ng-content select="[megamenuLeftZone]"></ng-content>
</div>
</div>
</div>
</div>
<div class="col-12 col-lg-8">
<div class="it-heading-link-wrapper">
<a class="it-heading-link" href="#"
><svg role="img" class="icon icon-sm me-2 mb-1">
<use href="/bootstrap-italia/dist/svg/sprites.svg#it-arrow-right-triangle"></use>
</svg>
<span>Esplora la sezione megamenu 1</span>
</a>
<ng-content select="[megamenuHeadingLink]"></ng-content>
</div>
<div class="row">
<div class="col-12 col-lg-6">
<div class="link-list-wrapper">
<ul class="link-list">
<li>
<a class="list-item dropdown-item" href="#">
<svg role="img" class="icon icon-sm me-2">
<use href="/bootstrap-italia/dist/svg/sprites.svg#it-arrow-right-triangle"></use>
</svg>
<span>Link lista 1</span>
</a>
</li>
<li>
<a class="list-item dropdown-item" href="#">
<svg role="img" class="icon icon-sm me-2">
<use href="/bootstrap-italia/dist/svg/sprites.svg#it-arrow-right-triangle"></use>
</svg>
<span>Link lista 2</span>
</a>
</li>
<li>
<a class="list-item dropdown-item" href="#">
<svg role="img" class="icon icon-sm me-2">
<use href="/bootstrap-italia/dist/svg/sprites.svg#it-arrow-right-triangle"></use>
</svg>
<span>Link lista 3</span>
</a>
</li>
</ul>
</div>
</div>
<div class="col-12 col-lg-6">
<div class="link-list-wrapper">
<ul class="link-list">
<li>
<a class="list-item dropdown-item" href="#">
<svg role="img" class="icon icon-sm me-2">
<use href="/bootstrap-italia/dist/svg/sprites.svg#it-arrow-right-triangle"></use>
</svg>
<span>Link lista 4</span>
</a>
</li>
<li>
<a class="list-item dropdown-item" href="#">
<svg role="img" class="icon icon-sm me-2">
<use href="/bootstrap-italia/dist/svg/sprites.svg#it-arrow-right-triangle"></use>
</svg>
<span>Link lista 5</span>
</a>
</li>
<li>
<a class="list-item dropdown-item" href="#">
<svg role="img" class="icon icon-sm me-2">
<use href="/bootstrap-italia/dist/svg/sprites.svg#it-arrow-right-triangle"></use>
</svg>
<span>Link lista 6</span>
</a>
</li>
</ul>
</div>
</div>
<ng-content select="[megamenuLinkList]"></ng-content>
</div>
</div>
</div>
Expand Down
54 changes: 53 additions & 1 deletion src/app/header/header-example/header-example.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,59 @@ <h3>Componente Header</h3>
<it-dropdown mode="nav" [megamenu]="true">
<span button>Megamenu</span>
<ng-container list>
<it-megamenu></it-megamenu>
<it-megamenu>
<ng-container megamenuLeftZone>
<div class="ratio ratio-21x9 lightgrey-bg-a1 mb-4 rounded">
<figure class="figure">
<img
src="https://via.placeholder.com/560x240/ebebeb/808080/?text=Immagine"
class="figure-img img-fluid rounded"
alt="Segnaposto" />
</figure>
</div>
<p>Testo utile a fornire una descrizione dei contenuti della sezione <strong>megamenu 1</strong>.</p>
</ng-container>
<ng-container megamenuHeadingLink>
<a class="it-heading-link" href="#"
><it-icon name="arrow-right-triangle"></it-icon>
<span>Esplora la sezione megamenu 1</span>
</a>
</ng-container>
<ng-container megamenuLinkList>
<div class="col-12 col-lg-6">
<it-list linkList="true">
<it-list-item href="#" externalLink="true">
<it-icon name="arrow-right-triangle"></it-icon>
<span>Link lista 1</span>
</it-list-item>
<it-list-item href="#" externalLink="true">
<it-icon name="arrow-right-triangle"></it-icon>
<span>Link lista 2</span>
</it-list-item>
<it-list-item href="#" externalLink="true">
<it-icon name="arrow-right-triangle"></it-icon>
<span>Link lista 3</span>
</it-list-item>
</it-list>
</div>
<div class="col-12 col-lg-6">
<it-list linkList="true">
<it-list-item href="#" externalLink="true">
<it-icon name="arrow-right-triangle"></it-icon>
<span>Link lista 4</span>
</it-list-item>
<it-list-item href="#" externalLink="true">
<it-icon name="arrow-right-triangle"></it-icon>
<span>Link lista 5</span>
</it-list-item>
<it-list-item href="#" externalLink="true">
<it-icon name="arrow-right-triangle"></it-icon>
<span>Link lista 6</span>
</it-list-item>
</it-list>
</div>
</ng-container>
</it-megamenu>
</ng-container>
</it-dropdown>
</it-navbar-item>
Expand Down

0 comments on commit baa8513

Please sign in to comment.