Mainnavigation: no default setting for an active item

mfranzke commented 2 years ago

We should mention that the site authors / component consumers would actively need to mark up one of the main navigation items as the active one as we couldn't determine it or even "just" define the first one as the default if none is defined, as this is totally up to the page or application it is integrated in.

We should even also mention the following aspects, that our developer colleagues would benefit from (at least for understanding the solution):

Example Angular: Set routerLink as directive on <db-link>. You'll retrieve the Active State out of the RouterLinkActive directive:

<db-mainnavigation>
  <db-link routerLink="/home" routerLinkActive #rlaHome="routerLinkActive" [current]="{ 'page' : rlaHome.isActive }">
    Startseite
  </db-link>
  <db-link routerLink="/about" routerLinkActive #rlaAbout="routerLinkActive" [current]="{ 'page' : rlaAbout.isActive }">
    About
  </db-link>
</db-mainnavigation>

d-koppenhagen commented 2 years ago

I tried it out in Vue with a concrete implementation:

<router-link to="" custom v-slot="{ navigate, isActive }">
  <db-link
    @click="navigate"
    rel="index"
    :current="isActive ? 'page' : undefined"
  >
    Home
  </db-link>
</router-link>

This should work but it doesn't. It seems like there is a problem with the reactivity. The value for current is calculated dynamically as a result of the current router state. This value seems not to be updated in the underlying web component.

For comparison - this will work:

<router-link to="" custom v-slot="{ navigate, isActive }">
  <db-link
    @click="navigate"
    rel="index"
    current="page"
  >
    Home
  </db-link>
</router-link>

mfranzke commented 1 year ago

I tried it out in Vue with a concrete implementation:
<router-link to="" custom v-slot="{ navigate, isActive }">
  <db-link
    @click="navigate"
    rel="index"
    :current="isActive ? 'page' : undefined"
  >
    Home
  </db-link>
</router-link>
This should work but it doesn't. It seems like there is a problem with the reactivity. The value for current is calculated dynamically as a result of the current router state. This value seems not to be updated in the underlying web component.

For comparison - this will work:
<router-link to="" custom v-slot="{ navigate, isActive }">
  <db-link
    @click="navigate"
    rel="index"
    current="page"
  >
    Home
  </db-link>
</router-link>

Do you have the chance to provide this somehow ? I'm mainly wondering because there should be a reactivity even on the Vue output targets. Alternatively let's align tomorrow directly. Sadly we don't have the mainnavigation within our showcases, but at least the Sidenavi (which works differently, even though I wasn't able to reproduce the problem, so it's much easier to have a look at it together).

d-koppenhagen commented 1 year ago

Okay, the problem seems not to occur anymore. At least with version 0.17.0 of DB UI Elements I couldn't verify it.

https://stackblitz.com/edit/db-ui-elements-db-link

db-ui / elements

Mainnavigation: no default setting for an active item #394