Toggle About & Legal

Siemens iX
1

I want to open About & Legal from header and menu has to be hidden. In that case width calculates wrongly, and I get menu-overlay background not for the whole page

if set in “menu-overlay” class - “width:100vw” instead of width: calc(100vw - 3.25rem) it works, but that element in shadow root, so it’s impossible to make that change
image
so it can be solved somehow?

2

Hello @olena.mokhnatska,

Thank you for reaching out.
Could you please explain your use case in bit more detail?
If you want the menu to be hidden permanently, you could set the application’s responsive viewport breakpoint to ‘sm’.

3

Thanks for the answer, Lukas

I have a login page, where menu is already hidden, but when I open “about & legal” from header button blur effect in background does not cover the whole page

image
image1970×403 42.8 KB

4

Could you please share a code snippet that showcases how you are using the menu-about?

5

image
image830×499 20.6 KB

this is from header component, I take #menu from menuComponent and then use #menu to toggleAbout from there. Menu component:
<ix-application
[breakpoints]="
(hiddenMenu$ | async) && (notMandatoryLogin$ | async) ? [‘sm’] : [‘md’]
"
(expandChange)=“eventFromExpandMenu($event)”

<ix-menu
  [expand]="mixedObsMenu$ | async"
  [class.menu-out-of-bound]="mandatoryLogin$ | async"
  #menu
>
  @for (item of navigationItems; track item) {
    <ng-container *minVersion="item.minVersion">
      @if (item.nestedItems) {
        <ix-menu-category
          icon="{{ item.icon }}"
          label="{{ item.name | transloco }}"
          attr.aria-label="{{ item.name | transloco }}"
          *hasPermission="
            item.requiredPermissions;
            atLeastOne: item.permissionAtLeastOne
          "
          aria-level="0"
        >
          @for (nestedItem of item.nestedItems; track nestedItem) {
            <ng-container *minVersion="nestedItem.minVersion">
              <ix-menu-item
                routerLink="{{ nestedItem.routerLink }}"
                label="{{ nestedItem.name | transloco }}"
                attr.aria-label="{{ nestedItem.name | transloco }}"
                *hasPermission="
                  nestedItem.requiredPermissions;
                  atLeastOne: nestedItem.permissionAtLeastOne
                "
                aria-level="1"
                [queryParams]="
                  nestedItem.queryParams ? nestedItem.queryParams : []
                "
                [active]="setActiveLink(nestedItem.routerLink)"
              ></ix-menu-item>
            </ng-container>
          }
        </ix-menu-category>
      } @else {
        <ix-menu-item
          routerLink="{{ item.routerLink }}"
          [active]="setActiveLink(item.routerLink)"
          [slot]="item.slot"
          icon="{{ item.icon }}"
          *hasPermission="
            item.requiredPermissions;
            atLeastOne: item.permissionAtLeastOne
          "
          label="{{ item.name | transloco }}"
          attr.aria-label="{{ item.name | transloco }}"
          aria-level="0"
        ></ix-menu-item>
      }
    </ng-container>
  }
  <ix-menu-about
    attr.aria-label="{{ 'about.name' | transloco }}"
    label="{{ 'about.name' | transloco }}"
    #about
  >
    <s7-about></s7-about>
  </ix-menu-about>
</ix-menu>