HIDA - Helmholtz Information and Data Science Academy

Header: Header HEIBRiDS 

<header class="header">
    <div class="header__inner">
        <div class="header__inner__bg-shape"></div>
        <div class="header__logo"><a class="header__logo__a" href="#"><img class="header__logo__img" src="../images/logos/heibrids-logo.png" alt="Alternativ-Text" /></a></div>
        <nav class="header__nav"><button class="header__nav__item" type="button">Netzwerk</button><button class="header__nav__item" type="button">Course Catalog</button><button class="header__nav__item" type="button">Schools</button><button class="header__nav__item" type="button">HIDA</button></nav><button class="header__toggle__button" id="menu-toggle" type="button" aria-expanded="false" aria-controls="menu"><svg class="icon icon--menu" viewBox="0 0 200 200" role="presentation">
                <use xlink:href="#icon-menu"></use>
            </svg></button>
        <nav class="header__menu" id="menu" aria-labelledby="menu-toggle"><button class="header__menu__toggle__button" type="button" aria-expanded="true" aria-controls="menu"><svg class="icon icon--close" viewBox="0 0 200 200" role="presentation">
                    <use xlink:href="#icon-close"></use>
                </svg></button>
            <div class="header__menu__inner">
                <nav class="header__menu__nav">
                    <div class="header__menu__nav__top">
                        <ul class="header__menu__nav__ul">
                            <li class="header__menu__nav__ul__li"><button class="header__menu__nav__item" type="button"><svg class="icon icon--arrow-right" viewBox="0 0 200 200" role="presentation">
                                        <use xlink:href="#icon-arrow-right"></use>
                                    </svg><span class="header__menu__nav__item__text">Netzwerk</span></button>
                                <ul class="header__menu__nav__ul__ul">
                                    <li class="header__menu__nav__ul__ul__li"><a class="header__menu__nav__subitem header__menu__nav__subitem--highlight" href="#"><svg class="icon icon--arrow-right" viewBox="0 0 200 200" role="presentation">
                                                <use xlink:href="#icon-arrow-right"></use>
                                            </svg><span class="header__menu__nav__subitem__text">Lorem ipsum dolor</span></a></li>
                                    <li class="header__menu__nav__ul__ul__li"><a class="header__menu__nav__subitem" href="#"><svg class="icon icon--arrow-right" viewBox="0 0 200 200" role="presentation">
                                                <use xlink:href="#icon-arrow-right"></use>
                                            </svg><span class="header__menu__nav__subitem__text">Vero consetetur</span></a></li>
                                    <li class="header__menu__nav__ul__ul__li"><a class="header__menu__nav__subitem" href="#"><svg class="icon icon--arrow-right" viewBox="0 0 200 200" role="presentation">
                                                <use xlink:href="#icon-arrow-right"></use>
                                            </svg><span class="header__menu__nav__subitem__text">Lorem ipsum dolor sit amet</span></a></li>
                                    <li class="header__menu__nav__ul__ul__li"><a class="header__menu__nav__subitem" href="#"><svg class="icon icon--arrow-right" viewBox="0 0 200 200" role="presentation">
                                                <use xlink:href="#icon-arrow-right"></use>
                                            </svg><span class="header__menu__nav__subitem__text">Lorem ipsum dolor</span></a></li>
                                    <li class="header__menu__nav__ul__ul__li"><a class="header__menu__nav__subitem" href="#"><svg class="icon icon--arrow-right" viewBox="0 0 200 200" role="presentation">
                                                <use xlink:href="#icon-arrow-right"></use>
                                            </svg><span class="header__menu__nav__subitem__text">Accusam tempor ipsum</span></a></li>
                                    <li class="header__menu__nav__ul__ul__li"><a class="header__menu__nav__subitem" href="#"><svg class="icon icon--arrow-right" viewBox="0 0 200 200" role="presentation">
                                                <use xlink:href="#icon-arrow-right"></use>
                                            </svg><span class="header__menu__nav__subitem__text">Lorem ipsum dolor</span></a></li>
                                    <li class="header__menu__nav__ul__ul__li"><a class="header__menu__nav__subitem" href="#"><svg class="icon icon--arrow-right" viewBox="0 0 200 200" role="presentation">
                                                <use xlink:href="#icon-arrow-right"></use>
                                            </svg><span class="header__menu__nav__subitem__text">Consetetur</span></a></li>
                                    <li class="header__menu__nav__ul__ul__li"><a class="header__menu__nav__subitem" href="#"><svg class="icon icon--arrow-right" viewBox="0 0 200 200" role="presentation">
                                                <use xlink:href="#icon-arrow-right"></use>
                                            </svg><span class="header__menu__nav__subitem__text">Accusam tempor</span></a></li>
                                    <li class="header__menu__nav__ul__ul__li"><a class="header__menu__nav__subitem" href="#"><svg class="icon icon--arrow-right" viewBox="0 0 200 200" role="presentation">
                                                <use xlink:href="#icon-arrow-right"></use>
                                            </svg><span class="header__menu__nav__subitem__text">Lorem ipsum</span></a></li>
                                </ul>
                            </li>
                            <li class="header__menu__nav__ul__li"><button class="header__menu__nav__item" type="button"><svg class="icon icon--arrow-right" viewBox="0 0 200 200" role="presentation">
                                        <use xlink:href="#icon-arrow-right"></use>
                                    </svg><span class="header__menu__nav__item__text">Course Catalog</span></button>
                                <ul class="header__menu__nav__ul__ul">
                                    <li class="header__menu__nav__ul__ul__li"><a class="header__menu__nav__subitem header__menu__nav__subitem--highlight" href="#"><svg class="icon icon--arrow-right" viewBox="0 0 200 200" role="presentation">
                                                <use xlink:href="#icon-arrow-right"></use>
                                            </svg><span class="header__menu__nav__subitem__text">Vero consetetur</span></a></li>
                                    <li class="header__menu__nav__ul__ul__li"><a class="header__menu__nav__subitem" href="#"><svg class="icon icon--arrow-right" viewBox="0 0 200 200" role="presentation">
                                                <use xlink:href="#icon-arrow-right"></use>
                                            </svg><span class="header__menu__nav__subitem__text">Lorem ipsum dolor</span></a></li>
                                    <li class="header__menu__nav__ul__ul__li"><a class="header__menu__nav__subitem" href="#"><svg class="icon icon--arrow-right" viewBox="0 0 200 200" role="presentation">
                                                <use xlink:href="#icon-arrow-right"></use>
                                            </svg><span class="header__menu__nav__subitem__text">Accusam tempor ipsum</span></a></li>
                                    <li class="header__menu__nav__ul__ul__li"><a class="header__menu__nav__subitem" href="#"><svg class="icon icon--arrow-right" viewBox="0 0 200 200" role="presentation">
                                                <use xlink:href="#icon-arrow-right"></use>
                                            </svg><span class="header__menu__nav__subitem__text">Lorem ipsum dolor</span></a></li>
                                    <li class="header__menu__nav__ul__ul__li"><a class="header__menu__nav__subitem" href="#"><svg class="icon icon--arrow-right" viewBox="0 0 200 200" role="presentation">
                                                <use xlink:href="#icon-arrow-right"></use>
                                            </svg><span class="header__menu__nav__subitem__text">Accusam tempor</span></a></li>
                                    <li class="header__menu__nav__ul__ul__li"><a class="header__menu__nav__subitem" href="#"><svg class="icon icon--arrow-right" viewBox="0 0 200 200" role="presentation">
                                                <use xlink:href="#icon-arrow-right"></use>
                                            </svg><span class="header__menu__nav__subitem__text">Lorem ipsum dolor sit amet</span></a></li>
                                    <li class="header__menu__nav__ul__ul__li"><a class="header__menu__nav__subitem" href="#"><svg class="icon icon--arrow-right" viewBox="0 0 200 200" role="presentation">
                                                <use xlink:href="#icon-arrow-right"></use>
                                            </svg><span class="header__menu__nav__subitem__text">Consetetur</span></a></li>
                                    <li class="header__menu__nav__ul__ul__li"><a class="header__menu__nav__subitem" href="#"><svg class="icon icon--arrow-right" viewBox="0 0 200 200" role="presentation">
                                                <use xlink:href="#icon-arrow-right"></use>
                                            </svg><span class="header__menu__nav__subitem__text">Lorem ipsum</span></a></li>
                                    <li class="header__menu__nav__ul__ul__li"><a class="header__menu__nav__subitem" href="#"><svg class="icon icon--arrow-right" viewBox="0 0 200 200" role="presentation">
                                                <use xlink:href="#icon-arrow-right"></use>
                                            </svg><span class="header__menu__nav__subitem__text">Lorem ipsum dolor</span></a></li>
                                </ul>
                            </li>
                            <li class="header__menu__nav__ul__li"><button class="header__menu__nav__item" type="button"><svg class="icon icon--arrow-right" viewBox="0 0 200 200" role="presentation">
                                        <use xlink:href="#icon-arrow-right"></use>
                                    </svg><span class="header__menu__nav__item__text">Schools</span></button>
                                <ul class="header__menu__nav__ul__ul">
                                    <li class="header__menu__nav__ul__ul__li"><a class="header__menu__nav__subitem header__menu__nav__subitem--highlight" href="#"><svg class="icon icon--arrow-right" viewBox="0 0 200 200" role="presentation">
                                                <use xlink:href="#icon-arrow-right"></use>
                                            </svg><span class="header__menu__nav__subitem__text">Consetetur</span></a></li>
                                    <li class="header__menu__nav__ul__ul__li"><a class="header__menu__nav__subitem" href="#"><svg class="icon icon--arrow-right" viewBox="0 0 200 200" role="presentation">
                                                <use xlink:href="#icon-arrow-right"></use>
                                            </svg><span class="header__menu__nav__subitem__text">Accusam tempor</span></a></li>
                                    <li class="header__menu__nav__ul__ul__li"><a class="header__menu__nav__subitem" href="#"><svg class="icon icon--arrow-right" viewBox="0 0 200 200" role="presentation">
                                                <use xlink:href="#icon-arrow-right"></use>
                                            </svg><span class="header__menu__nav__subitem__text">Lorem ipsum dolor sit amet</span></a></li>
                                    <li class="header__menu__nav__ul__ul__li"><a class="header__menu__nav__subitem" href="#"><svg class="icon icon--arrow-right" viewBox="0 0 200 200" role="presentation">
                                                <use xlink:href="#icon-arrow-right"></use>
                                            </svg><span class="header__menu__nav__subitem__text">Lorem ipsum dolor</span></a></li>
                                    <li class="header__menu__nav__ul__ul__li"><a class="header__menu__nav__subitem" href="#"><svg class="icon icon--arrow-right" viewBox="0 0 200 200" role="presentation">
                                                <use xlink:href="#icon-arrow-right"></use>
                                            </svg><span class="header__menu__nav__subitem__text">Accusam tempor ipsum</span></a></li>
                                    <li class="header__menu__nav__ul__ul__li"><a class="header__menu__nav__subitem" href="#"><svg class="icon icon--arrow-right" viewBox="0 0 200 200" role="presentation">
                                                <use xlink:href="#icon-arrow-right"></use>
                                            </svg><span class="header__menu__nav__subitem__text">Vero consetetur</span></a></li>
                                    <li class="header__menu__nav__ul__ul__li"><a class="header__menu__nav__subitem" href="#"><svg class="icon icon--arrow-right" viewBox="0 0 200 200" role="presentation">
                                                <use xlink:href="#icon-arrow-right"></use>
                                            </svg><span class="header__menu__nav__subitem__text">Lorem ipsum dolor</span></a></li>
                                    <li class="header__menu__nav__ul__ul__li"><a class="header__menu__nav__subitem" href="#"><svg class="icon icon--arrow-right" viewBox="0 0 200 200" role="presentation">
                                                <use xlink:href="#icon-arrow-right"></use>
                                            </svg><span class="header__menu__nav__subitem__text">Lorem ipsum dolor</span></a></li>
                                    <li class="header__menu__nav__ul__ul__li"><a class="header__menu__nav__subitem" href="#"><svg class="icon icon--arrow-right" viewBox="0 0 200 200" role="presentation">
                                                <use xlink:href="#icon-arrow-right"></use>
                                            </svg><span class="header__menu__nav__subitem__text">Lorem ipsum</span></a></li>
                                    <li class="header__menu__nav__ul__ul__li"><a class="header__menu__nav__subitem" href="#"><svg class="icon icon--arrow-right" viewBox="0 0 200 200" role="presentation">
                                                <use xlink:href="#icon-arrow-right"></use>
                                            </svg><span class="header__menu__nav__subitem__text">Consetetur</span></a></li>
                                    <li class="header__menu__nav__ul__ul__li"><a class="header__menu__nav__subitem" href="#"><svg class="icon icon--arrow-right" viewBox="0 0 200 200" role="presentation">
                                                <use xlink:href="#icon-arrow-right"></use>
                                            </svg><span class="header__menu__nav__subitem__text">Accusam tempor</span></a></li>
                                    <li class="header__menu__nav__ul__ul__li"><a class="header__menu__nav__subitem" href="#"><svg class="icon icon--arrow-right" viewBox="0 0 200 200" role="presentation">
                                                <use xlink:href="#icon-arrow-right"></use>
                                            </svg><span class="header__menu__nav__subitem__text">Lorem ipsum dolor sit amet</span></a></li>
                                    <li class="header__menu__nav__ul__ul__li"><a class="header__menu__nav__subitem" href="#"><svg class="icon icon--arrow-right" viewBox="0 0 200 200" role="presentation">
                                                <use xlink:href="#icon-arrow-right"></use>
                                            </svg><span class="header__menu__nav__subitem__text">Lorem ipsum dolor</span></a></li>
                                    <li class="header__menu__nav__ul__ul__li"><a class="header__menu__nav__subitem" href="#"><svg class="icon icon--arrow-right" viewBox="0 0 200 200" role="presentation">
                                                <use xlink:href="#icon-arrow-right"></use>
                                            </svg><span class="header__menu__nav__subitem__text">Accusam tempor ipsum</span></a></li>
                                    <li class="header__menu__nav__ul__ul__li"><a class="header__menu__nav__subitem" href="#"><svg class="icon icon--arrow-right" viewBox="0 0 200 200" role="presentation">
                                                <use xlink:href="#icon-arrow-right"></use>
                                            </svg><span class="header__menu__nav__subitem__text">Vero consetetur</span></a></li>
                                    <li class="header__menu__nav__ul__ul__li"><a class="header__menu__nav__subitem" href="#"><svg class="icon icon--arrow-right" viewBox="0 0 200 200" role="presentation">
                                                <use xlink:href="#icon-arrow-right"></use>
                                            </svg><span class="header__menu__nav__subitem__text">Lorem ipsum dolor</span></a></li>
                                    <li class="header__menu__nav__ul__ul__li"><a class="header__menu__nav__subitem" href="#"><svg class="icon icon--arrow-right" viewBox="0 0 200 200" role="presentation">
                                                <use xlink:href="#icon-arrow-right"></use>
                                            </svg><span class="header__menu__nav__subitem__text">Lorem ipsum dolor</span></a></li>
                                    <li class="header__menu__nav__ul__ul__li"><a class="header__menu__nav__subitem" href="#"><svg class="icon icon--arrow-right" viewBox="0 0 200 200" role="presentation">
                                                <use xlink:href="#icon-arrow-right"></use>
                                            </svg><span class="header__menu__nav__subitem__text">Lorem ipsum</span></a></li>
                                </ul>
                            </li>
                            <li class="header__menu__nav__ul__li header__menu__nav__ul__li--active"><button class="header__menu__nav__item" type="button"><svg class="icon icon--arrow-right" viewBox="0 0 200 200" role="presentation">
                                        <use xlink:href="#icon-arrow-right"></use>
                                    </svg><span class="header__menu__nav__item__text">HIDA</span></button>
                                <ul class="header__menu__nav__ul__ul">
                                    <li class="header__menu__nav__ul__ul__li"><a class="header__menu__nav__subitem header__menu__nav__subitem--highlight" href="#"><svg class="icon icon--arrow-right" viewBox="0 0 200 200" role="presentation">
                                                <use xlink:href="#icon-arrow-right"></use>
                                            </svg><span class="header__menu__nav__subitem__text">Unsere Mission</span></a></li>
                                    <li class="header__menu__nav__ul__ul__li"><a class="header__menu__nav__subitem" href="#"><svg class="icon icon--arrow-right" viewBox="0 0 200 200" role="presentation">
                                                <use xlink:href="#icon-arrow-right"></use>
                                            </svg><span class="header__menu__nav__subitem__text">Daten &amp; Fakten</span></a></li>
                                    <li class="header__menu__nav__ul__ul__li"><a class="header__menu__nav__subitem" href="#"><svg class="icon icon--arrow-right" viewBox="0 0 200 200" role="presentation">
                                                <use xlink:href="#icon-arrow-right"></use>
                                            </svg><span class="header__menu__nav__subitem__text">Organisation</span></a></li>
                                    <li class="header__menu__nav__ul__ul__li"><a class="header__menu__nav__subitem" href="#"><svg class="icon icon--arrow-right" viewBox="0 0 200 200" role="presentation">
                                                <use xlink:href="#icon-arrow-right"></use>
                                            </svg><span class="header__menu__nav__subitem__text">Inkubator Information &amp; Data Science</span></a></li>
                                    <li class="header__menu__nav__ul__ul__li"><a class="header__menu__nav__subitem" href="#"><svg class="icon icon--arrow-right" viewBox="0 0 200 200" role="presentation">
                                                <use xlink:href="#icon-arrow-right"></use>
                                            </svg><span class="header__menu__nav__subitem__text">Ansprechpartner*innen</span></a></li>
                                    <li class="header__menu__nav__ul__ul__li"><a class="header__menu__nav__subitem" href="#"><svg class="icon icon--arrow-right" viewBox="0 0 200 200" role="presentation">
                                                <use xlink:href="#icon-arrow-right"></use>
                                            </svg><span class="header__menu__nav__subitem__text">Kontakt</span></a></li>
                                    <li class="header__menu__nav__ul__ul__li"><a class="header__menu__nav__subitem" href="#"><svg class="icon icon--arrow-right" viewBox="0 0 200 200" role="presentation">
                                                <use xlink:href="#icon-arrow-right"></use>
                                            </svg><span class="header__menu__nav__subitem__text">Aus unserer Forschung</span></a></li>
                                    <li class="header__menu__nav__ul__ul__li"><a class="header__menu__nav__subitem" href="#"><svg class="icon icon--arrow-right" viewBox="0 0 200 200" role="presentation">
                                                <use xlink:href="#icon-arrow-right"></use>
                                            </svg><span class="header__menu__nav__subitem__text">Zauber der Daten</span></a></li>
                                    <li class="header__menu__nav__ul__ul__li"><a class="header__menu__nav__subitem" href="#"><svg class="icon icon--arrow-right" viewBox="0 0 200 200" role="presentation">
                                                <use xlink:href="#icon-arrow-right"></use>
                                            </svg><span class="header__menu__nav__subitem__text">Newsletter</span></a></li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                    <div class="header__menu__nav__bottom"></div>
                </nav>
            </div>
        </nav>
    </div>
