TheaterMania Component Library

Header 

<div class="overlay js-overlay"></div>
<div class="header-container js-header-container">
    <div class="header-ad">
        <div class="ad-container">
            <a href="#">
                <picture>
                    <source srcset="/assets/images/ads/728x90.jpg" media="(min-width: 769px)">
                    <img src="/assets/images/ads/300x50.jpg" alt="Ad for Peter Pan at National Theatre Live with young man floating in the sky" />
                </picture>
            </a>
        </div>

    </div>
    <header class="header contain js-header">
        <div class="header-main">
            <div class="header-btns">
                <button class="btn header-btn-menu-open js-header-btn-menu-open">
          <svg class="icon icon--menu">
  <use xlink:href="/assets/icons/sprite-sheet.svg#menu"></use>
</svg>
          <span class="visually-hidden">Menu</span>
        </button>

                <button class="btn header-btn-menu-close js-header-btn-menu-close">
    <svg class="icon icon--close">
  <use xlink:href="/assets/icons/sprite-sheet.svg#close"></use>
</svg>
    <span class="visually-hidden">Close Menu</span>
  </button>

            </div>
            <div class="header-logo">
                <a href="#">
                    <img src="/assets/images/logos/theatermania-notag-white.svg" alt="Theatermania Logo" />
                </a>
            </div>
            <div class="header-search-container js-header-search">
                <div class="header-btns">
                    <button class="btn header-btn-search-open js-header-btn-search-open">
            <svg class="icon icon--search">
  <use xlink:href="/assets/icons/sprite-sheet.svg#search"></use>
</svg>
            <span class="visually-hidden">Search</span>
          </button>
                    <button class="btn header-btn-search-close js-header-btn-search-close">
            <svg class="icon icon--close">
  <use xlink:href="/assets/icons/sprite-sheet.svg#close"></use>
</svg>
            <span class="visually-hidden">Close Search</span>
          </button>
                </div>
                <div class="header-search">
                    <div class="search-block">
                        <form class="search-block-form">
                            <label for="search" class="label visually-hidden">Search</label>
                            <input class="input search-block-form__input js-input-search" name="search" id="search" type="search" placeholder="Search city, actor or keyword..." />
                            <svg class="icon icon--search">
  <use xlink:href="/assets/icons/sprite-sheet.svg#search"></use>
</svg>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <div class="header-nav-container js-header-nav">
            <div class="header-nav-items">
                <nav class="header-nav">
                    <ul class="header-nav__list js-header-nav-list">
                        <li class="nav-list-item">
                            <button class="btn nav-link-item js-nav-secondary">
                  Tickets &amp; Discounts
                  <svg class="icon icon--arrow-bottom">
  <use xlink:href="/assets/icons/sprite-sheet.svg#arrow-bottom"></use>
</svg>
                </button>
                            <ul class="header-nav__list-secondary">
                                <li class="header-nav-close">
                                    <button class="btn btn--close btn--close--submenu js-btn-close--submenu">
    <svg class="icon icon--close">
  <use xlink:href="/assets/icons/sprite-sheet.svg#close"></use>
</svg>
    <span class="visually-hidden">Close Menu</span>
  </button>
                                </li>
                                <li class="sublist sublist--main">
                                    <div class="section-title">
                                        <svg class="icon icon--star">
  <use xlink:href="/assets/icons/sprite-sheet.svg#star"></use>
</svg>
                                        <h2 class="title-highlight">New York City</h2>
                                    </div>
                                    <ul class="header-nav__sublist">
                                        <li class="nav-list-item">
                                            <a href="#" class="nav-link-item">Broadway</a>
                                        </li>
                                        <li class="nav-list-item">
                                            <a href="#" class="nav-link-item">Broadway Discounts</a>
                                        </li>
                                        <li class="nav-list-item">
                                            <a href="#" class="nav-link-item">Off-Broadway</a>
                                        </li>
                                        <li class="nav-list-item">
                                            <a href="#" class="nav-link-item">All New York City</a>
                                        </li>
                                    </ul>
                                </li>
                                <li class="sublist">
                                    <div class="section-title">
                                        <svg class="icon icon--map-pin">
  <use xlink:href="/assets/icons/sprite-sheet.svg#map-pin"></use>
</svg>
                                        <h2 class="title-highlight">Other Cities</h2>
                                    </div>
                                    <ul class="header-nav__sublist">
                                        <li class="nav-list-item">
                                            <a href="#" class="nav-link-item">Boston</a>
                                        </li>
                                        <li class="nav-list-item">
                                            <a href="#" class="nav-link-item">Chicago</a>
                                        </li>
                                        <li class="nav-list-item">
                                            <a href="#" class="nav-link-item">Dallas</a>
                                        </li>
                                        <li class="nav-list-item">
                                            <a href="#" class="nav-link-item">Los Angeles</a>
                                        </li>
                                        <li class="nav-list-item">
                                            <a href="#" class="nav-link-item">Miami</a>
                                        </li>
                                        <li class="nav-list-item">
                                            <a href="#" class="nav-link-item">Minneapolis</a>
                                        </li>
                                        <li class="nav-list-item">
                                            <a href="#" class="nav-link-item">Philadelphia</a>
                                        </li>
                                        <li class="nav-list-item">
                                            <a href="#" class="nav-link-item">San Diego</a>
                                        </li>
                                        <li class="nav-list-item">
                                            <a href="#" class="nav-link-item">San Francisco</a>
                                        </li>
                                        <li class="nav-list-item">
                                            <a href="#" class="nav-link-item">Seattle</a>
                                        </li>
                                        <li class="nav-list-item">
                                            <a href="#" class="nav-link-item">Washington D.C.</a>
                                        </li>
                                    </ul>
                                    <a href="#" class="btn btn--base btn--primary btn--submenu">See All Cities</a>
                                </li>
                            </ul>
                        </li>
                        <li class="nav-list-item">
                            <a href="#nav-link" class="nav-link-item">News &amp; Reviews</a>
                        </li>
                        <li class="nav-list-item">
                            <button class="btn nav-link-item js-nav-secondary">
                  Theater Clubs
                  <svg class="icon icon--arrow-bottom">
  <use xlink:href="/assets/icons/sprite-sheet.svg#arrow-bottom"></use>
