Den Haag Design System

Header 

<header class="header" id="header-wrapper">
    <div class="container">
        <nav class="header__content">
            <div class="header__brand">
                <a href="/">
                    <img src="/img/3_fullimage_logo-mijndenhaag-small.png" alt="MijnDenHaag">
                </a>
            </div>
            <div class="header__mobile-menu">
                <button type="button" class="button button--primary">Menu</button>

            </div>
            <div class="header__collapsible-navs">
                <div class="header__collapsible-navs-content">
                    <div class="header__nav-item">U bent ingelogd als K. Jan</div>
                    <div class="header__nav-item">
                        <a href="" class="button--link">Uitloggen</a>

                    </div>
                    <div class="header__nav-list">
                        <div class="header__nav-item">
                            <a href="" class="button--link"><abbr title="English">EN</abbr></a>

                        </div>
                        <div class="header__nav-item header__nav-item--active">
                            <abbr title="Nederlands" class="button button--link">NL</abbr>
                        </div>
                        <div class="header__nav-item">
                            <a href="" class="button--link"><abbr title="Francais">FR</abbr></a>

                        </div>
                    </div>
                </div>
            </div>
        </nav>
    </div>
</header>
 
<header class="header" id="header-wrapper">
  <div class="container">
    <nav class="header__content">
      <div class="header__brand">
        <a href="/">
          <img src="/img/3_fullimage_logo-mijndenhaag-small.png" alt="MijnDenHaag">
        </a>
      </div>
      <div class="header__mobile-menu">
        {{render '@button' mobileMenu}}
      </div>
      <div class="header__collapsible-navs">
        <div class="header__collapsible-navs-content">
          <div class="header__nav-item">U bent ingelogd als {{user}}</div>
          <div class="header__nav-item">
            {{ render '@button--link' logout }}
          </div>
          <div class="header__nav-list">
            <div class="header__nav-item">
              {{ render '@button--link' language.en }}
            </div>
            <div class="header__nav-item header__nav-item--active">
              <abbr title="Nederlands" class="button button--link">NL</abbr>
            </div>
            <div class="header__nav-item">
              {{ render '@button--link' language.fr }}
            </div>
          </div>
        </div>
      </div>
    </nav>
  </div>
</header>
 
{
  "mobileMenu": {
    "modifier": "button--primary",
    "text": "Menu"
  },
  "user": "K. Jan",
  "logout": {
    "modifier": "button--link",
    "text": "Uitloggen"
  },
  "language": {
    "en": {
      "modifier": "button--link",
      "text": "<abbr title=\"English\">EN</abbr>",
      "hreflang": "en"
    },
    "fr": {
      "modifier": "button--link",
      "text": "<abbr title=\"Francais\">FR</abbr>",
      "hreflang": "fr"
    }
  },
  "navLinks": [
    {
      "isList": null,
      "rootContainerClassName": "sitewidepages",
      "content": "U bent ingelogd als K. Jan"
    },
    {
      "isList": null,
      "rootContainerClassName": "sitewidepages",
      "listClassName": "item",
      "content": "<a href=\"/\"><span>Uitloggen</span></a>"
    },
    {
      "isList": true,
      "rootContainerClassName": "languageswitch",
      "list": [
        {
          "label": "EN",
          "isActive": null
        },
        {
          "label": "NL",
          "isActive": true
        },
        {
          "label": "FR",
          "isActive": null
        }
      ]
    }
  ]
}
  • Content: 
    $container-outer-space: 15px;

.header {
  background-color: $white;

  $root: &;

  &::after {
    content: '';
    display: block;
    background-image: url("../img/facetten-header.svg");
    height: $space-m;
    width: 100%;
    background-position: center;
    background-size: cover;
  }

  &__collapsible-navs {
    display: none;
    width: 100%;
  }

  &__content,
  &__collapsible-navs-content,
  &__nav-list {
    display: flex;
    align-items: center;
  }

  &__collapsible-navs-content,
  &__mobile-menu,
  &__brand {
    padding: $space-s 0;
  }

  &__brand {
    padding-left: $container-outer-space;
  }

  &__mobile-menu {
    padding-right: $container-outer-space;
  }

  &__content {
    flex-wrap: wrap;
    justify-content: space-between;
  }

  &__collapsible-navs-content {
    flex-basis: 100%;
    flex-wrap: wrap;
    justify-content: space-between;
    padding-left: $container-outer-space;
    padding-right: $container-outer-space;
    background-color: $white-dark;

    > div {
      text-align: center;
      flex: 1 0 100%;
    }
  }

  &__nav-item {
    white-space: nowrap;

    &--active .button {
      font-weight: inherit;
      color: inherit;
    }
  }

  &__nav-list {
    justify-content: center;

    #{$root}__nav-item + #{$root}__nav-item::before {
      content: '\007C';
    }
  }

  @media (min-width: $tablet-landscape) {

    &::after {
      height: $space-xl;
    }

    &__collapsible-navs {
      // Should overwrite the display: none which is set by jQuery toggle.
      display: block!important;
      width: auto;
    }

    &__collapsible-navs-content {
      flex-basis: auto;
      flex-wrap: nowrap;
      justify-content: right;
      background-color: transparent;
      padding-left: 0;
      padding-right: 0;

      > div {
        flex-basis: 0;
      }
    }

    &__brand {
      padding-left: 0;
    }

    &__mobile-menu {
      display: none;
      padding-right: 0;
    }
  }
}
  • URL: /components/raw/header/_header.scss
  • Filesystem Path: src/components/01-componenten/header/_header.scss
  • Size: 2 KB
  • Content: 
    function toggleMobileMenu (menuContent) {
  menuContent.classList.toggle('collapsing');

  if (menuContent.style.maxHeight) {
    menuContent.style.maxHeight = null;
  } else {
    menuContent.style.maxHeight = menuContent.scrollHeight + 'px';
  }
}

/**
 * Main component.
 *
 * @param {Element} buttonElement
 * @param {Element} contentElement
 */
export default function Header (buttonElement, contentElement) {
  buttonElement.addEventListener('click', function () {
    toggleMobileMenu(contentElement);
  });
}
  • URL: /components/raw/header/header.js
  • Filesystem Path: src/components/01-componenten/header/header.js
  • Size: 517 Bytes

test