</header>
 
#{tag || 'header'}.header(
  class=classNames(
    small && 'header--small',
    language && 'header--multi-lang'
  )
)&attributes(attr)
  .header__inner
    .header__inner__bg-shape

    //- Logo
    .header__logo
      a.header__logo__a(href=logo.href)
        img.header__logo__img(src=logo.src, alt=logo.alt)

    //- Nav
    nav.header__nav
      each item, index in items
        if item.href
          a.header__nav__item(href=item.href) #{item.title}
        else
          button.header__nav__item(type='button') #{item.title}

    //- Toggle menu
    button#menu-toggle.header__toggle__button(type='button', aria-expanded='false', aria-controls='menu')
      +include('@icon', { icon: 'menu' })

    //- Language
    if language
      a.header__language(href=language.href, lang=language.lang, hreflang=language.hreflang)
        +include('@icon', { icon: language.icon })

    //- Menu
    nav#menu.header__menu(aria-labelledby='menu-toggle')
      if language
        a.header__language(href=language.href, lang=language.lang, hreflang=language.hreflang)
          +include('@icon', { icon: language.icon })
      button.header__menu__toggle__button(type='button', aria-expanded='true', aria-controls='menu')
        +include('@icon', { icon: 'close' })
      .header__menu__inner
        nav.header__menu__nav
          .header__menu__nav__top
            ul.header__menu__nav__ul
              each item, index in items
                li.header__menu__nav__ul__li(
                  class=item.active && 'header__menu__nav__ul__li--active',
                )
                  button.header__menu__nav__item(type='button')
                    +include('@icon', { icon: 'arrow-right' })
                    span.header__menu__nav__item__text #{item.title}
                  if item.items
                    ul.header__menu__nav__ul__ul
                      each subItem in item.items
                        li.header__menu__nav__ul__ul__li
                          if subItem.isHighlight
                            a.header__menu__nav__subitem.header__menu__nav__subitem--highlight(href=subItem.href)
                              +include('@icon', { icon: 'arrow-right' })
                              span.header__menu__nav__subitem__text #{subItem.title}
                          else
                            a.header__menu__nav__subitem(href=subItem.href)
                              +include('@icon', { icon: 'arrow-right' })
                              span.header__menu__nav__subitem__text #{subItem.title}
          .header__menu__nav__bottom
 