</svg>
                </button>
                            <ul class="header-nav__list-secondary">
                                <li class="header-nav-close">
                                    <button class="btn btn--close btn--close--submenu js-btn-close--submenu">
    <svg class="icon icon--close">
  <use xlink:href="/assets/icons/sprite-sheet.svg#close"></use>
</svg>
    <span class="visually-hidden">Close Menu</span>
  </button>
                                </li>
                                <li class="sublist-title">
                                    <div class="section-title">
                                        <svg class="icon icon--tickets">
  <use xlink:href="/assets/icons/sprite-sheet.svg#tickets"></use>
</svg>
                                        <h2 class="title-highlight">Complimentary and Deeply Discounted Shows</h2>
                                    </div>
                                    <span class="sublist-copy">Broadway, Off-Broadway, Concerts, Sports, Movie Screenings, Comedy, Dance and much more.</span>
                                </li>
                                <li class="nav-list-item nav-list-item--clubs">
                                    <a href="#">
                                        <div class="nav-image-container">
                                            <picture>
                                                <source srcset="/assets/images/nav/newyorkClub.jpg" media="(min-width: 768px)">
                                                <img srcset="/assets/images/nav/newyorkClubSmall.jpg" class="nav-image" alt="New York City skyline at dusk" />
                                            </picture>
                                            <span class="nav-image-link">New York</span>
                                        </div>
                                    </a>
                                </li>
                                <li class="nav-list-item nav-list-item--clubs">
                                    <a href="#">
                                        <div class="nav-image-container">
                                            <picture>
                                                <source srcset="/assets/images/nav/bostonClub.jpg" media="(min-width: 768px)">
                                                <img srcset="/assets/images/nav/bostonClubSmall.jpg" class="nav-image" alt="Boston skyline at dusk near waterfront" />
                                            </picture>
                                            <span class="nav-image-link">Boston</span>
                                        </div>
                                    </a>
                                </li>
                                <li class="nav-list-item nav-list-item--clubs">
                                    <a href="#">
                                        <div class="nav-image-container">
                                            <picture>
                                                <source srcset="/assets/images/nav/londonClub.jpg" media="(min-width: 768px)">
                                                <img srcset="/assets/images/nav/londonClubSmall.jpg" class="nav-image" alt="London skyline at night with Big Ben" />
                                            </picture>
                                            <span class="nav-image-link">London</span>
                                        </div>
                                    </a>
                                </li>
                            </ul>
                        </li>
                        <li class="nav-list-item">
                            <button class="btn nav-link-item js-nav-secondary">
                  Newsletter
                  <svg class="icon icon--arrow-bottom">
  <use xlink:href="/assets/icons/sprite-sheet.svg#arrow-bottom"></use>
</svg>
                </button>
                            <ul class="header-nav__list-secondary header-nav__list-secondary--newsletter">
                                <li class="header-nav-close">
                                    <button class="btn btn--close btn--close--submenu js-btn-close--submenu">
    <svg class="icon icon--close">
  <use xlink:href="/assets/icons/sprite-sheet.svg#close"></use>
</svg>
    <span class="visually-hidden">Close Menu</span>
  </button>
                                </li>
                                <li class="sublist-title">
                                    <div class="section-title">
                                        <svg class="icon icon--email">
  <use xlink:href="/assets/icons/sprite-sheet.svg#email"></use>
</svg>
                                        <h2 class="title-highlight">Discount Ticket Email Offers</h2>
                                    </div>
                                </li>
                                <li class="nav-list-item nav-list-item--newsletter">
                                    <div class="nav-newsletter">
                                        <p class="newsletter-copy js-newsletter-copy">Discount email offers for a wide variety of Broadway, Off-Broadway and regional shows.</p>
                                        <div class="newsletter-form-container js-newsletter-form-container">
                                            <div class="newsletter-confirmation visually-hidden js-newsletter-confirmation">
                                                <svg class="icon icon--checkmark">
  <use xlink:href="/assets/icons/sprite-sheet.svg#checkmark"></use>
</svg>
                                                <div class="newsletter-confirmation__info">
                                                    <p>Thank you for signing up. We&#x27;ll send you a welcome message shortly.</p>
                                                    <p class="newsletter-customize">You can <a href="#">customize your preferences </a>at any time.</p>
                                                </div>
                                            </div>
                                            <form class="newsletter-form js-newsletter-form">
                                                <div class="newsletter-error visually-hidden js-newsletter-error">
                                                    <svg class="icon icon--error">
  <use xlink:href="/assets/icons/sprite-sheet.svg#error"></use>
