Fix/main menu (#1614)

telekom · Feb 23, 2023 · 7a417ff · 7a417ff
1 parent 88e0cd2
commit 7a417ff
Show file tree

Hide file tree

Showing 5 changed files with 8 additions and 3 deletions.
diff --git a/packages/components/src/components/telekom/app-header/app-header.css b/packages/components/src/components/telekom/app-header/app-header.css
@@ -276,7 +276,7 @@ scale-app-header {
   }
 
   .header scale-nav-main:first-child li {
-    padding-left: 0;
+    margin-left: 0;
   }
   .header *[slot='menu-main'],
   .header .main-navigation {

diff --git a/packages/components/src/components/telekom/app-header/app-header.tsx b/packages/components/src/components/telekom/app-header/app-header.tsx
@@ -240,6 +240,7 @@ export class Header {
               href={item.href}
               active={isActive(item)}
               megaMenuVisible={this.visibleMegaMenu === item.id}
+              innerId={item.id}
               onMouseEnter={() => {
                 this.visibleMegaMenu = item.children ? item.id : null;
               }}

diff --git a/packages/components/src/components/telekom/nav-main/nav-main.css b/packages/components/src/components/telekom/nav-main/nav-main.css
@@ -22,8 +22,8 @@ scale-nav-main {
 
 .main-navigation__item {
   height: 100%;
-  padding-left: var(--spacing-x);
-  padding-right: var(--spacing-x);
+  margin-left: var(--spacing-x);
+  margin-right: var(--spacing-x);
 }
 .main-navigation__item:has(a[href]) {
   cursor: pointer;

diff --git a/packages/components/src/components/telekom/nav-main/nav-main.tsx b/packages/components/src/components/telekom/nav-main/nav-main.tsx
@@ -35,6 +35,8 @@ export class NavMain {
   @Prop() name: string;
   /** (optional) target value */
   @Prop() target?: string = '_self';
+  /** (optional) inner element id */
+  @Prop() innerId?: string;
 
   @Prop() clickLink: any;
   hasPopup: boolean;
@@ -76,6 +78,7 @@ export class NavMain {
             aria-current={this.active || this.isActive ? 'true' : 'false'}
             aria-haspopup={this.hasPopup ? 'true' : 'false'}
             onClick={this.clickLink}
+            id={this.innerId}
           >
             <span class="main-navigation__item-link-text">{this.name}</span>
             {(this.active || this.isActive) && (

diff --git a/packages/components/src/components/telekom/nav-main/readme.md b/packages/components/src/components/telekom/nav-main/readme.md
@@ -12,6 +12,7 @@
 | `active`            | `active`               | (optional) if this item is active       | `boolean` | `undefined`             |
 | `clickLink`         | `click-link`           |                                         | `any`     | `undefined`             |
 | `href`              | `href`                 | (optional) href value                   | `string`  | `'javascript:void(0);'` |
+| `innerId`           | `inner-id`             | (optional) inner element id             | `string`  | `undefined`             |
 | `isActive`          | `is-active`            |                                         | `boolean` | `undefined`             |
 | `isMegaMenuVisible` | `is-mega-menu-visible` |                                         | `boolean` | `false`                 |
 | `megaMenuVisible`   | `mega-menu-visible`    | (optional) if this mega-menu is visible | `boolean` | `false`                 |