{
  "logo": {
    "href": "#",
    "src": "../images/logos/heibrids-logo.png",
    "alt": "Alternativ-Text"
  },
  "language": null,
  "items": [
    {
      "title": "Netzwerk",
      "items": [
        {
          "title": "Lorem ipsum dolor",
          "href": "#",
          "isHighlight": true
        },
        {
          "title": "Vero consetetur",
          "href": "#"
        },
        {
          "title": "Lorem ipsum dolor sit amet",
          "href": "#"
        },
        {
          "title": "Lorem ipsum dolor",
          "href": "#"
        },
        {
          "title": "Accusam tempor ipsum",
          "href": "#"
        },
        {
          "title": "Lorem ipsum dolor",
          "href": "#"
        },
        {
          "title": "Consetetur",
          "href": "#"
        },
        {
          "title": "Accusam tempor",
          "href": "#"
        },
        {
          "title": "Lorem ipsum",
          "href": "#"
        }
      ]
    },
    {
      "title": "Course Catalog",
      "items": [
        {
          "title": "Vero consetetur",
          "href": "#",
          "isHighlight": true
        },
        {
          "title": "Lorem ipsum dolor",
          "href": "#"
        },
        {
          "title": "Accusam tempor ipsum",
          "href": "#"
        },
        {
          "title": "Lorem ipsum dolor",
          "href": "#"
        },
        {
          "title": "Accusam tempor",
          "href": "#"
        },
        {
          "title": "Lorem ipsum dolor sit amet",
          "href": "#"
        },
        {
          "title": "Consetetur",
          "href": "#"
        },
        {
          "title": "Lorem ipsum",
          "href": "#"
        },
        {
          "title": "Lorem ipsum dolor",
          "href": "#"
        }
      ]
    },
    {
      "title": "Schools",
      "items": [
        {
          "title": "Consetetur",
          "href": "#",
          "isHighlight": true
        },
        {
          "title": "Accusam tempor",
          "href": "#"
        },
        {
          "title": "Lorem ipsum dolor sit amet",
          "href": "#"
        },
        {
          "title": "Lorem ipsum dolor",
          "href": "#"
        },
        {
          "title": "Accusam tempor ipsum",
          "href": "#"
        },
        {
          "title": "Vero consetetur",
          "href": "#"
        },
        {
          "title": "Lorem ipsum dolor",
          "href": "#"
        },
        {
          "title": "Lorem ipsum dolor",
          "href": "#"
        },
        {
          "title": "Lorem ipsum",
          "href": "#"
        },
        {
          "title": "Consetetur",
          "href": "#"
        },
        {
          "title": "Accusam tempor",
          "href": "#"
        },
        {
          "title": "Lorem ipsum dolor sit amet",
          "href": "#"
        },
        {
          "title": "Lorem ipsum dolor",
          "href": "#"
        },
        {
          "title": "Accusam tempor ipsum",
          "href": "#"
        },
        {
          "title": "Vero consetetur",
          "href": "#"
        },
        {
          "title": "Lorem ipsum dolor",
          "href": "#"
        },
        {
          "title": "Lorem ipsum dolor",
          "href": "#"
        },
        {
          "title": "Lorem ipsum",
          "href": "#"
        }
      ]
    },
    {
      "title": "HIDA",
      "active": true,
      "items": [
        {
          "title": "Unsere Mission",
          "href": "#",
          "isHighlight": true
        },
        {
          "title": "Daten & Fakten",
          "href": "#"
        },
        {
          "title": "Organisation",
          "href": "#"
        },
        {
          "title": "Inkubator Information & Data Science",
          "href": "#"
        },
        {
          "title": "Ansprechpartner*innen",
          "href": "#"
        },
        {
          "title": "Kontakt",
          "href": "#"
        },
        {
          "title": "Aus unserer Forschung",
          "href": "#"
        },
        {
          "title": "Zauber der Daten",
          "href": "#"
        },
        {
          "title": "Newsletter",
          "href": "#"
        }
      ]
    }
  ]
}
  • Content: 
    import Headroom from 'headroom.js';