</svg>
                                                    <span class="input-error">Please enter a valid email address.</span>
                                                </div>
                                                <div class="form-input">
                                                    <div class="validation js-validation">
                                                        <input type="email" name="email" id="email" class="input validation-item js-newsletter-input" placeholder="Enter your email address">
                                                    </div>
                                                </div>

                                                <button class="btn btn--base btn--cta js-newsletter-btn">
  Sign Up
</button>

                                            </form>
                                        </div>

                                    </div>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </nav>
                <div class="header-social">
                    <div class="social">
                        <ul class="social__list" aria-label="Social network profiles">
                            <li class="social-list-item">
                                <a href="#facebook-url">
                                    <svg class="icon icon--facebook">
  <use xlink:href="/assets/icons/sprite-sheet.svg#facebook"></use>
</svg>
                                    <span class="visually-hidden">Facebook</span>
                                </a>
                            </li>
                            <li class="social-list-item">
                                <a href="#twitter-url">
                                    <svg class="icon icon--twitter">
  <use xlink:href="/assets/icons/sprite-sheet.svg#twitter"></use>
</svg>
                                    <span class="visually-hidden">Twitter</span>
                                </a>
                            </li>
                            <li class="social-list-item">
                                <a href="#youtube-url">
                                    <svg class="icon icon--youtube">
  <use xlink:href="/assets/icons/sprite-sheet.svg#youtube"></use>
</svg>
                                    <span class="visually-hidden">YouTube</span>
                                </a>
                            </li>
                            <li class="social-list-item">
                                <a href="#instagram-url">
                                    <svg class="icon icon--instagram">
  <use xlink:href="/assets/icons/sprite-sheet.svg#instagram"></use>
</svg>
                                    <span class="visually-hidden">Instagram</span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </header>
</div>
 
