Header misses burger menu

[micartey]

Scale Version

3.0.0-beta.136

Framework and version

Angular + NodeJs

Code Reproduction

https://telekom.github.io/scale/?path=/docs/components-telekom-brand-header-navigation--standard-header#subcomponents

<scale-telekom-header>
  <scale-telekom-nav-list slot="main-nav" aria-label="Main Navigation Links">
    <scale-telekom-nav-item aria-label="Topic One">
      <a href="#">Topic One</a>
    </scale-telekom-nav-item>
    <!-- … -->
  </scale-telekom-nav-list>
</scale-telekom-header>

Additional context

Resize the window and see that Topic One disappears while no burger menu is being added

[felix-ico]

Hi @micartey, that is expected behavior as below a certain breakpoint the navigation is only available via the mobile burger menu (top right side of the header). In order to set that you need to add some markup that handles the mobile flyout and its contents.

Maybe the code examples here will be helpful to you as a reference https://github.com/telekom/scale/blob/main/examples/telekom-header-samples/

[micartey]

Hi @felix-ico,
thank you for responding and providing me with the source code.

By the example I referenced in the issue, I was expecting this behavior by default considering that the examples that show the snippets all have the mobile burger menu without providing a mobile-nav-flyout.

Apart from that, is there a straightforward way to hide the burger menu on above the certain breakpoint you mentioned? As of now, the website shows the burger menu the whole time which works for now, but is not necessarily nice.

[felix-ico]

Hey @micartey

By the example I referenced in the issue, I was expecting this behavior by default considering that the examples that show the snippets all have the mobile burger menu without providing a mobile-nav-flyout.

If you mean the examples shown on the storybook page https://telekom.github.io/scale/?path=/docs/components-telekom-brand-header-navigation--standard-header - the decision made at the time of release was to NOT provide a full code snippet in the storybook page because that would have made the documentation page too bloated due to large amount of markup needed for a "complete" header...that's why we added the full examples in the repository itself to provide some guidance.

to hide the burger menu above a certain breakpoint we use css in the examples (https://github.com/telekom/scale/blob/main/examples/telekom-header-samples/standard/styles.css)

  @media screen and (min-width: 1040px) {
    .burger-item {
      display: none;
    }
  }

[micartey]

Hi @felix-ico,

Thank you for your kind response.
The issue is resolved and can be closed now.

I would, however, recommend updating the storybook and adding the media query by default. I can imagine this being an issue many people might have.

Another enhancement might be an automatic burger-item. The current solution forced me to add all nav-items twice. There might be a better way to do this 🙂

[felix-ico]

@micartey thanks for the advice, i am guessing it was built this way to allow more flexibility: some people may want to have a burger menu even on desktop, or different menu setups/structures on desktop vs mobile. Anyway if this same issue comes up for more users we'll push an update