const header = document.querySelector('.header');
const { body } = document;

// Headroom Js
const myElement = header;
const headroom = new Headroom(myElement, {
  offset: 0,
  tolerance: {
    up: 3,
    down: 0,
  },
  classes: {
    initial: 'header--initial',
    pinned: 'header--pinned',
    unpinned: 'header--unpinned',
    top: 'header--top',
    notTop: 'header--not-top',
    bottom: 'header--bottom',
    notBottom: 'header--not-bottom',
  },
});

document.querySelectorAll('.header').forEach(() => {
  headroom.init();
});

// Menu
if (header) {
  const bodyMenuOpen = 'body--menu-open';
  const headerMenuOpen = 'header--menu-open';
  const menu = document.querySelector('.header__menu');
  const buttonOpenMenu = document.querySelector('.header__toggle__button');
  const buttonCloseMenu = document.querySelector('.header__menu__toggle__button');
  const menuHeightTarget = document.querySelector('.header__menu__nav__ul');
  let menuCurrentLevel2 = null;

  // Update container height
  const updateLevel2ContainerHeight = () => {
    if (menuCurrentLevel2) {
      const { height } = menuCurrentLevel2.getBoundingClientRect();
      menuHeightTarget.style.minHeight = `${height}px`;
    } else {
      menuHeightTarget.style.height = null;
    }
  };
  window.addEventListener('resize', updateLevel2ContainerHeight);

  // Open menu
  const openMenu = (event) => {
    body.classList.add(bodyMenuOpen);
    header.classList.add(headerMenuOpen);
    buttonOpenMenu.setAttribute('aria-expanded', body.classList.contains(bodyMenuOpen));
    event.stopPropagation();
    return false;
  };
  buttonOpenMenu.addEventListener('click', openMenu);

  // Close menu
  const closeMenu = () => {
    body.classList.remove(bodyMenuOpen);
    header.classList.remove(headerMenuOpen);
    buttonCloseMenu.removeAttribute('aria-expanded', body.classList.contains(bodyMenuOpen));
  };
  buttonCloseMenu.addEventListener('click', closeMenu);

  // Close menu in click outside
  const clickOutsideMenu = (event) => {
    const isClickInside = menu.contains(event.target);
    if (!isClickInside) {
      body.classList.remove(bodyMenuOpen);
      header.classList.remove(headerMenuOpen);
      buttonCloseMenu.removeAttribute('aria-expanded', body.classList.contains(bodyMenuOpen));
    }
  };
  document.addEventListener('click', clickOutsideMenu);

  // Toggle active submenu
  const menuItems = document.querySelectorAll('button.header__menu__nav__item');
  const menuListItems = document.querySelectorAll('.header__menu__nav__ul__li');
  const menuListItemActive = 'header__menu__nav__ul__li--active';
  const openActiveSubmenu = (event) => {
    const active = document.querySelector('.header__menu__nav__ul__li--active');
    if (active) {
      active.classList.remove(menuListItemActive);
    }
    event.currentTarget.parentElement.classList.add(menuListItemActive);
    menuCurrentLevel2 = event.currentTarget.closest('li').querySelector('ul');
    updateLevel2ContainerHeight();
  };
  menuItems.forEach(button => button.addEventListener('click', openActiveSubmenu));

  // Jump from header nav to submenu
  const navItems = document.querySelectorAll('.header__nav__item');
  const openSubmenu = (event) => {
    if (event.target.tagName !== 'BUTTON') {
      return;
    }
    openMenu(event);
    const position = Array.from(navItems).indexOf(event.target);
    menuListItems.forEach(menulistItem => menulistItem.classList.remove(menuListItemActive));
    menuListItems[position].classList.add(menuListItemActive);
    menuCurrentLevel2 = menuListItems[position].querySelector('ul');
    updateLevel2ContainerHeight();
  };
  navItems.forEach(button => button.addEventListener('click', openSubmenu));
}
  • URL: /components/raw/header/header.js
  • Filesystem Path: src/components/organisms/header/header.js
  • Size: 3.8 KB
  • Content: 
    @keyframes fadein {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes fadeout {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    z-index: -1;
  }
}

