<div style="background: url(&#x27;https://source.unsplash.com/ThPRaw2qSwk/1444x1000&#x27;)">
    <nav-bar class="navbar navbar--transparent">
        <div class="navbar__inner navbar__inner--transparent"><a href="#main" class="navbtn navbtn--skip">Zum Inhalt springen</a>
            <div class="navbar__brand"><a href="#" class="navbar__brand-link"><img alt="inno Q" class="logo navbar__logo" src="../../assets/innoq-logo--whitered.svg"></a>
            </div>
            <input tabindex="-1" type="checkbox" id="navbar-toggle--menu" class="sr-only navbar__toggle-state navbar__toggle-state--menu-toggler">
            <input tabindex="-1" type="checkbox" id="navbar-toggle--search" class="sr-only navbar__toggle-state navbar__toggle-state--search-toggler">
            <div class="navbar__meta"><a href="#" class="navbtn navbtn--meta">Kontakt</a><a href="#" class="navbtn navbtn--meta navbtn--locale navbtn--active" title="Deutsch">de</a> |<a href="#" class="navbtn navbtn--meta navbtn--locale" title="English">en</a>
            </div>
            <div class="navbar__togglers">
                <label for="navbar-toggle--menu" aria-label="Navigation ein- oder ausblenden"><span class="navbtn navbtn--menu">Menü</span>
                </label><a href="#" class="navbtn navbtn--search" aria-label="Suche ein- oder ausblenden"><i class="icon icon-search"></i></a>
            </div>
            <nav class="navbar__primary-nav primary-nav">
                <ul class="primary-nav__list">
                    <li class="primary-nav__item"><a href="#" class="navbtn navbtn--primary navbtn--active">Leistungen</a>
                    </li>
                    <li class="primary-nav__item">
                        <div class="dropdown"><a href="#" class="navbtn navbtn--primary" data-for="dropdown__toggle--projekte">Projekte</a>
                            <input type="checkbox" role="button" aria-haspopup="true" id="dropdown__toggle--projekte" class="sr-only dropdown__checkbox">
                            <label class="dropdown__toggle dropdown__toggle--navbar" for="dropdown__toggle--projekte"><i class="icon icon-chevron-2-down dropdown__icon dropdown__icon--navbar"></i>
                                <span class="sr-only dropdown__toggle--expanded-text">ausgeklappt</span><span class="sr-only dropdown__toggle--collapsed-text">eingeklappt</span>
                            </label>
                            <div class="dropdown__list-wrapper dropdown__list-wrapper--navbar" role="menu" title="Projekte">
                                <ul class="dropdown__list">
                                    <li class="dropdown__item dropdown__item--navbar"><a href="#" class="dropdown__link dropdown__link--navbar navbtn">Softwarearchitektur und -entwicklung</a>
                                    </li>
                                    <li class="dropdown__item dropdown__item--navbar"><a href="#" class="dropdown__link dropdown__link--navbar navbtn">Strategie- und Technologieberatung</a>
                                    </li>
                                    <li class="dropdown__item dropdown__item--navbar"><a href="#" class="dropdown__link dropdown__link--navbar navbtn">Entwicklung digitaler Geschäftsmodelle</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </li>
                    <li class="primary-nav__item">
                        <div class="dropdown"><a href="#" class="navbtn navbtn--primary" data-for="dropdown__toggle--kultur">Kultur</a>
                            <input type="checkbox" role="button" aria-haspopup="true" id="dropdown__toggle--kultur" class="sr-only dropdown__checkbox">
                            <label class="dropdown__toggle dropdown__toggle--navbar" for="dropdown__toggle--kultur"><i class="icon icon-chevron-2-down dropdown__icon dropdown__icon--navbar"></i>
                                <span class="sr-only dropdown__toggle--expanded-text">ausgeklappt</span><span class="sr-only dropdown__toggle--collapsed-text">eingeklappt</span>
                            </label>
                            <div class="dropdown__list-wrapper dropdown__list-wrapper--navbar" role="menu" title="Kultur">
                                <ul class="dropdown__list">
                                    <li class="dropdown__item dropdown__item--navbar"><a href="#" class="dropdown__link dropdown__link--navbar navbtn">Strategie- und Technologieberatung</a>
                                    </li>
                                    <li class="dropdown__item dropdown__item--navbar"><a href="#" class="dropdown__link dropdown__link--navbar navbtn">Entwicklung digitaler Geschäftsmodelle</a>
                                    </li>
                                    <li class="dropdown__item dropdown__item--navbar"><a href="#" class="dropdown__link dropdown__link--navbar navbtn">Softwarearchitektur und -entwicklung</a>
                                    </li>
                                    <li class="dropdown__item dropdown__item--navbar"><a href="#" class="dropdown__link dropdown__link--navbar navbtn">Digitale Plattformen und Infrastrukturen</a>
                                    </li>
                                    <li class="dropdown__item dropdown__item--navbar"><a href="#" class="dropdown__link dropdown__link--navbar navbtn">Wissenstransfer, Coaching und Trainings</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </li>
                    <li class="primary-nav__item"><a href="#" class="navbtn navbtn--primary">Magazin</a>
                    </li>
                    <li class="primary-nav__item"><a href="#" class="navbtn navbtn--primary">Termine</a>
                    </li>
                </ul>
                <button class="navbtn navbtn--drill-up">
                    <img class="navbtn__left-icon" src="../../assets/arrow-medium-left-red.svg">Hauptmenü</button>
            </nav>
        </div>
    </nav-bar>
