DBNavigation incorrect size and highlighting on single depth sub-navigation

[nfellinger]

Which generators are impacted?

• All
• HTML
• React
• Angular
• Vue
• Web components
• Power Apps

Reproduction case

Copying the DBNavigation example, the component displays as expected with two sub-navigation layers.

<db-navigation *dbNavigation>
    <db-navigation-item>
      <ng-container sub-navigation>
        <db-navigation-item>
          <ng-container *dbNavigationContent>
            Sub-Navi-Item 1
          </ng-container>
          <ng-container sub-navigation>
            <db-navigation-item>
              <ng-container *dbNavigationContent>
                <a href="#" aria-current="page">Sub-Sub-Navi-Item 1</a>
              </ng-container>
            </db-navigation-item>
            <db-navigation-item>
              <ng-container *dbNavigationContent>
                <a href="#">Sub-Sub-Navi-Item 2</a>
              </ng-container>
            </db-navigation-item>
          </ng-container>
        </db-navigation-item>
        <db-navigation-item>
          <ng-container *dbNavigationContent>
            <a href="#">Sub-Navi-Item 2</a>
          </ng-container>
        </db-navigation-item>
      </ng-container>
      <ng-container *dbNavigationContent> Navi-Item 1</ng-container>
    </db-navigation-item>
    <db-navigation-item icon="x_placeholder">
      <ng-container *dbNavigationContent>
        <a href="#">Navi-Item 2</a>
      </ng-container>
    </db-navigation-item>
    <db-navigation-item [disabled]="true">
      <ng-container *dbNavigationContent>
        <a href="#">Navi-Item 3</a>
      </ng-container>
    </db-navigation-item>
  </db-navigation>

The Problem arises when reducing the sub-navigation layers from two to one.

<db-navigation *dbNavigation>
    <db-navigation-item>
      <ng-container sub-navigation>
        <db-navigation-item>
          <ng-container *dbNavigationContent>
            <a href="#" aria-current="page">Sub-Navi-Item 1</a>
          </ng-container>
        </db-navigation-item>
        <db-navigation-item>
          <ng-container *dbNavigationContent>
            <a href="#">Sub-Navi-Item 2</a>
          </ng-container>
        </db-navigation-item>
      </ng-container>
      <ng-container *dbNavigationContent> Navi-Item 1</ng-container>
    </db-navigation-item>
    <db-navigation-item icon="x_placeholder">
      <ng-container *dbNavigationContent>
        <a href="#">Navi-Item 2</a>
      </ng-container>
    </db-navigation-item>
    <db-navigation-item [disabled]="true">
      <ng-container *dbNavigationContent>
        <a href="#">Navi-Item 3</a>
      </ng-container>
    </db-navigation-item>
  </db-navigation>

As visible in the screenshot, the highlighting for the mouse over has two layers on the first navigation item. This also results in a height increase of the element which enlargens the size of the navigation bar which is not desirable.

I haven't tested this problem with other generators, so i don't now if this is an Angular specific problem.

Expected Behaviour

The DBNavigation should be displayd with the same styling as in the first screenshot with one reduced layer.

Screenshots

No response

Browser version

Chrome

Add any other context about the problem here.

No response

[nfellinger]

As it turns out, the order of the <ng-container *dbNavigationContent> Navi-Item 1</ng-container> has something to do with the problem. In the documentation it is ordered as the last child of its parent db-navigation-item element. When putting it as the first element, the nav elements are displayed correctly.

<db-navigation *dbNavigation>
    <db-navigation-item>
      <ng-container sub-navigation>
        <ng-container *dbNavigationContent> Navi-Item 1</ng-container>
        <db-navigation-item>
          <ng-container *dbNavigationContent>
            <a href="#" aria-current="page">Sub-Navi-Item 1</a>
          </ng-container>
        </db-navigation-item>
        <db-navigation-item>
          <ng-container *dbNavigationContent>
            <a href="#">Sub-Navi-Item 2</a>
          </ng-container>
        </db-navigation-item>
      </ng-container>
    </db-navigation-item>
    <db-navigation-item icon="x_placeholder">
      <ng-container *dbNavigationContent>
        <a href="#">Navi-Item 2</a>
      </ng-container>
    </db-navigation-item>
    <db-navigation-item [disabled]="true">
      <ng-container *dbNavigationContent>
        <a href="#">Navi-Item 3</a>
      </ng-container>
    </db-navigation-item>
  </db-navigation>

Either the documentation should be updated, or the implementation in a way that makes the order of elements irrelevant.

[michaelmkraus]

@nfellinger We’re currently redesigning the navigation. As part of this, we’re reviewing all open navigation issues. We’ve taken note of your feedback and will revisit it once the redesign is finished.