.header {
  animation-duration: 0.2s;
  animation-fill-mode: both;
  left: 0;
  min-width: 32rem;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: z('header');

}

.header--pinned:not(.header--top) {
  animation-name: fadein;
  backface-visibility: visible;
  position: fixed;
}

.header--unpinned {
  animation-name: fadeout;
  backface-visibility: visible;
}

.header__inner {
  height: 6.8rem;
  margin: 0 auto;
  max-width: $page-max-width;
  position: relative;

  &::before {
    background: $color-dark;
    content: '';
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    transition: opacity 0.2s;
    width: 100%;
  }

  @include mq($from: header) {
    height: 12.5rem;
  }
}

.header__inner__bg-shape {
  opacity: 0;
  transition: opacity 0.2s;

  &::after,
  &::before {
    bottom: -2.4rem;
    content: '';
    display: block;
    height: 2.5rem;
    position: absolute;

    @include mq($from: header) {
      bottom: -3.4rem;
      height: 3.4rem;
    }
  }

  &::after {
    background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 34"><defs/><path fill="' + $color-dark + '" d="M-695.5-24h1440V.14H50.04a20 20 0 0 0-14.21 5.92l-21.8 22.01A20 20 0 0 1-.18 34H-695.5v-58z"/></svg>');
    left: calc(50% - 2rem);
    width: 4rem;

    @include mq($from: header) {
      left: calc(50% - 2.5rem);
      width: 5rem;
    }
  }

  &::before {
    background: $color-dark;
    left: 0;
    width: calc(50% - 2rem);

    @include mq($from: header) {
      width: calc(50% - 2.5rem);
    }
  }
}