</div>
<div style="background: url('https://source.unsplash.com/ThPRaw2qSwk/1444x1000')">
    <nav-bar class="navbar navbar--transparent">
        <div class="navbar__inner navbar__inner--transparent">

            <a href="#main" class="navbtn navbtn--skip">Zum Inhalt springen</a>

            <div class="navbar__brand">
                <a href="#" class="navbar__brand-link">
                    <img alt="inno Q" class="logo navbar__logo" src={context.app.uri('assets/innoq-logo--whitered.svg')} />
                </a>
            </div>

            <input tabindex="-1" type="checkbox" id="navbar-toggle--menu" class="sr-only navbar__toggle-state navbar__toggle-state--menu-toggler" />
            <input tabindex="-1" type="checkbox" id="navbar-toggle--search" class="sr-only navbar__toggle-state navbar__toggle-state--search-toggler" />

            <div class="navbar__meta">
                <a href="#" class="navbtn navbtn--meta">Kontakt</a>
                <a href="#" class="navbtn navbtn--meta navbtn--locale navbtn--active" title="Deutsch">de</a> |
                <a href="#" class="navbtn navbtn--meta navbtn--locale" title="English">en</a>
            </div>

            <div class="navbar__togglers">
                <label for="navbar-toggle--menu" aria-label="Navigation ein- oder ausblenden">
                    <span class="navbtn navbtn--menu">Menü</span>
                </label>
                <a href="#" class="navbtn navbtn--search" aria-label="Suche ein- oder ausblenden">
                    <i class="icon icon-search"></i>
                </a>
            </div>

            <nav class="navbar__primary-nav primary-nav">
                <ul class="primary-nav__list">
                    <li class="primary-nav__item">
                        <a href="#" class="navbtn navbtn--primary navbtn--active">Leistungen</a>
                    </li>
                    <li class="primary-nav__item">


                        <div class="dropdown">
                            <a href="#" class="navbtn navbtn--primary" data-for="dropdown__toggle--projekte">Projekte</a>
                            <input type="checkbox" role="button" aria-haspopup="true" id="dropdown__toggle--projekte" class="sr-only dropdown__checkbox" />
                            <label class="dropdown__toggle dropdown__toggle--navbar" for="dropdown__toggle--projekte">
                                <i class="icon icon-chevron-2-down dropdown__icon dropdown__icon--navbar"></i>
                                <span class="sr-only dropdown__toggle--expanded-text">ausgeklappt</span>
                                <span class="sr-only dropdown__toggle--collapsed-text">eingeklappt</span>
                            </label>
                            <div class="dropdown__list-wrapper dropdown__list-wrapper--navbar" role="menu" title="Projekte">
                                <ul class="dropdown__list">
                                    <li class="dropdown__item dropdown__item--navbar">
                                        <a href="#" class="dropdown__link dropdown__link--navbar navbtn">Softwarearchitektur und -entwicklung</a>
                                    </li>
                                    <li class="dropdown__item dropdown__item--navbar">
                                        <a href="#" class="dropdown__link dropdown__link--navbar navbtn">Strategie- und Technologieberatung</a>
                                    </li>
                                    <li class="dropdown__item dropdown__item--navbar">
                                        <a href="#" class="dropdown__link dropdown__link--navbar navbtn">Entwicklung digitaler Geschäftsmodelle</a>
                                    </li>
                                </ul>
                            </div>
                        </div>


                    </li>
                    <li class="primary-nav__item">


                        <div class="dropdown">
                            <a href="#" class="navbtn navbtn--primary" data-for="dropdown__toggle--kultur">Kultur</a>
                            <input type="checkbox" role="button" aria-haspopup="true" id="dropdown__toggle--kultur" class="sr-only dropdown__checkbox" />
                            <label class="dropdown__toggle dropdown__toggle--navbar" for="dropdown__toggle--kultur">
                                <i class="icon icon-chevron-2-down dropdown__icon dropdown__icon--navbar"></i>
                                <span class="sr-only dropdown__toggle--expanded-text">ausgeklappt</span>
                                <span class="sr-only dropdown__toggle--collapsed-text">eingeklappt</span>
                            </label>
                            <div class="dropdown__list-wrapper dropdown__list-wrapper--navbar" role="menu" title="Kultur">
                                <ul class="dropdown__list">
                                    <li class="dropdown__item dropdown__item--navbar">
                                        <a href="#" class="dropdown__link dropdown__link--navbar navbtn">Strategie- und Technologieberatung</a>
                                    </li>
                                    <li class="dropdown__item dropdown__item--navbar">
                                        <a href="#" class="dropdown__link dropdown__link--navbar navbtn">Entwicklung digitaler Geschäftsmodelle</a>
                                    </li>
                                    <li class="dropdown__item dropdown__item--navbar">
                                        <a href="#" class="dropdown__link dropdown__link--navbar navbtn">Softwarearchitektur und -entwicklung</a>
                                    </li>
                                    <li class="dropdown__item dropdown__item--navbar">
                                        <a href="#" class="dropdown__link dropdown__link--navbar navbtn">Digitale Plattformen und Infrastrukturen</a>
                                    </li>
                                    <li class="dropdown__item dropdown__item--navbar">
                                        <a href="#" class="dropdown__link dropdown__link--navbar navbtn">Wissenstransfer, Coaching und Trainings</a>
                                    </li>
                                </ul>
                            </div>
                        </div>


                    </li>
                    <li class="primary-nav__item">
                        <a href="#" class="navbtn navbtn--primary">Magazin</a>
                    </li>
                    <li class="primary-nav__item">
                        <a href="#" class="navbtn navbtn--primary">Termine</a>
                    </li>
                </ul>

                <button class="navbtn navbtn--drill-up">
                    <img class="navbtn__left-icon" src={context.app.uri('assets/arrow-medium-left-red.svg')} /> Hauptmenü
                </button>
            </nav>
        </div>
    </nav-bar>
