Add second-level-show helper CSS class

Problem/Motivation

We have a need for some variations for the horizontal secondary menu. For example on a home page when there is no second-level menus expanded by default we would like to not show an empty vertical gap that is reserving space for the second-level menu on hover or click.

Proposed resolution

For now, let us just add a new helper CSS class second-level-show which is attached to div.navbar-wrapper. We can use this CSS class than for custom CSS rules.

However, we do not want to add a full solution for now. There are various possible custom cases and it's hard to predict them properly in code with some general clean solution. Let us shift this complexity to custom themes, so for front page custom theme could add custom CSS similar to this:

.path-front {
  .page__header {
    z-index: 1;
  }

  .navbar-wrapper.second-level-expanded {
    padding-bottom: 0;

    &.second-level-show::after {
      @include media-responsive-breakpoint-up() {
        background-color: $header-bg;
      }
    }
  }
}

And setting SASS variable `$navbar-2nd-bg: transparent`.

This will eliminate the vertical second level gap and show the second level menu with a proper background color.