<div class="overlay js-overlay"></div>
<div class="header-container js-header-container">
  {{#if ad}}
    <div class="header-ad">
      {{#if billboard}}
        {{render '@ads--970x250' ad-modifiers merge=true}}
        {{else}}
          {{render '@ads--728x90' ad-modifiers merge=true}}
      {{/if}}
    </div>
  {{/if}}
  <header class="header contain js-header">
    <div class="header-main">
      <div class="header-btns">
        <button class="btn header-btn-menu-open js-header-btn-menu-open">
          {{render '@icons--menu'}}
          <span class="visually-hidden">{{label-menu}}</span>
        </button>
        {{render '@buttons--close' close-menu-modifiers merge=true}}
      </div>
      <div class="header-logo">
        <a href="#">
          {{#if theatermania}}
            {{render '@logos--tm-no-tag-white'}}
          {{else}}
            {{render '@logos--wos-standard'}}
          {{/if}}
        </a>
      </div>
      <div class="header-search-container js-header-search">
        <div class="header-btns">
          <button class="btn header-btn-search-open js-header-btn-search-open">
            {{render '@icons--search'}}
            <span class="visually-hidden">{{label-search}}</span>
          </button>
          <button class="btn header-btn-search-close js-header-btn-search-close">
            {{render '@icons--close'}}
            <span class="visually-hidden">{{label-search-close}}</span>
          </button>
        </div>
        <div class="header-search">
          {{render '@search'}}
        </div>
      </div>
    </div>
    <div class="header-nav-container js-header-nav">
      <div class="header-nav-items">
        <nav class="header-nav">
          <ul class="header-nav__list js-header-nav-list">
            {{#each nav-items}}
            <li class="nav-list-item">
              {{#if button}}
                <button class="btn nav-link-item{{#if link-class}} {{link-class}}{{/if}}">
                  {{nav-item}}
                  {{render '@icons--arrow-bottom'}}
                </button>
              {{/if}}
              {{#if link}}
                <a href="{{url}}" class="nav-link-item{{#if link-class}} {{link-class}}{{/if}}">{{nav-item}}</a>
              {{/if}}
              {{#if secondary-nav-items}}
                <ul class="header-nav__list-secondary{{#if newsletter}} header-nav__list-secondary--newsletter{{/if}}">
                  <li class="header-nav-close">{{render '@buttons--close' submenu-close merge=true}}</li>
                  {{#if section-modifiers}}
                    <li class="sublist-title">
                      {{render '@section-title' section-modifiers merge=true}}
                      {{#if extra}}
                        <span class="sublist-copy">{{extra.copy}}</span>
                      {{/if}}
                    </li>
                  {{/if}}
                  {{#if mainList}}
                    {{#each secondary-nav-items}}
                      <li class="nav-list-item{{#if clubs }} nav-list-item--clubs{{/if}}{{#if cityList }} nav-list-item--full{{/if}}{{#if newsletter }} nav-list-item--newsletter{{/if}}">
                        {{#if hasImage}}
                        <a href="#">
                          <div class="nav-image-container">
                            <picture>
                              <source srcset="/assets/images/nav/{{image}}" media="(min-width: 768px)">
                              <img srcset="/assets/images/nav/{{imageSmall}}" class="nav-image" alt="{{image-alt}}" />
                            </picture>
                            <span class="nav-image-link">{{nav-item}}</span>
                          </div>
                        </a>
                        {{/if}}
                        {{#if newsletter}}
                          <div class="nav-newsletter">
                            <p class="newsletter-copy js-newsletter-copy">{{newscopy}}</p>
                            {{render '@newsletter' modifiers merge=true}}
                          </div>
                        {{/if}}
                      </li>
                    {{/each}}
                  {{/if}}
                  {{#if subList}}
                    {{#each secondary-nav-items}}
                      {{#each subList}}
                        <li class="sublist{{#if main-city}} sublist--main{{/if}}">
                          {{render '@section-title' section-modifiers merge=true}}
                          <ul class="header-nav__sublist">
                            {{#each list}}
                              <li class="nav-list-item">
                                <a href="#" class="nav-link-item">{{value}}</a>
                              </li>
                            {{/each}}
                          </ul>
                          {{#if city-text}}
                            <a href="#" class="btn btn--base btn--primary btn--submenu">{{city-text}}</a>
                          {{/if}}
                        </li>
                      {{/each}}
                    {{/each}}
                  {{/if}}
                </ul>
              {{/if}}
            </li>
            {{/each}}
          </ul>
        </nav>
        <div class="header-social">
          {{render '@social'}}
        </div>
      </div>
    </div>
  </header>
</div>
 
{
  "ad": true,
  "label-menu": "Menu",
  "label-menu-close": "Close Menu",
  "label-search": "Search",
  "label-search-close": "Close Search",
  "theatermania": true,
  "ad-modifiers": {
    "imageSmall": "300x50.jpg"
  },
  "close-menu-modifiers": {
    "class": "btn header-btn-menu-close",
    "js-class": "js-header-btn-menu-close"
  },
  "nav-items": [
    {
      "nav-item": "Tickets & Discounts",
      "link-class": "js-nav-secondary",
      "button": true,
      "subList": true,
      "submenu-close": {
        "class": "btn btn--close btn--close--submenu",
        "js-class": "js-btn-close--submenu"
      },
      "secondary-nav-items": [
        {
          "cityButton": {
            "buttonValue": "See All Cities"
          },
          "cityList": true,
          "subList": [
            {
              "section-modifiers": {
                "title": "New York City",
                "aria-id": null,
                "icon": {
                  "modifier": "star"
                }
              },
              "main-city": true,
              "icon": {
                "modifier": "star"
              },
              "list": [
                {
                  "value": "Broadway"
                },
                {
                  "value": "Broadway Discounts"
                },
                {
                  "value": "Off-Broadway"
                },
                {
                  "value": "All New York City"
                }
              ]
            },
            {
              "section-modifiers": {
                "title": "Other Cities",
                "aria-id": null,
                "icon": {
                  "modifier": "map-pin"
                }
              },
              "city-text": "See All Cities",
              "list": [
                {
                  "value": "Boston"
                },
                {
                  "value": "Chicago"
                },
                {
                  "value": "Dallas"
                },
                {
                  "value": "Los Angeles"
                },
                {
                  "value": "Miami"
                },
                {
                  "value": "Minneapolis"
                },
                {
                  "value": "Philadelphia"
                },
                {
                  "value": "San Diego"
                },
                {
                  "value": "San Francisco"
                },
                {
                  "value": "Seattle"
                },
                {
                  "value": "Washington D.C."
                }
              ]
            }
          ]
        }
      ]
    },
    {
      "nav-item": "News & Reviews",
      "url": "#nav-link",
      "link": true
    },
    {
      "nav-item": "Theater Clubs",
      "link-class": "js-nav-secondary",
      "button": true,
      "mainList": true,
      "submenu-close": {
        "class": "btn btn--close btn--close--submenu",
        "js-class": "js-btn-close--submenu"
      },
      "section-modifiers": {
        "title": "Complimentary and Deeply Discounted Shows",
        "aria-id": null,
        "icon": {
          "modifier": "tickets"
        }
      },
      "extra": {
        "copy": "Broadway, Off-Broadway, Concerts, Sports, Movie Screenings, Comedy, Dance and much more."
      },
      "secondary-nav-items": [
        {
          "nav-item": "New York",
          "clubs": true,
          "imageSmall": "newyorkClubSmall.jpg",
          "image": "newyorkClub.jpg",
          "image-alt": "New York City skyline at dusk",
          "hasImage": true
        },
        {
          "nav-item": "Boston",
          "clubs": true,
          "imageSmall": "bostonClubSmall.jpg",
          "image": "bostonClub.jpg",
          "image-alt": "Boston skyline at dusk near waterfront",
          "hasImage": true
        },
        {
          "nav-item": "London",
          "clubs": true,
          "imageSmall": "londonClubSmall.jpg",
          "image": "londonClub.jpg",
          "image-alt": "London skyline at night with Big Ben",
          "hasImage": true
        }
      ]
    },
    {
      "nav-item": "Newsletter",
      "link-class": "js-nav-secondary",
      "button": true,
      "newsletter": true,
      "mainList": true,
      "submenu-close": {
        "class": "btn btn--close btn--close--submenu",
        "js-class": "js-btn-close--submenu"
      },
      "section-modifiers": {
        "title": "Discount Ticket Email Offers",
        "aria-id": null,
        "icon": {
          "modifier": "email"
        }
      },
      "secondary-nav-items": [
        {
          "newsletter": true,
          "newscopy": "Discount email offers for a wide variety of Broadway, Off-Broadway and regional shows.",
          "image": "showCard1.jpg"
        }
      ]
    }
  ]
}
  • Content: 
    /**
 * @overview Header & Navigation interactions.
 * @module Header.js
*/

const header = document.querySelector(`.js-header`);
const headerContainer = document.querySelector(`.js-header-container`);
const headerSearch = document.querySelector(`.js-header-search`);
const navBtnOpen = document.querySelector(`.js-header-btn-menu-open`);
const navBtnClose = document.querySelector(`.js-header-btn-menu-close`);
const searchBtnOpen = document.querySelector(`.js-header-btn-search-open`);
const searchBtnClose = document.querySelector(`.js-header-btn-search-close`);
const secondaryNavBtns = document.querySelectorAll(`.js-nav-secondary`);
const closePanelBtns = document.querySelectorAll(`.js-btn-close--submenu`);
const overlay = document.body.querySelector(`.js-overlay`);
const body = document.body;
const openedClass = `is-open`;
const overlayVisible = `is-overlay`;
let mobile;

// IE11 forEach fix
(function () {
    if ( typeof NodeList.prototype.forEach === "function" ) return false;
    NodeList.prototype.forEach = Array.prototype.forEach;
})();

if (window.innerWidth <= 768) {
  mobile = true;
}

// Fix for individual components
if (header) {
  // Open mobile navigation
  const openMobileMenu = () => {
    closePanels(headerContainer);
    header.classList.add(openedClass);
    overlay.classList.add(overlayVisible);
  };

  // Open search for mobile and desktop
  const openSearch = () => {
    closePanels(headerContainer);
    headerSearch.classList.add(openedClass);
    overlay.classList.add(overlayVisible);
    document.body.querySelector(`.js-input-search`).focus();
  };

  // Used for Mobile Menu & Search
  const closeOpenItem = () => {
    closePanels(headerContainer);
    overlay.classList.remove(overlayVisible);
  }

  // Utility for closing all open panels
  const closePanels = (el) => {
    const openedPanel = el.querySelectorAll(`.is-open`);

    openedPanel.forEach((panel) => {
      panel.classList.remove(`is-open`);
    });
  };

  const openSecondaryNav = (navItem) => {
    overlay.classList.add(overlayVisible);
    navItem.parentElement.classList.add(openedClass);
  };

  // Open/close mobile nav
  navBtnOpen.addEventListener(`click`, () => {
    openMobileMenu();
  });

  navBtnClose.addEventListener(`click`, () => {
    closeOpenItem();
  });

  // Open/close mobile search
  searchBtnOpen.addEventListener(`click`, () => {
    openSearch();
  });

  searchBtnClose.addEventListener(`click`, () => {
    closeOpenItem();
  });

  // Tablet/Desktop panel close buttons.
  closePanelBtns.forEach((closePanelBtn) => {
    closePanelBtn.addEventListener(`click`, () => {
      closePanels(header);
      overlay.classList.remove(overlayVisible);
    });
  });

  // Open/close nested menus
  secondaryNavBtns.forEach((secondaryNavBtn) => {
    secondaryNavBtn.addEventListener(`click`, () => {
      if (!secondaryNavBtn.parentElement.classList.contains(openedClass)) {
        closePanels(header);
        openSecondaryNav(secondaryNavBtn);

        if (mobile) {
          secondaryNavBtn.scrollIntoView(true);
        }
      }
      else {
        closePanels(header);
        if (mobile) {
          header.scrollIntoView(true);
        }
        else {
          overlay.classList.remove(overlayVisible);
        }
      }
    });
  });

  // Close panel when click/touch outside nav
  const clickClose = (e) => {
    // Desktop menu and search
    if (!e.target.closest(`.js-header-nav-list`) && !e.target.closest(`.js-header-search`)) {
      closePanels(header);
      if (!mobile) {
        overlay.classList.remove(overlayVisible);
      }
    }

    // Mobile menu
    if (!e.target.closest(`.js-header`)) {
      closePanels(headerContainer);
      overlay.classList.remove(overlayVisible);
    }

    if (mobile && !headerSearch.classList.contains(openedClass) && !header.classList.contains(openedClass)) {
      overlay.classList.remove(overlayVisible);
    }
  };

  // Close panel when click outside nav
  document.body.addEventListener(`touchend`, (e) => {
    clickClose(e);
  });

  document.addEventListener(`click`, (e) => {
    clickClose(e);
  });

  // Generic debounce function
  // Taken from: https://davidwalsh.name/javascript-debounce-function
  // TM still deciding on whether to use utility library.
  // TODO: Use lodash or refactor to ES6.
  const debounce = (func, wait, immediate) => {
    var timeout;
    return function() {
      var context = this, args = arguments;
      var later = function() {
        timeout = null;
        if (!immediate) func.apply(context, args);
      };
      var callNow = immediate && !timeout;
      clearTimeout(timeout);
      timeout = setTimeout(later, wait);
      if (callNow) func.apply(context, args);
    };
  };

  const resizeListener = () => {
    window.addEventListener(`resize`, debounce(() => {
      if (window.innerWidth <= 768) {
        mobile = true;
      }
      else {
        mobile = false;
      }
    }, 250));
  };

  resizeListener();
}
  • URL: /components/raw/header/Header.js
  • Filesystem Path: src/components/02-Patterns/Header/Header.js
  • Size: 5 KB
  • Content: 
    .header-container {
  position: relative;
  padding-top: 1rem;
  z-index: 2;
  background: linear-gradient(to right, $color-header, $color-header-light);
}

.overlay {
  position: fixed;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  opacity: 0;
  pointer-events: none;
  background: rgba($color-black, 0.5);
  transition: $transition;

  &.is-overlay {
    opacity: 1;
    pointer-events: auto;
  }
}

.ad-container {
  .header-ad & {
    margin-top: 0;
  }
}

.header {
  position: relative;
  padding-top: 1rem;
  z-index: 2;
  perspective: 19rem;
}

.header-main {
  display: flex;
  justify-content: space-between;

  @include breakpoint($break-medium) {
    margin-bottom: 1rem;
  }
}

.header-logo {
  margin-bottom: 1rem;
  width: $header-logo-width;

  @include breakpoint($break-medium) {
    margin-top: $header-logo-margin-top--small;
    margin-bottom: 0;
    width: $header-logo-width--medium;
  }

  @include breakpoint($break-large) {
    margin-top: $header-logo-margin-top;
    width: $header-logo-width--large;
  }
}

.header-btns {
  align-self: center;

  @include breakpoint($break-medium) {
    display: none;
  }

  .header-search-container & {
    @include breakpoint($break-medium) {
      position: absolute;
      display: block;
      top: 4.56rem;
      right: 2.5rem;
      z-index: 2;
    }

    @include breakpoint($break-large) {
      top: 5.06rem;
      right: 3.44rem;
    }
  }
}

.header-search-container {
  align-self: center;
  margin-bottom: 0.75rem;
}

.search-block-form__input {
  max-height: 2.5rem;
}

.header-btn-search-open {
  .header-search-container.is-open & {
    opacity: 0;
    pointer-events: none;
    transition: $transition;
  }
}

.header-btn-search-close {
  position: absolute;
  top: 0.56rem;
  right: 0.38rem;
  opacity: 0;
  pointer-events: none;
  transition: $transition;

  .header-search-container.is-open & {
    opacity: 1;
    pointer-events: auto;
    transform: none;
  }

  @include breakpoint($break-small) {
    right: 1.38rem;
  }

  @include breakpoint($break-medium) {
    top: -0.38rem;
    right: -0.5rem;
  }
}

.header-nav-container {
  position: absolute;
  z-index: 1;
  width: calc(100% - 2rem);
  pointer-events: none;

  @include breakpoint($break-small) {
    width: calc(100% - 4rem);
  }

  @include breakpoint($break-medium) {
    position: relative;
    padding: 1rem 1.5rem;
    width: 100%;
    background: $color-gray-lightest;
    border-radius: $border-radius $border-radius 0 0;
    box-sizing: border-box;
  }
}

.header-nav {
  margin-bottom: 0.75rem;

  @include breakpoint($break-medium) {
    margin-bottom: 0;
    max-height: 1rem;
  }
}

.header-btn-menu-open {
  margin: -1rem 0 0 -0.5rem;
  transition: $transition;

  .is-open & {
    opacity: 0;
    pointer-events: none;
  }

  @include breakpoint($break-medium) {
    display: none;
  }
}

.header-btn-menu-close {
  position: absolute;
  top: 0.31rem;
  left: 0.5rem;
  opacity: 0;
  pointer-events: none;
  transition: $transition;

  .is-open & {
    opacity: 1;
    pointer-events: auto;
  }

  @include breakpoint($break-small) {
    left: 1.5rem;
  }

  @include breakpoint($break-medium) {
    display: none;
  }
}

.icon--menu {
  .header & {
    stroke: $color-white;

    @include breakpoint($break-medium) {
      display: none;
    }
  }
}

.header-nav-items {
  margin-top: 1rem;
  padding: 1rem 1.5rem;
  opacity: 0;
  pointer-events: none;
  background: $color-background;
  border-radius: $border-radius;
  box-shadow: 0 0 0.5rem 0 rgba($color-black, 0.5);
  box-sizing: border-box;
  transform: rotateX(-3deg);
  transition: $transition;

  @include breakpoint($break-medium) {
    display: flex;
    align-items: center;
    position: relative;
    margin: 0;
    padding: 0;
    width: 100%;
    opacity: 1;
    pointer-events: auto;
    background: none;
    box-shadow: none;
    transform: none;
  }

  .is-open & {
    opacity: 1;
    pointer-events: auto;
    transform: none;
  }
}

.header-nav__list {
  margin: 0;
  padding: 0;
  list-style: none;

  @include breakpoint($break-medium) {
    display: flex;
  }
}

.nav-item {
  margin-bottom: 1.5rem;
}

.header-search {
  position: absolute;
  padding: 1rem;
  top: 4.75rem;
  left: 1rem;
  width: calc(100% - 2rem);
  opacity: 0;
  pointer-events: none;
  background: $color-background;
  border-radius: $border-radius;
  box-shadow: 0 0 0.5rem 0 rgba($color-black, 0.5);
  box-sizing: border-box;
  transform: rotateX(-12deg);
  transition: $transition;

  .header-search-container.is-open & {
    z-index: 2;
    opacity: 1;
    pointer-events: auto;
    transform: none;
    transition-delay: 0.15s;
  }

  @include breakpoint($break-small) {
    left: 2rem;
    width: calc(100% - 4rem);
  }

   @include breakpoint($break-medium) {
    margin-left: auto;
    top: 6.75rem;
    right: 1rem;
    max-width: 25rem;
    background: $color-gray-lightest;
    border-radius: 0 0 $border-radius $border-radius;
    box-shadow: 0 0.44rem 0.5rem 0 rgba($color-black, 0.2);
  }

  @include breakpoint($break-large) {
    top: 7.25rem;
    right: 2rem;
  }
}

.nav-list-item {
  margin: 0;
  padding: 0;

  &.btn.is-open {
    color: $color-header-light;
  }

  .header-nav & {
    @include breakpoint($break-medium) {
      &::after {
        position: relative;
        display: block;
        content: '';
        top: -0.13rem;
        left: calc(50% - 0.22rem);
        width: 0;
        height: 0;
        border-top: 0.5rem solid $color-gray-lightest;
        border-left: 0.5rem solid transparent;
        border-right: 0.5rem solid transparent;
        transition: $transition;
      }

      &.is-open::after {
        transform: translateY(0.88rem);
      }
    }
  }

  .header-nav__list-secondary & {
    @include breakpoint($break-medium) {
      flex: 0 1 49%;
      margin-right: 0;

      &::after {
        display: none;
      }
    }
  }

  &.nav-list-item--clubs {
    .header-nav__list-secondary & {
      @include breakpoint($break-medium) {
        flex: 0 1 32%;
      }
    }
  }

  .header-nav__sublist & {
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid $color-gray-lightest;

    @include breakpoint($break-xsmall) {
      flex: 0 1 50%;
    }

    @include breakpoint($break-medium) {
      flex: none;
      width: calc(100% / 3);

      &:nth-last-child(2) {
        margin-bottom: 1rem;
        border-bottom: 1px solid $color-gray-lightest;
      }
    }
  }

  .sublist--main .header-nav__sublist & {
    @include breakpoint($break-xsmall) {
      flex: 0 1 100%;
    }

    @include breakpoint($break-medium) {
      width: 100%;
    }
  }

  @include breakpoint($break-medium) {
    margin-right: 2rem;
  }
}

.btn--primary {
  .nav-list-item & {
    color: $color-white;

    @include breakpoint($break-medium) {
      float: right;
    }
  }
}

.nav-link-item {
  display: block;
  margin: 0;
  padding: 0.75rem 0 0.75rem;
  width: 100%;
  font-family: $font-title;

  &.btn {
    text-align: left;
    color: $color-header;
    outline: none;
    transition: $transition;

    &:hover {
      color: $color-header-light;
    }
  }

  .header-nav__list & {
    line-height: 1.15;

    &:hover {
      text-decoration: none;
    }
  }

  .header-nav__sublist & {
    padding: 0;
    color: $color-header;
    font-family: $font-body;
    font-weight: $font-normal;

    &:hover {
      color: $color-header-light;
      text-decoration: underline;
    }
  }

  @include breakpoint($break-medium) {
    padding: 0;
  }
}

.header-social {
  @include breakpoint($break-medium) {
    display: none;
  }
}

.header-nav__list-secondary {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin: 0;
  padding: 0;
  list-style: none;

  @include breakpoint($break-medium) {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    position: absolute;
    top: 3rem;
    left: -1.5rem;
    padding: 1.3rem 1.5rem 2rem;
    width: calc(100% + 3rem);
    background: $color-white;
    border-radius: $border-radius;
    box-shadow: 0 0 0.5rem 0 rgba($color-black, 0.5);
    box-sizing: border-box;
  }

  .nav-list-item & {
    display: none;
    margin-top: 0.5rem;
    opacity: 0;
    pointer-events: none;
    transform: rotateX(-3deg);
    transition: $transition;

    @include breakpoint($break-medium) {
      display: flex;
      margin-top: 0;
    }
  }

  .nav-list-item.is-open & {
    display: flex;
    opacity: 1;
    z-index: 1;
    pointer-events: auto;
    transform: none;
    transition-delay: 0.2s;
  }
}

.nav-list-item--newsletter {
  .header-nav__list-secondary & {
    margin-bottom: 1.5rem;

    @include breakpoint($break-medium) {
      flex: 0 1 100%;
      margin-bottom: 0;
    }
  }
}

.nav-image-container {
  position: relative;
  margin-bottom: 1.5rem;

  &::after {
    position: absolute;
    content: "";
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: $opacity-light;
    background: $color-black;
    border-radius: $border-radius;
    transition: $transition;
  }

  &:hover {
    &::after {
      opacity: $opacity-lighter;
    }
  }

  @include breakpoint($break-medium) {
    margin-bottom: 0;
  }
}

.nav-image-link {
  position: absolute;
  z-index: 1;
  padding: 0.5rem 0;
  top: 50%;
  width: 100%;
  text-align: center;
  font-family: $font-title;
  font-size: $ms-2;
  color: $color-white;
  text-shadow: 0 1px 0.12rem $color-black;
  transform: translateY(-50%);
}

.nav-list-item--full {
  .header-nav__list-secondary & {
    display: flex;
    flex-direction: column;
    width: 100%;

    @include breakpoint($break-medium) {
      flex: 0 1 100%;
    }
  }
}

.nav-image {
  border-radius: $border-radius;
}

.header-nav__sublist {
  display: flex;
  flex-direction: column;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;

  .btn--primary {
    margin-top: 0.25rem;
    padding: 0.75rem;
    box-sizing: border-box;
    text-align: center;
    color: $color-white;

    &:hover {
      color: $color-white;
    }
  }

  @include breakpoint($break-xsmall) {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }

  @include breakpoint($break-medium) {
    max-height: 15rem;
  }
}

.sublist-title {
  .nav-list-item & {
    display: flex;
    flex-wrap: wrap;
    flex: 1 0 auto;
    margin: 0.5rem 0 0;
    padding: 0;
    width: 100%;

    @include breakpoint($break-medium) {
      flex: auto;
      margin: 0;
    }
  }
}

.title-highlight {
  .sublist-title & {
    margin-top: 0;
    width: 85%;

    @include breakpoint($break-xsmall) {
      width: auto;
    }
  }
}

.sublist-copy {
  margin-bottom: 0.75rem;
  width: 100%;
  font-size: $ms-neg-1;
}

.sublist-title--list {
  .nav-list-item & {
    margin: 0 0 1.5rem;
    border-bottom: 1px solid $color-border;
  }
}

.header-nav__list-secondary--newsletter {
  @include breakpoint($break-medium) {
    left: auto;
    right: -1.5rem;
    width: 50%;
    min-width: 610px;
  }
}

.newsletter-copy {
  margin: 0;
}

.btn {
  .sublist & {
    display: block;
    margin-bottom: 1.5rem;

    @include breakpoint($break-medium) {
      margin: 0;
    }
  }

  .nav-newsletter & {
    margin-top: 0.25rem;
    width: 100%;

    @include breakpoint($break-medium) {
      float: right;
      width: auto;
    }
  }

  .nav-list-item--full & {
    margin: 0.5rem 0 1rem;
    width: 100%;

    @include breakpoint($break-medium) {
      margin-bottom: 0;
      max-width: 12.5rem;
    }
  }
}

.form-input {
  .nav-newsletter & {
    margin-top: -0.31rem;
  }
}

.sublist-container {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.sublist {
  flex: 0 1 100%;
  margin: 0;
  padding: 0;
  width: 100%;

  @include breakpoint($break-small) {
    flex: 0 1 62%;
  }

  @include breakpoint($break-medium) {
    flex: 0 1 70%;
  }

  @include breakpoint($break-large) {
    flex: 0 1 64%;
  }
}

.sublist--main {
  margin-bottom: 0.5rem;

  @include breakpoint($break-small) {
    flex: 0 1 33%;
  }

  @include breakpoint($break-medium) {
    flex: 0 1 27%;
    margin-bottom: 0;
  }

  @include breakpoint($break-large) {
    flex: 0 1 33%;
  }
}

.icon--search {
  .header-btn-search-open & {
    width: 1.5rem;
    height: 1.5rem;
    stroke: $color-white;
    stroke-width: 5;

    @include breakpoint($break-medium) {
      width: 1.3rem;
      height: 1.4rem;
      stroke: $color-header;

      &:hover {
        stroke: $color-header-light;
      }
    }
  }
}

.icon--close {
  .header & {
    margin-top: 0.25rem;
    width: 3rem;
    height: 3rem;
    stroke: $color-white;
    transition: $transition;
  }

  .header-btn-search-close & {
    width: 2.5rem;
    height: 2.5rem;

    @include breakpoint($break-medium) {
      margin-top: 0;
      width: 2.3rem;
      height: 2.3rem;
      stroke: $color-header;

      &:hover {
        stroke: $color-header-light;
      }
    }
  }

  .btn--close--submenu & {
    width: 2rem;
    height: 2rem;
    stroke: $color-gray;
  }
}

.icon--map-pin {
  .sublist-title & {
    margin-right: 0.25rem;
    width: 1.25rem;
    height: 1.25rem;
    stroke-width: 4;
    stroke: $color-gray-light;
  }
}

.icon--star {
  .sublist-title & {
    width: 1.2rem;
    height: 1.2rem;
    fill: $color-gray-lighter;
  }
}

.icon--tickets {
  .sublist-title & {
    width: 1.25rem;
    height: 1.25rem;
    stroke-width: 4;
    stroke: $color-gray-light;
  }
}

.icon--email {
  .sublist-title & {
    width: 1.25rem;
    height: 1.25rem;
    stroke-width: 4;
    stroke: $color-gray-light;
  }
}

.icon--arrow-bottom {
  .nav-link-item & {
    position: relative;
    top: -1px;
    width: 1rem;
    height: 1rem;
    stroke: $color-header;
    stroke-width: 6;
    transition: $transition;
    transform: rotate(0deg);
  }

  .nav-link-item:hover & {
    stroke: $color-header-light;
  }

  .nav-list-item.is-open & {
    transform: rotate(-90deg);
    stroke: $color-header-light;
  }
}

.icon {
  .header-btns .btn:hover & {
    stroke: $color-white;

    @include breakpoint($break-medium) {
      stroke: $color-header-light;
    }
  }
}

.header-nav-close {
  position: absolute;
  top: 0;
  right: 0;
}

.btn--close--submenu {
  display: none;
  top: 1.88rem;
  right: 1rem;

  @include breakpoint($break-medium) {
    display: block;
  }
}

.section-title {
  .sublist-title & {
    margin-bottom: 0.75rem;
  }
}
  • URL: /components/raw/header/Header.scss
  • Filesystem Path: src/components/02-Patterns/Header/Header.scss
  • Size: 14.4 KB

There are no notes for this item.