.header--small,
.header--pinned:not(.header--top) {
  .header__inner::before,
  .header__inner__bg-shape {
    opacity: 1;
  }
}

.header__logo {
  left: 1.5rem;
  position: absolute;
  top: 2rem;
  width: 25.5rem;

  @include mq($from: m) {
    left: 3rem;
    width: 32rem;
  }

  @include mq($from: header) {
    left: 9rem;
    top: 4.9rem;
    width: 40.4rem;
  }
}

.header__toggle__button {
  color: #fff;
  position: absolute;
  right: 1.5rem;
  top: 2.1rem;
  transition: color 0.2s;

  @media(hover: hover) and (pointer: fine) {
    &:hover {
      color: $color-green;
    }
  }

  &:focus {
    color: $color-green;
  }

  .icon {
    height: 2.7rem;
    width: 2.7rem;
  }

  @include mq($from: m) {
    right: 3rem;
  }

  @include mq($from: header) {
    display: none;
  }
}

.header__language,
.header__language .icon {
  height: 3.8rem;
  width: 3.8rem;
}

.header__inner > .header__language {
  color: #fff;
  display: none;
  position: absolute;
  right: 6.3rem;
  top: 1.4rem;
  transition: color 0.2s;

  @media(hover: hover) and (pointer: fine) {
    &:hover {
      color: $color-green;
    }
  }

  &:focus {
    color: $color-green;
  }

  @include mq($from: s) {
    display: block;
  }

  @include mq($from: m) {
    right: 8.3rem;
  }

  @include mq($from: header) {
    top: 4.5rem;
  }
}