</div>
/* No context defined for this component. */
  • Content:
    // sass-lint:disable force-pseudo-nesting
    
    $navbar-navbtn-transition: color .175s ease;
    $navbar-drill-transition: left .5s ease;
    
    //
    // navbar
    //
    .navbar {
      @extend %heading-font-regular;
      position: relative;
      z-index: 1;
      background-color: $navbar-body-bg;
      color: $navbar-link-color;
    
      &--transparent {
        background-color: transparent;
      }
    }
    
    .navbar__inner {
      display: flex;
      flex-direction: row;
      flex-grow: 1;
      flex-wrap: wrap;
      align-content: flex-start;
      justify-content: flex-end;
      margin: 0 auto;
      background-color: $navbar-body-bg;
      width: 100%;
      max-width: $grid-page-layout-width;
    }
    
    //
    // navbtn // buttons and links in navigation context
    //
    .navbtn {
      @extend %heading-font-regular;
      display: inline-block;
      position: relative;
      transition: $navbar-navbtn-transition;
      border: 0;
      background-color: transparent;
      cursor: pointer;
      text-decoration: none;
      white-space: nowrap;
      color: $navbar-link-color;
    }
    
    .navbtn--skip {
      position: absolute;
      top: -4rem;
      left: 10px;
      text-transform: uppercase;
    }
    
    .navbtn--skip:focus {
      top: 2px;
      left: 10px;
    }
    
    .navbtn--primary {
      @extend %heading-font-bold;
    }
    
    .navbtn--drill-up {
      display: none;
      position: absolute;
      top: 0;
      right: 0;
      background-color: $navbar-lightened-bg;
      padding: $spacer-xs $navbar-padding;
      width: 100%;
      text-align: right;
    }
    
    .navbtn--search,
    .navbtn--menu {
      top: -.1em;
      font-size: ms(3);
    }
    
    .navbtn--search {
      padding: 0 0 0 $spacer-md;
    }
    
    .navbtn--menu {
      @extend %heading-font-bold;
      padding: 0 $spacer-md 0 0;
    }
    
    .navbtn__left-icon {
      position: relative;
      top: .1em;
      margin-right: .5em;
    }
    
    .navbtn--active::after {
      display: block;
      position: absolute;
      top: 1.3em;
      background-color: $navbar-link-active-color;
      width: 100%;
      height: 3px;
      content: '';
    }
    
    .navbtn--meta {
      margin-right: $spacer-base;
    
      &.navbtn--locale {
        margin-right: 2px;
        margin-left: 2px;
      }
    
      &.navbtn--active::after {
        height: 2px;
      }
    }
    
    .navbtn:hover,
    .navbtn:focus {
      transition: $navbar-navbtn-transition;
      color: $navbar-link-hover-color;
    }
    
    //
    // navbar__brand // and related things
    //
    .navbar__brand {
      flex-grow: 1;
      padding: $navbar-padding 0 $navbar-padding $navbar-padding;
      height: $navbar-brandbar-height-small;
    }
    
    .navbar__brand-link {
      @extend %link-unstyled;
    }
    
    .navbar__logo {
      width: $navbar-logo-height-small * 3.94;
      height: $navbar-logo-height-small;
    }
    
    //
    // navbar__meta // container
    //
    .navbar__meta {
      display: none;
      align-items: center;
      justify-content: center;
      order: 4;
      background-color: $navbar-lightened-bg;
      padding: $spacer-sm;
      width: 100%;
      height: $navbar-bottombar-height-small;
      text-transform: uppercase;
      font-size: $navbar-secondary-font-size;
    }
    
    //
    // navbar__togglers // container
    //
    .navbar__togglers {
      display: flex;
      align-items: center;
      order: 2;
      padding: $navbar-padding;
      height: $navbar-brandbar-height-small;
    }
    
    //
    // main toggles
    //
    .navbar__toggle-state--menu-toggler:checked ~ .primary-nav {
      display: block;
    }
    
    .navbar__toggle-state--menu-toggler:checked ~ .navbar__meta {
      display: flex;
    }
    
    //
    // primary-nav // main navigation row
    //
    .primary-nav {
      display: none;
      position: relative;
      order: 3;
      margin-bottom: 0;
      background-color: $navbar-lightened-bg;
      width: 100%;
    }
    
    .primary-nav__list {
      @extend %heading-font-bold;
      @extend %list-unstyled;
      position: relative;
      margin: 0;
      padding: $navbar-padding * 2 $navbar-padding $spacer-sm;
      width: 100%;
      height: calc(90vh - #{$navbar-bottombar-height-small} - #{$navbar-brandbar-height});
      font-size: $navbar-primary-font-size;
    }
    
    .primary-nav__item {
      position: relative;
      padding-top: $navbar-padding;
    }
    
    //
    // dropdown // in navbar context
    //
    .dropdown__checkbox:checked ~ .dropdown__toggle--navbar {
      .dropdown__icon--navbar {
        color: $navbar-link-hover-color;
      }
    }
    
    .dropdown__checkbox:focus ~ .dropdown__toggle--navbar {
      .dropdown__icon--navbar {
        outline: auto 5px $outline-color;
        color: $navbar-link-hover-color;
      }
    }
    
    .dropdown__icon--navbar {
      transition: standard-transition(color);
      color: $navbar-link-color;
    
      &:hover,
      &:focus  {
        color: $navbar-link-hover-color;
      }
    }
    
    .dropdown__list-wrapper--navbar {
      @extend %heading-font-regular;
      position: relative;
      top: 0;
      left: 0;
      background-color: $navbar-lightened-bg;
      padding: 0 $spacer-md $spacer-md;
      width: 100%;
      font-size: $navbar-primary-font-size;
    
      &:hover {
        display: block;
      }
    
      // &:focus {
      //   display: block;
      // }
    }
    
    .dropdown__item--navbar {
      padding-top: $navbar-padding;
    }
    
    .dropdown__link--navbar {
      white-space: normal;
    }
    
    //
    // --transparent
    //
    .navbar__inner--transparent,
    .navbar--transparent {
      background-color: transparent;
    }
    
  • URL: /components/raw/navbar/_navbar-common.scss
  • Filesystem Path: components/02-molecules/navbar/_navbar-common.scss
  • Size: 4.8 KB
  • Content:
    // sass-lint:disable force-pseudo-nesting
    
    @media screen and (min-width: $nav-breakpoint-px) {
      .navbar {
        display: block;
        height: auto;
      }
    
      // .navbar__inner {
      //   flex: 1;
      // }
    
      .navbtn--menu {
        display: none;
      }
    
      .navbtn--primary {
        padding-bottom: $navbar-padding;
    
        &:hover ~ .dropdown__list-wrapper--navbar {
          display: block;
        }
    
        // let user toggle dropdown via checkbox-toggle
        // &:focus ~ .dropdown__list-wrapper--navbar {
        //   display: block;
        // }
      }
    
      .navbar__brand {
        padding: 0;
        width: 100%;
        height: 0;
        text-align: center;
      }
    
      .navbar__logo {
        margin-top: $navbar-padding;
        width: $navbar-logo-height * 3.94;
        height: $navbar-logo-height;
      }
    
      .navbar__meta {
        display: flex;
        order: 2;
        background-color: transparent;
        width: auto;
        height: $navbar-brandbar-height;
      }
    
      .navbar__togglers {
        order: 3;
        padding-left: 0;
        width: auto;
        height: $navbar-brandbar-height;
      }
    
      .primary-nav {
        display: flex;
        order: 4;
        background-color: transparent;
        width: 100%;
      }
    
      .primary-nav__list {
        display: flex;
        justify-content: space-around;
        margin: 0 auto;
        padding: 0 $navbar-padding;
        width: 100%;
        min-width: $navbar-min-width;
        max-width: $navbar-max-width;
        height: auto;
        overflow-y: unset;
      }
    
      .primary-nav__item {
        padding-top: 0;
      }
    
      .dropdown__list-wrapper--navbar {
        position: absolute;
        top: $spacer-md * 2;
        left: -$spacer-md;
        padding: 0 $spacer-md $spacer-md;
        width: auto;
      }
    
      .dropdown__link--navbar {
        white-space: nowrap;
      }
    
      .dropdown__item--clone {
        display: none;
      }
    }
    
    // adjust "dynamic dropdown alignment"
    $navbar-breakpoint-step-size: 250px;
    
    @media screen and (min-width: $nav-breakpoint-px) and (max-width: $nav-breakpoint-px + $navbar-breakpoint-step-size) {
      // semi dynamic alignment of dropdown lists
      .primary-nav__item:nth-last-child(1),
      .primary-nav__item:nth-last-child(2),
      .primary-nav__item:nth-last-child(3) {
        .dropdown__list-wrapper--navbar {
          right: -$spacer-md;
          left: auto;
        }
      }
    }
    
    @media screen and (min-width: $nav-breakpoint-px + $navbar-breakpoint-step-size + 1) and (max-width: $nav-breakpoint-px + (2 * $navbar-breakpoint-step-size)) {
      // semi dynamic alignment of dropdown lists
      .primary-nav__item:nth-last-child(1),
      .primary-nav__item:nth-last-child(2) {
        .dropdown__list-wrapper--navbar {
          right: -$spacer-md;
          left: auto;
        }
      }
    }
    
    @media screen and (min-width: $nav-breakpoint-px + (2 * $navbar-breakpoint-step-size) + 1) and (max-width: $nav-breakpoint-px + (3 * $navbar-breakpoint-step-size)) {
      // semi dynamic alignment of dropdown lists
      .primary-nav__item:nth-last-child(1) {
        .dropdown__list-wrapper--navbar {
          right: -$spacer-md;
          left: auto;
        }
      }
    }
    
  • URL: /components/raw/navbar/_navbar-desktop.scss
  • Filesystem Path: components/02-molecules/navbar/_navbar-desktop.scss
  • Size: 2.9 KB
  • Content:
    // sass-lint:disable force-pseudo-nesting
    
    @media screen and (max-width: $nav-breakpoint-px-below) {
      .navbtn--menu {
        &::after {
          display: block;
          position: absolute;
          top: -.1em;
          right: 0;
          background-color: $navbar-link-color;
          width: 1px;
          height: 1.5em;
          content: '';
        }
      }
    
      .navbtn--primary {
        z-index: 1;
        font-size: $navbar-primary-font-size-big;
      }
    
      .navbtn--active::after {
        height: 5px;
      }
    
      .primary-nav__list {
        overflow-y: scroll;
      }
    
      .primary-nav__list--level2 ~ .navbtn--drill-up {
        display: block;
      }
    
      .primary-nav--enhanced {
        overflow: hidden;
      }
    
      .primary-nav__list--enhanced {
        left: 0%;
        transition: $navbar-drill-transition;
        width: 200%;
    
        &.primary-nav__list--level2 {
          left: -100%;
          transition: $navbar-drill-transition;
        }
      }
    
      .primary-nav__item--enhanced {
        position: initial; // unset positioning
      }
    
      .dropdown__list-wrapper--enhanced {
        position: absolute;
        left: 50%;
        padding-top: 3 * $navbar-padding;
        width: 50%;
    
        // &[data-origin='right'],
        // &[data-origin='left'] {
        //   position: absolute;
        //   left: 50%;
        //   padding-top: 3 * $navbar-padding;
        //   width: 50%;
        // }
      }
    
      .dropdown__list-wrapper--navbar {
        &.dropdown__list-wrapper--enhanced::before {
          position: relative;
          top: -$spacer-xs;
          border-bottom: 5px solid $navbar-link-hover-color;
          font-family: $font-family-sans-serif-bold;
          font-size: $navbar-primary-font-size-big;
          content: attr(title);
        }
      }
    
      .dropdown__icon--navbar {
        &.dropdown__icon--enhanced::before {
          content: $icon-chevron-right;
        }
      }
    
      .dropdown__toggle--navbar {
        padding: 0 .875em;
    
        &.dropdown__toggle--enhanced {
          position: absolute;
          left: 0;
          padding: .35rem $navbar-padding .4rem;
          width: 50%;
          text-align: right;
        }
      }
    }
    
  • URL: /components/raw/navbar/_navbar-mobile.scss
  • Filesystem Path: components/02-molecules/navbar/_navbar-mobile.scss
  • Size: 1.9 KB
  • Content:
    @import './navbar-common';
    @import './navbar-mobile';
    @import './navbar-desktop';
    
  • URL: /components/raw/navbar/_navbar.scss
  • Filesystem Path: components/02-molecules/navbar/_navbar.scss
  • Size: 82 Bytes
  • Content:
    class DropdownToggle {
      constructor (label, name) {
        this.label = label
        this.name = name
        this.checkbox = document.querySelector('#' + name)
        this.relatedLink = document.querySelector('a[data-for=' + name + ']')
      }
    
      toggle () {
        this.checkbox.checked = !this.checkbox.checked
      }
    
      set checked (v) {
        this.checkbox.checked = Boolean(v)
      }
    
      get checked () {
        return this.checkbox.checked
      }
    }
    
    export default class Navbar extends HTMLElement {
      connectedCallback () {
        let navbar = this
        navbar.primaryList = document.querySelector('.primary-nav__list')
        navbar.dropdownToggles = navbar.compileDropdownToggles('.dropdown__toggle--navbar')
        navbar.dropdownPrimaryLinks = document.querySelectorAll('.dropdown .navbtn--primary')
    
        // add --enhanced modifier
        navbar.enhance([
          '.primary-nav',
          '.primary-nav__list',
          '.primary-nav__item',
          '.dropdown__list-wrapper',
          '.dropdown__icon',
          '.dropdown__toggle'
        ])
    
        // enhance drill down ux
        // (copy dropdown heading link into dropdown list)
        navbar.dropdownPrimaryLinks.forEach((link) => {
          let targetDropdownList = link.parentNode.querySelector('.dropdown__list')
    
          let anchorClone = document.createElement('a')
          anchorClone.classList.add('dropdown__link', 'dropdown__link--navbar', 'navbtn')
          anchorClone.setAttribute('href', link.getAttribute('href'))
          anchorClone.textContent = link.textContent
    
          let newListItem = document.createElement('li')
          newListItem.classList.add('dropdown__item', 'dropdown__item--navbar', 'dropdown__item--clone')
          newListItem.appendChild(anchorClone)
    
          targetDropdownList.insertBefore(newListItem, targetDropdownList.firstChild)
        })
    
        // apply several event listeners
        navbar.dropdownToggles.forEach((ddt, i, all) => {
          ddt.label.addEventListener('click', e => {
            navbar.uncheckDropdownToggles(all, ddt)
            navbar.primaryList.classList.add('primary-nav__list--level2')
          })
          ddt.relatedLink.addEventListener('mouseenter', e => {
            navbar.uncheckDropdownToggles(all, ddt)
            navbar.primaryList.classList.remove('primary-nav__list--level2')
          })
          ddt.relatedLink.addEventListener('click', e => {
            if (navbar.isMobile) {
              e.preventDefault()
              ddt.checked = true
              navbar.uncheckDropdownToggles(all, ddt)
              navbar.primaryList.classList.add('primary-nav__list--level2')
            }
          })
        })
    
        document.querySelector('.navbtn--drill-up')
          .addEventListener('click', e => {
            navbar.uncheckDropdownToggles(navbar.dropdownToggles)
            navbar.primaryList.classList.remove('primary-nav__list--level2')
          })
      }
    
      compileDropdownToggles (selector) {
        return Array.from(document.querySelectorAll(selector))
          .map(el => new DropdownToggle(el, el.getAttribute('for')))
      }
    
      enhance (selectors) {
        selectors.forEach(s => {
          s = s.startsWith('.') ? s.slice(1) : s
          Array.from(document.querySelectorAll('.' + s))
            .forEach(e => e.classList.add(s + '--enhanced'))
        })
      }
    
      uncheckDropdownToggles (toggles, except) {
        toggles.forEach(t => {
          if (except !== t) {
            t.checked = false
          }
        })
      }
    
      get isMobile () {
        if (this.primaryList.getBoundingClientRect().width > window.innerWidth) {
          return true
        } else {
          return false
        }
      }
    
      // toggleBEM (elem, base, modifier) {
      //   if (typeof elem === 'string') {
      //     elem = document.querySelector(elem)
      //   } elseif (elem instanceof HTMLElement === false) {
      //     return
      //   }
      //   elem.classList.toggle(base + '--' + modifier)
      // }
    }
    
  • URL: /components/raw/navbar/navbar.js
  • Filesystem Path: components/02-molecules/navbar/navbar.js
  • Size: 3.7 KB

Notizen:

  • Bei Dropdowneinträgen nimmt die Dropdownkomponente den Platz des Primary-Links ein. Dieser kommt dann als erstes Element in die Dropdownkomponente

Issues: