feat: styling changes for main navigation with CMS components + docum…

…entation
intershop · Mar 11, 2024 · b3c3e92 · b3c3e92
1 parent e2e7aea
commit b3c3e92
Show file tree

Hide file tree

Showing 5 changed files with 56 additions and 24 deletions.
diff --git a/docs/concepts/cms-integration.md b/docs/concepts/cms-integration.md
@@ -109,6 +109,24 @@ The [`PreviewInterceptor`](../../src/app/core/interceptors/preview.interceptor.t
 
 To end a preview session and to delete the saved `PreviewContextID` in the browser session storage, use the _Finish Preview_ button of the _Design View_ configuration.
 
+## Navigation CMS Components
+
+With the Intershop PWA release 5.1.0 three new CMS rendering components are introduced that can be used to extend the main navigation.
+
+| Component           | Description                                                                                  |
+| ------------------- | -------------------------------------------------------------------------------------------- |
+| Navigation Category | Renders a main navigation entry based on the selected category with optional sub navigation. |
+| Navigation Link     | Renders a main navigation entry to the given link with optional sub navigation.              |
+| Navigation Page     | Renders a main navigation entry based on the selected page with optional sub navigation.     |
+
+The according content models, to configure these new components in the ICM backoffice, are part of `icm-as-customization-headless:1.7.0` (ICM 11.9.0).
+They are all assignable to the _Header - Navigation_ include and can be combined to extend the main navigation.
+It would also be possible to completely configure the main navigation with these components without the default main navigation by only rendering the `<ish-lazy-content-include includeId="include.header.navigation.pagelet2-Include"/>` in the `HeaderNavigationComponent`.
+To fulfill such a requirement the source code needs to be adapted accordingly.
+
+All three component allow the configuration of additional freestyle HTML that is rendered within the sub navigation layer.
+The root element as well as the depth of the sub navigation tree is configurable for the _Navigation Category_ and the _Navigation Page_ component.
+
 ## Integration with an External CMS
 
 Since the Intershop PWA can integrate any other REST API in addition to the ICM REST API, it should not be a problem to integrate an external 3rd party CMS that provides an own REST API, instead of using the integrated ICM CMS.

diff --git a/docs/guides/migrations.md b/docs/guides/migrations.md
@@ -23,6 +23,9 @@ In addition the `'messageToMerchant'` environment feature toggle option needs to
 To address an Angular hydration issue ([#1585](https://github.com/intershop/intershop-pwa/pull/1585)) the `header` component rendering was changed and in addition a `HeaderType` was introduced for the standard header types `['simple', 'error', 'checkout']`.
 If in a project other header types are used these header types and the rendering needs to be adapted accordingly.
 
+With the introduction of the new [navigation CMS components](../concepts/cms-integration.md#navigation-cms-components) it became necessary to adapt the main navigation styling.
+The styling can no longer rely on child selectors (`>`) since the CMS manged components introduce a lot of additional HTML tags around the styling relevant `li` tags.
+
 ## From 4.2 to 5.0
 
 Starting with the Intershop PWA 5.0 we develop and test against an Intershop Commerce Management 11 server.

diff --git a/src/app/shell/header/header-navigation/header-navigation.component.html b/src/app/shell/header/header-navigation/header-navigation.component.html
@@ -2,10 +2,10 @@
 <!-- eslint-disable @angular-eslint/template/click-events-have-key-events -->
 <ul class="navbar-nav main-navigation-list">
   <li
-    *ngFor="let category of categories$ | async"
+    *ngFor="let category of categories$ | async; first as isFirst"
     #subMenu
     class="dropdown"
-    [ngClass]="{ open: isOpened(category.uniqueId) }"
+    [ngClass]="{ open: isOpened(category.uniqueId), first: isFirst }"
     (mouseenter)="subMenuShow(subMenu)"
     (mouseleave)="subMenuHide(subMenu)"
     (click)="subMenuHide(subMenu)"

diff --git a/src/app/shell/header/header-navigation/header-navigation.component.spec.ts b/src/app/shell/header/header-navigation/header-navigation.component.spec.ts
@@ -45,7 +45,7 @@ describe('Header Navigation Component', () => {
     expect(() => fixture.detectChanges()).not.toThrow();
     expect(element).toMatchInlineSnapshot(`
       <ul class="navbar-nav main-navigation-list">
-        <li class="dropdown">
+        <li class="dropdown first">
           <a
             class="main-navigation-link"
             ng-reflect-router-link="/cat/A"

diff --git a/src/styles/components/header/main-navigation.scss b/src/styles/components/header/main-navigation.scss
@@ -23,6 +23,7 @@
       }
 
       li {
+        float: none;
         list-style: none;
 
         &.open ul {
@@ -49,23 +50,24 @@
           float: left;
           width: calc(100% - #{$toggler-width});
           padding: $space-default ($grid-gutter-width * 0.5) !important;
-          font-size: $font-size-menu-item-mobile;
+          font-size: $font-size-navbar-item-mobile;
           line-height: 1.3125rem;
+          color: $text-color-inverse;
+          background: $CORPORATE-PRIMARY;
+          border-bottom: $border-width-default solid $border-color-default;
         }
-      }
 
-      li.open {
-        .category-level1,
-        .category-level2,
-        .category-level3,
-        .category-level4 {
-          width: 100%;
-          padding: 0;
-          margin: 0;
+        &.open {
+          .category-level1,
+          .category-level2,
+          .category-level3,
+          .category-level4 {
+            width: 100%;
+            padding: 0;
+            margin: 0;
+          }
         }
-      }
 
-      > li {
         &.dropdown {
           padding: 0;
           background: none;
@@ -74,13 +76,6 @@
         ul > li {
           float: none;
         }
-        // Navbar Items
-        > a {
-          font-size: $font-size-navbar-item-mobile;
-          color: $text-color-inverse;
-          background: $CORPORATE-PRIMARY;
-          border-bottom: $border-width-default solid $border-color-default;
-        }
       }
       // Menu Items
       .category-level1,
@@ -89,7 +84,9 @@
       .category-level4 {
         > li > a {
           font-size: $font-size-sub-menu-item-mobile;
+          color: $text-color-primary;
           text-transform: capitalize;
+          background-color: $color-inverse;
           border-bottom: $border-width-default solid $border-color-light;
         }
 
@@ -139,19 +136,22 @@
   }
 
   .main-navigation-list {
+    display: block;
+
     a {
       font-size: $font-size-navbar-item;
       color: $text-color-primary;
     }
 
-    > li {
+    li {
       line-height: 40px;
 
       &.dropdown {
         position: static;
+        float: left;
         padding: 0 10px;
 
-        &:first-child {
+        &.first {
           padding-left: 0;
         }
 
@@ -226,6 +226,7 @@
 
             ul {
               padding: 0;
+              padding-left: $space-default;
               margin: 0;
             }
 
@@ -284,4 +285,14 @@
   @include mobile-navigation;
 }
 
+.sub-navigation-content {
+  padding: 0 !important;
+  margin: 0 !important;
+  clear: both;
+
+  @media (max-width: $screen-xs-max) {
+    padding: $space-default !important;
+  }
+}
+
 /* purgecss end ignore */