.header__menu > .header__language {
  color: $color-dark;
  position: absolute;
  right: 8.3rem;
  top: 2rem;
  transition: color 0.2s;
  z-index: 2;

  @media(hover: hover) and (pointer: fine) {
    &:hover {
      color: #fff;
    }
  }

  &:focus {
    color: #fff;
  }
}

.header__nav {
  position: absolute;
  right: 3rem;
  top: 5.5rem;

  @include mq($until: header) {
    display: none;
  }
}

.header--multi-lang .header__nav {
  right: 12.2rem;
}

.header__nav__item {
  color: #fff;
  display: inline-block;
  font-size: 2.2rem;
  font-weight: $font-weight-demi;
  margin-right: 6rem;
  transition: color 0.2s;

  @media(hover: hover) and (pointer: fine) {
    &:hover {
      color: $color-green;
    }
  }

  &:focus {
    color: $color-green;
  }
}

// Menu
.header__menu {
  color: $color-dark;
  height: 100vh;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0;
  transition: opacity 0.2s;
  width: 100%;
  z-index: 1;

  @include mq($until: l) {
    background: $color-blue-light;
  }

  @include mq($from: l) {
    &::before {
      background: $color-blue-light;
      content: '';
      height: 9rem;
      left: 0;
      position: absolute;
      right: 0;
      top: 0;
    }
  }

  @include mq($from: header) {
    width: 105rem;
  }
}

.header--menu-open .header__menu {
  opacity: 1;
  pointer-events: all;
}

.header__menu__inner {
  bottom: 0;
  left: 0;
  -webkit-overflow-scrolling: touch;
  overflow-y: auto;
  position: absolute;
  right: 0;
  top: 9rem;

  @include mq($from: l) {
    top: 0;
  }
}

.header__menu__nav {
  @include mq($from: l) {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    min-height: 100vh;
  }
}

.header__menu__nav__top {
  padding: 0 3rem;
  position: relative;
  z-index: 1;

  @include mq($from: s) {
    padding: 0 5rem;
  }

  @include mq($from: l) {
    background: $color-blue-light;
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 9rem 9rem 0 12rem;
  }
}

.header__menu__nav__bottom {
  display: none;

  @include mq($from: l) {
    display: block;
    height: 12rem;
    position: relative;

    &::before,
    &::after {
      bottom: 0;
      content: '';
      display: block;
      height: 12rem;
      position: absolute;
      z-index: -1;
    }

    &::before {
      background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 243 245"><defs/><g fill="none" fill-rule="evenodd" transform="translate(-1)"><path fill="' + $color-blue-light + '" d="M224.69 0h19.53v18.74h-19.53z"/><path fill="' + $color-blue + '" d="M0 0h224.23a20 20 0 0 1 20 20v226"/></g></svg>');
      background-position: bottom left;
      background-repeat: no-repeat;
      left: 0;
      width: 12rem;
    }

    &::after {
      background: $color-blue-light;
      right: 0;
      width: calc(100% - 11.8rem);
    }
  }
}

.header__menu__toggle__button {
  position: absolute;
  right: 2rem;
  top: 2rem;
  transition: color 0.2s;
  z-index: 2;

  @media(hover: hover) and (pointer: fine) {
    &:hover {
      color: #fff;
    }
  }

  &:focus {
    color: #fff;
  }

  .icon {
    height: 4.2rem;
    width: 4.2rem;
  }
}

.header__menu__nav__ul {
  list-style: none;
  padding: 0;
  position: relative;

  @include mq($until: m) {
    height: auto !important;
  }
}

.header__menu__nav__ul__li:last-child {
  margin-bottom: 13rem;

  @include mq($from: m) {
    margin-bottom: 3rem;
  }
}

.header__menu__nav__ul__ul {
  display: none;
  list-style: none;
  padding: 0 0 2rem 3.4rem;

  @include mq($from: l) {
    padding: 1rem 0 0;
  }
}

.header__menu__nav__ul__li--active .header__menu__nav__ul__ul {
  display: block;

  @include mq($from: l) {
    left: 50%;
    position: absolute;
    top: 0;
  }
}

// Items
.header__menu__nav__item,
.header__menu__nav__subitem,
.header__menu__nav__subitem--highlight {
  color: $color-dark;
  display: inline-block;
  font-weight: $font-weight-demi;
  line-height: 1.4;
  position: relative;
  transition: color 0.2s;
}

.header__menu__nav__item {
  font-size: 2.8rem;
  padding: 1rem 0;

  @include mq($from: m) {
    font-size: 3.2rem;
  }

  @include mq($from: l) {
    font-size: 3.8rem;
    padding: 1.7rem 0;
  }
}

.header__menu__nav__subitem {
  font-size: 2.1rem;
  padding: 0.7rem 0;
  transition: color 0.2s, padding-left 0.2s;

  @include mq($from: m) {
    font-size: 2.5rem;
    padding: 1.2rem 0;
  }
}

.header__menu__nav__subitem--highlight {
  font-weight: $font-weight-bold;
}

@media(hover: hover) and (pointer: fine) {
  .header__menu__nav__item:hover,
  .header__menu__nav__subitem:hover {
    color: #fff;
  }
}

.header__menu__nav__ul__li--active .header__menu__nav__item,
.header__menu__nav__item:focus,
.header__menu__nav__subitem:focus {
  color: #fff;
}

.header__menu__nav__item .icon,
.header__menu__nav__subitem .icon {
  color: #fff;
  height: 1.8rem;
  left: -3.4rem;
  opacity: 0;
  position: absolute;
  transition: left 0.2s, opacity 0.2s;
  width: 1.8rem;
}

@media(hover: hover) and (pointer: fine) {
  .header__menu__nav__subitem:hover {
    padding-left: 3.4rem;
  }
}

.header__menu__nav__ul__li--active .header__menu__nav__item,
.header__menu__nav__subitem:focus {
  padding-left: 3.4rem;
}

.header__menu__nav__item .icon {
  top: 2rem;

  @include mq($from: m) {
    top: 2.4rem;
  }

  @include mq($from: l) {
    top: 3.6rem;
  }
}

.header__menu__nav__subitem .icon {
  top: 1.1rem;

  @include mq($from: m) {
    top: 2rem;
  }
}

@media(hover: hover) and (pointer: fine) {
  .header__menu__nav__subitem:hover .icon {
    left: 0;
    opacity: 1;
  }
}

.header__menu__nav__ul__li--active .header__menu__nav__item .icon,
.header__menu__nav__subitem:focus .icon {
  left: 0;
  opacity: 1;
}
  • URL: /components/raw/header/header.scss
  • Filesystem Path: src/components/organisms/header/header.scss
  • Size: 8.8 KB

There are no notes for this item.