<header role="banner" class="header header--large ">
<div class="header__container">
<div class="header__overlay"></div>
<div class="header__inner">
<div class="header__topbar">
<div class="header__topbar-inner">
<a href="#" class="header__logo" title="Return to start page">
<img src="/swegon-logo.svg" alt="">
</a>
</div>
<div class="header__search" id="header__search">
<div class="header__search-inner">
<div data-react="search-widget" data-props="{"endpoint":"/mocks/api/search-results.json","language":"en","searchQueryKey":"q","searchPageUrl":"/components/preview/product-search/","placeholderText":"Sök produkter","form":{"method":"GET"},"className":"search-field--big search-field--with-clear-button","seeMoreText":"Visa alla","enableFocusTrap":true,"minQueryLength":2,"closeLabel":"Stäng","categoriesLabel":"Search in all:","categories":[{"key":"all","value":"All"},{"key":"products","value":"Products"},{"key":"documents","value":"Documents"},{"key":"information","value":"Information"},{"key":"contacts","value":"Contacts"}],"suggestionsLabel":"Suggestions","suggestions":[{"label":"Eagle Ceiling","type":"products"},{"label":"Eagle Free","type":"documents"},{"label":"Eagle Wall","type":""},{"label":"Eagle Single","type":"information"},{"label":"Eagle Double","type":""}]}"></div>
</div>
</div>
</div>
<nav class="header__mobile-navigation">
<div clasS="header__mobile-navigation-item">
<button class="search-button open-search-button" aria-expanded="false" aria-controls="header__search">
<svg class="icon search-button__icon" focusable="false">
<use xlink:href="#icon-search-small"></use>
</svg>
<span class="search-button__label">
Sök
</span>
</button>
</div>
<div clasS="header__mobile-navigation-item">
<button class="menu-button">
<span class="menu-button__icon"></span>
<span class="menu-button__label-wrapper">
<span class="menu-button__label menu-button__label--close">Meny</span>
<span class="menu-button__label menu-button__label--open">Stäng</span>
</span>
</button>
</div>
</nav>
<div class="header__main-nav">
<div class="header__primary-nav">
<div class="header__secondary-nav">
<nav role="navigation" class="secondary-nav" aria-label="Menu">
<ul class="secondary-nav__menu">
<li class="secondary-nav__menu-item ">
<button class="secondary-nav__link secondary-nav__link--search open-search-button" aria-expanded="false" aria-controls="header__search">
<svg class="icon secondary-nav__icon" focusable="false">
<use xlink:href="#icon-search-small"></use>
</svg>
Sök
</button>
</li>
<li class="secondary-nav__menu-item ">
<a class="secondary-nav__link " href="#">
Karriär
</a>
</li>
<li class="secondary-nav__menu-item ">
<a class="secondary-nav__link " href="#">
Webshop
</a>
</li>
<li class="secondary-nav__menu-item secondary-nav__link__divider">
<button class="secondary-nav__link " aria-controls="market-selector">
Sverige
</button>
</li>
<li class="secondary-nav__menu-item ">
<a class="secondary-nav__link secondary-nav__link--button " href="#">
Kontakt
</a>
</li>
</ul>
</nav>
</div>
<nav role="navigation" class="primary-nav" aria-label="Menu">
<div class="primary-nav__inner">
<ul class="primary-nav__menu">
<li class="primary-nav__menu-item ">
<a href="#" class="primary-nav__link">
<span class="primary-nav__menu-item-inner">
Why Swegon?
</span>
</a>
</li>
<li class="primary-nav__menu-item ">
<a href="#" class="primary-nav__link" aria-controls="references">
<span class="primary-nav__menu-item-inner">
References
</span>
<span class="primary-nav__icon">
<svg class="icon " focusable="false">
<use xlink:href="#icon-chevron-right"></use>
</svg>
</span>
</a>
</li>
<li class="primary-nav__menu-item ">
<a href="#" class="primary-nav__link">
<span class="primary-nav__menu-item-inner">
Guides
</span>
</a>
</li>
<li class="primary-nav__menu-item ">
<a href="#" class="primary-nav__link" aria-controls="products-and-services">
<span class="primary-nav__menu-item-inner">
Products & Services
</span>
<span class="primary-nav__icon">
<svg class="icon " focusable="false">
<use xlink:href="#icon-chevron-right"></use>
</svg>
</span>
</a>
</li>
<li class="primary-nav__menu-item ">
<a href="#" class="primary-nav__link">
<span class="primary-nav__menu-item-inner">
Support
</span>
</a>
</li>
<li class="primary-nav__menu-item ">
<a href="#" class="primary-nav__link">
<span class="primary-nav__menu-item-inner">
About Swegon
</span>
</a>
</li>
<li class="primary-nav__menu-item ">
<a href="#" class="primary-nav__link" target="_blank">
<span class="primary-nav__menu-item-inner">
Blog
</span>
</a>
</li>
<li class="primary-nav__menu-item ">
<a href="#" class="primary-nav__link" target="_blank">
<span class="primary-nav__menu-item-inner">
Air Academy
</span>
</a>
</li>
<li class="primary-nav__menu-item ">
<a href="#" class="primary-nav__link">
<span class="primary-nav__menu-item-inner">
Our brands
</span>
</a>
</li>
</ul>
</div>
</nav>
<nav>
<div class="subnav " id="subnav-products-and-services" aria-hidden="true">
<button class="subnav__button">
<svg class="icon subnav__button-icon" focusable="false">
<use xlink:href="#icon-chevron-left"></use>
</svg>
Main menu
</button>
<div class="subnav__header">
<div class="subnav__title">Products and services</div>
<a href="#" class="link link--small">
<span class="link__label">Show all</span>
</a>
</div>
<div class="subnav__content">
<ul class="subnav__list">
<li class="subnav__list-item">
<a href="#" class="link link--icon link--dark link--small" aria-controls="subnav-air-handling">
<span class="link__label">Air Handling</span>
<svg class="icon link__icon" focusable="false">
<use xlink:href="#icon-chevron-right"></use>
</svg>
</a>
<div class="subnav subnav--submenu" id="subnav-air-handling" aria-hidden="">
<button class="subnav__button">
<svg class="icon subnav__button-icon" focusable="false">
<use xlink:href="#icon-chevron-left"></use>
</svg>
Products and services
</button>
<div class="subnav__header">
<div class="subnav__title">Air Handling</div>
<a href="#" class="link link--small">
<span class="link__label">Show all</span>
</a>
</div>
<div class="subnav__content">
<ul class="subnav__list">
<li class="subnav__list-item">
<a href="#" class="link link--dark link--small">
<span class="link__label">Compact</span>
</a>
</li>
<li class="subnav__list-item">
<a href="#" class="link link--dark link--small">
<span class="link__label">Gold</span>
</a>
</li>
<li class="subnav__list-item">
<a href="#" class="link link--dark link--small">
<span class="link__label">Global</span>
</a>
</li>
<li class="subnav__list-item">
<a href="#" class="link link--dark link--small">
<span class="link__label">Silver M</span>
</a>
</li>
<li class="subnav__list-item">
<a href="#" class="link link--dark link--small">
<span class="link__label">Global FW</span>
</a>
</li>
</ul>
</div>
</div>
</li>
<li class="subnav__list-item">
<a href="#" class="link link--icon link--dark link--small" aria-controls="subnav-room-units">
<span class="link__label">Room Units</span>
<svg class="icon link__icon" focusable="false">
<use xlink:href="#icon-chevron-right"></use>
</svg>
</a>
<div class="subnav subnav--submenu" id="subnav-room-units" aria-hidden="">
<button class="subnav__button">
<svg class="icon subnav__button-icon" focusable="false">
<use xlink:href="#icon-chevron-left"></use>
</svg>
Products and services
</button>
<div class="subnav__header">
<div class="subnav__title">Room Units</div>
<a href="#" class="link link--small">
<span class="link__label">Show all</span>
</a>
</div>
<div class="subnav__content">
<ul class="subnav__list">
<li class="subnav__list-item">
<a href="#" class="link link--dark link--small">
<span class="link__label">Waterbourne Climate</span>
</a>
</li>
<li class="subnav__list-item">
<a href="#" class="link link--dark link--small">
<span class="link__label">Air Diffusers and Grilles</span>
</a>
</li>
</ul>
</div>
</div>
</li>
<li class="subnav__list-item">
<a href="#" class="link link--dark link--small">
<span class="link__label">Air distribution</span>
</a>
</li>
<li class="subnav__list-item">
<a href="#" class="link link--icon link--dark link--small" aria-controls="subnav-cooling-and-heating">
<span class="link__label">Cooling & Heating</span>
<svg class="icon link__icon" focusable="false">
<use xlink:href="#icon-chevron-right"></use>
</svg>
</a>
<div class="subnav subnav--submenu" id="subnav-cooling-and-heating" aria-hidden="">
<button class="subnav__button">
<svg class="icon subnav__button-icon" focusable="false">
<use xlink:href="#icon-chevron-left"></use>
</svg>
Products and services
</button>
<div class="subnav__header">
<div class="subnav__title">Cooling & Heating</div>
<a href="#" class="link link--small">
<span class="link__label">Show all</span>
</a>
</div>
<div class="subnav__content">
<ul class="subnav__list">
<li class="subnav__list-item">
<a href="#" class="link link--dark link--small">
<span class="link__label">Air-Cooled Chillers and Heat Pumps</span>
</a>
</li>
<li class="subnav__list-item">
<a href="#" class="link link--dark link--small">
<span class="link__label">Water-cooled Chillers and Heat Pumps</span>
</a>
</li>
<li class="subnav__list-item">
<a href="#" class="link link--dark link--small">
<span class="link__label">Air source multifunction</span>
</a>
</li>
<li class="subnav__list-item">
<a href="#" class="link link--dark link--small">
<span class="link__label">IT Cooling</span>
</a>
</li>
<li class="subnav__list-item">
<a href="#" class="link link--dark link--small">
<span class="link__label">Remote Source</span>
</a>
</li>
<li class="subnav__list-item">
<a href="#" class="link link--dark link--small">
<span class="link__label">Water source multifunction</span>
</a>
</li>
</ul>
</div>
</div>
</li>
<li class="subnav__list-item">
<a href="#" class="link link--dark link--small">
<span class="link__label">Louvres</span>
</a>
</li>
<li class="subnav__list-item">
<a href="#" class="link link--dark link--small">
<span class="link__label">Air Filtration</span>
</a>
</li>
<li class="subnav__list-item">
<a href="#" class="link link--dark link--small">
<span class="link__label">Optimisation systems</span>
</a>
</li>
<li class="subnav__list-item">
<a href="#" class="link link--dark link--small">
<span class="link__label">Connected services</span>
</a>
</li>
</ul>
</div>
</div>
<div class="subnav " id="subnav-references" aria-hidden="true">
<button class="subnav__button">
<svg class="icon subnav__button-icon" focusable="false">
<use xlink:href="#icon-chevron-left"></use>
</svg>
Main menu
</button>
<div class="subnav__header">
<div class="subnav__title">References</div>
<a href="#" class="link link--small">
<span class="link__label">Show all</span>
</a>
</div>
<div class="subnav__content">
<ul class="subnav__list">
<li class="subnav__list-item">
<a href="#" class="link link--icon link--dark link--small" aria-controls="subnav-hotels">
<span class="link__label">Hotels</span>
<svg class="icon link__icon" focusable="false">
<use xlink:href="#icon-chevron-right"></use>
</svg>
</a>
<div class="subnav subnav--submenu" id="subnav-hotels" aria-hidden="">
<button class="subnav__button">
<svg class="icon subnav__button-icon" focusable="false">
<use xlink:href="#icon-chevron-left"></use>
</svg>
References
</button>
<div class="subnav__header">
<div class="subnav__title">Hotels</div>
<a href="#" class="link link--small">
<span class="link__label">Show all</span>
</a>
</div>
<div class="subnav__content">
<ul class="subnav__list">
<li class="subnav__list-item">
<a href="#" class="link link--dark link--small">
<span class="link__label">Citizen M</span>
</a>
</li>
<li class="subnav__list-item">
<a href="#" class="link link--dark link--small">
<span class="link__label">Hotel Norge by Scandic</span>
</a>
</li>
</ul>
</div>
</div>
</li>
<li class="subnav__list-item">
<a href="#" class="link link--icon link--dark link--small" aria-controls="subnav-offices">
<span class="link__label">Offices</span>
<svg class="icon link__icon" focusable="false">
<use xlink:href="#icon-chevron-right"></use>
</svg>
</a>
<div class="subnav subnav--submenu" id="subnav-offices" aria-hidden="">
<button class="subnav__button">
<svg class="icon subnav__button-icon" focusable="false">
<use xlink:href="#icon-chevron-left"></use>
</svg>
References
</button>
<div class="subnav__header">
<div class="subnav__title">Offices</div>
<a href="#" class="link link--small">
<span class="link__label">Show all</span>
</a>
</div>
<div class="subnav__content">
<ul class="subnav__list">
<li class="subnav__list-item">
<a href="#" class="link link--dark link--small">
<span class="link__label">Stockholm Waterfront</span>
</a>
</li>
<li class="subnav__list-item">
<a href="#" class="link link--dark link--small">
<span class="link__label">Assemblin Uppsala</span>
</a>
</li>
<li class="subnav__list-item">
<a href="#" class="link link--dark link--small">
<span class="link__label">30 St. Mary Aze, London</span>
</a>
</li>
<li class="subnav__list-item">
<a href="#" class="link link--dark link--small">
<span class="link__label">Green Hall Business Centre, Vilnius</span>
</a>
</li>
</ul>
</div>
</div>
</li>
<li class="subnav__list-item">
<a href="#" class="link link--dark link--small">
<span class="link__label">Commmercial Buildings</span>
</a>
</li>
<li class="subnav__list-item">
<a href="#" class="link link--dark link--small">
<span class="link__label">Apartment Buildings</span>
</a>
</li>
<li class="subnav__list-item">
<a href="#" class="link link--dark link--small">
<span class="link__label">Industrial buildings</span>
</a>
</li>
<li class="subnav__list-item">
<a href="#" class="link link--icon link--dark link--small" aria-controls="subnav-other-buildings">
<span class="link__label">Other Buildings</span>
<svg class="icon link__icon" focusable="false">
<use xlink:href="#icon-chevron-right"></use>
</svg>
</a>
<div class="subnav subnav--submenu" id="subnav-other-buildings" aria-hidden="">
<button class="subnav__button">
<svg class="icon subnav__button-icon" focusable="false">
<use xlink:href="#icon-chevron-left"></use>
</svg>
References
</button>
<div class="subnav__header">
<div class="subnav__title">Other buildings</div>
<a href="#" class="link link--small">
<span class="link__label">Show all</span>
</a>
</div>
<div class="subnav__content">
<ul class="subnav__list">
<li class="subnav__list-item">
<a href="#" class="link link--dark link--small">
<span class="link__label">Palazzo Ezzelino, Padua</span>
</a>
</li>
<li class="subnav__list-item">
<a href="#" class="link link--dark link--small">
<span class="link__label">Malmö Live, Sweden</span>
</a>
</li>
</ul>
</div>
</div>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
</div>
<div class="mega-menu">
<div id="products-and-services" aria-hidden="true" class="mega-menu__item">
<div class="mega-menu__item-inner">
<div class="mega-menu__header">
<a href="" class="link link--icon link--dark link--big link--bold">
<span class="link__label">Product and services</span>
<svg class="icon link__icon" focusable="false">
<use xlink:href="#icon-chevron-right"></use>
</svg>
</a>
</div>
<div class="mega-menu__content">
<div class="row">
<div class="col col--span-12 col--span-xs-6 col--span-s-4 col--span-l-3">
<ul class="mega-menu__list">
<li class="mega-menu__list-item">
<a href="" class="link link--icon link--dark link--bold">
<span class="link__label">Air Handling</span>
<svg class="icon link__icon" focusable="false">
<use xlink:href="#icon-chevron-right"></use>
</svg>
</a>
</li>
<li class="mega-menu__list-item">
<a href="" class="link link--dark link--small">
<span class="link__label">Compact</span>
</a>
</li>
<li class="mega-menu__list-item">
<a href="" class="link link--dark link--small">
<span class="link__label">Gold</span>
</a>
</li>
<li class="mega-menu__list-item">
<a href="" class="link link--dark link--small">
<span class="link__label">Global</span>
</a>
</li>
<li class="mega-menu__list-item">
<a href="" class="link link--dark link--small">
<span class="link__label">Silver M</span>
</a>
</li>
<li class="mega-menu__list-item">
<a href="" class="link link--dark link--small">
<span class="link__label">Global FW</span>
</a>
</li>
</ul>
</div>
<div class="col col--span-12 col--span-xs-6 col--span-s-4 col--span-l-3">
<ul class="mega-menu__list">
<li class="mega-menu__list-item">
<a href="" class="link link--icon link--dark link--bold">
<span class="link__label">Room Units</span>
<svg class="icon link__icon" focusable="false">
<use xlink:href="#icon-chevron-right"></use>
</svg>
</a>
</li>
<li class="mega-menu__list-item">
<a href="" class="link link--dark link--small">
<span class="link__label">Waterbourne Climate</span>
</a>
</li>
<li class="mega-menu__list-item">
<a href="" class="link link--dark link--small">
<span class="link__label">Air Diffusers and Grilles</span>
</a>
</li>
</ul>
</div>
<div class="col col--span-12 col--span-xs-6 col--span-s-4 col--span-l-3">
<ul class="mega-menu__list">
<li class="mega-menu__list-item">
<a href="" class="link link--icon link--dark link--bold">
<span class="link__label">Cooling & Heating</span>
<svg class="icon link__icon" focusable="false">
<use xlink:href="#icon-chevron-right"></use>
</svg>
</a>
</li>
<li class="mega-menu__list-item">
<a href="" class="link link--dark link--small">
<span class="link__label">Air-Cooled Chillers and Heat Pumps</span>
</a>
</li>
<li class="mega-menu__list-item">
<a href="" class="link link--dark link--small">
<span class="link__label">Water-cooled Chillers and Heat Pumps</span>
</a>
</li>
<li class="mega-menu__list-item">
<a href="" class="link link--dark link--small">
<span class="link__label">Air source multifunction</span>
</a>
</li>
<li class="mega-menu__list-item">
<a href="" class="link link--dark link--small">
<span class="link__label">IT Cooling</span>
</a>
</li>
<li class="mega-menu__list-item">
<a href="" class="link link--dark link--small">
<span class="link__label">Remote Source</span>
</a>
</li>
<li class="mega-menu__list-item">
<a href="" class="link link--dark link--small">
<span class="link__label">Water source multifunction</span>
</a>
</li>
</ul>
</div>
<div class="col col--span-12 col--span-xs-6 col--span-s-4 col--span-l-3">
<ul class="mega-menu__list">
<li class="mega-menu__list-item">
<a href="" class="link link--icon link--dark link--bold">
<span class="link__label">Air distribution</span>
<svg class="icon link__icon" focusable="false">
<use xlink:href="#icon-chevron-right"></use>
</svg>
</a>
</li>
<li class="mega-menu__list-item">
<a href="" class="link link--dark link--small">
<span class="link__label">Sound Attenuators</span>
</a>
</li>
<li class="mega-menu__list-item">
<a href="" class="link link--dark link--small">
<span class="link__label">Roof fans</span>
</a>
</li>
<li class="mega-menu__list-item">
<a href="" class="link link--dark link--small">
<span class="link__label">Volume Control and Dampers</span>
</a>
</li>
<li class="mega-menu__list-item">
<a href="" class="link link--dark link--small">
<span class="link__label">Airborne Room</span>
</a>
</li>
<li class="mega-menu__list-item">
<a href="" class="link link--dark link--small">
<span class="link__label">Remote Source</span>
</a>
</li>
<li class="mega-menu__list-item">
<a href="" class="link link--dark link--small">
<span class="link__label">Water source multifunction</span>
</a>
</li>
</ul>
</div>
<div class="col col--span-12 col--span-xs-6 col--span-s-4 col--span-l-3">
<ul class="mega-menu__list">
<li class="mega-menu__list-item">
<a href="" class="link link--icon link--dark link--bold">
<span class="link__label">Smoke and Fire</span>
<svg class="icon link__icon" focusable="false">
<use xlink:href="#icon-chevron-right"></use>
</svg>
</a>
</li>
<li class="mega-menu__list-item">
<a href="" class="link link--dark link--small">
<span class="link__label">Actionair Dampers</span>
</a>
</li>
<li class="mega-menu__list-item">
<a href="" class="link link--dark link--small">
<span class="link__label">Actionpac Control Systems</span>
</a>
</li>
</ul>
</div>
<div class="col col--span-12 col--span-xs-6 col--span-s-4 col--span-l-3">
<ul class="mega-menu__list">
<li class="mega-menu__list-item">
<a href="" class="link link--icon link--dark link--bold">
<span class="link__label">Louvres</span>
<svg class="icon link__icon" focusable="false">
<use xlink:href="#icon-chevron-right"></use>
</svg>
</a>
</li>
<li class="mega-menu__list-item">
<a href="" class="link link--dark link--small">
<span class="link__label">World class glass and metal Naco Louvres</span>
</a>
</li>
</ul>
</div>
<div class="col col--span-12 col--span-xs-6 col--span-s-4 col--span-l-3">
<ul class="mega-menu__list">
<li class="mega-menu__list-item">
<a href="" class="link link--icon link--dark link--bold">
<span class="link__label">Air Filtration</span>
<svg class="icon link__icon" focusable="false">
<use xlink:href="#icon-chevron-right"></use>
</svg>
</a>
</li>
<li class="mega-menu__list-item">
<a href="" class="link link--dark link--small">
<span class="link__label">Envirco® Fan Filter Units</span>
</a>
</li>
<li class="mega-menu__list-item">
<a href="" class="link link--dark link--small">
<span class="link__label">Trion® Electrostatic Precipitators</span>
</a>
</li>
</ul>
</div>
<div class="col col--span-12 col--span-xs-6 col--span-s-4 col--span-l-3">
<ul class="mega-menu__list">
<li class="mega-menu__list-item">
<a href="" class="link link--icon link--dark link--bold">
<span class="link__label">Optimisation systems</span>
<svg class="icon link__icon" focusable="false">
<use xlink:href="#icon-chevron-right"></use>
</svg>
</a>
</li>
<li class="mega-menu__list-item">
<a href="" class="link link--dark link--small">
<span class="link__label">System Products</span>
</a>
</li>
<li class="mega-menu__list-item">
<a href="" class="link link--dark link--small">
<span class="link__label">Demand Controlled Indoor Climate</span>
</a>
</li>
<li class="mega-menu__list-item">
<a href="" class="link link--dark link--small">
<span class="link__label">VAV Products</span>
</a>
</li>
<li class="mega-menu__list-item">
<a href="" class="link link--dark link--small">
<span class="link__label">Cooling & heating system optimisation</span>
</a>
</li>
</ul>
</div>
<div class="col col--span-12 col--span-xs-6 col--span-s-4 col--span-l-3">
<ul class="mega-menu__list">
<li class="mega-menu__list-item">
<a href="" class="link link--icon link--dark link--bold">
<span class="link__label">Connected services</span>
<svg class="icon link__icon" focusable="false">
<use xlink:href="#icon-chevron-right"></use>
</svg>
</a>
</li>
<li class="mega-menu__list-item">
<a href="" class="link link--dark link--small">
<span class="link__label">Swegon Connect</span>
</a>
</li>
<li class="mega-menu__list-item">
<a href="" class="link link--dark link--small">
<span class="link__label">Blueye</span>
</a>
</li>
</ul>
</div>
</div>
</div>
<a href="#" class="mega-menu__close" aria-label="Close menu">Close menu</a>
</div>
</div>
<div id="references" aria-hidden="true" class="mega-menu__item">
<div class="mega-menu__item-inner">
<div class="mega-menu__header">
<a href="" class="link link--icon link--dark link--big link--bold">
<span class="link__label">References</span>
<svg class="icon link__icon" focusable="false">
<use xlink:href="#icon-chevron-right"></use>
</svg>
</a>
</div>
<div class="mega-menu__content">
<div class="row">
<div class="col col--span-12 col--span-xs-6 col--span-s-4 col--span-l-3">
<ul class="mega-menu__list">
<li class="mega-menu__list-item">
<a href="" class="link link--icon link--dark link--bold">
<span class="link__label">Air Filtration</span>
<svg class="icon link__icon" focusable="false">
<use xlink:href="#icon-chevron-right"></use>
</svg>
</a>
</li>
<li class="mega-menu__list-item">
<a href="" class="link link--dark link--small">
<span class="link__label">Envirco® Fan Filter Units</span>
</a>
</li>
<li class="mega-menu__list-item">
<a href="" class="link link--dark link--small">
<span class="link__label">Trion® Electrostatic Precipitators</span>
</a>
</li>
</ul>
</div>
<div class="col col--span-12 col--span-xs-6 col--span-s-4 col--span-l-3">
<ul class="mega-menu__list">
<li class="mega-menu__list-item">
<a href="" class="link link--icon link--dark link--bold">
<span class="link__label">Optimisation systems</span>
<svg class="icon link__icon" focusable="false">
<use xlink:href="#icon-chevron-right"></use>
</svg>
</a>
</li>
<li class="mega-menu__list-item">
<a href="" class="link link--dark link--small">
<span class="link__label">System Products</span>
</a>
</li>
<li class="mega-menu__list-item">
<a href="" class="link link--dark link--small">
<span class="link__label">Demand Controlled Indoor Climate</span>
</a>
</li>
<li class="mega-menu__list-item">
<a href="" class="link link--dark link--small">
<span class="link__label">VAV Products</span>
</a>
</li>
<li class="mega-menu__list-item">
<a href="" class="link link--dark link--small">
<span class="link__label">Cooling & heating system optimisation</span>
</a>
</li>
</ul>
</div>
<div class="col col--span-12 col--span-xs-6 col--span-s-4 col--span-l-3">
<ul class="mega-menu__list">
<li class="mega-menu__list-item">
<a href="" class="link link--icon link--dark link--bold">
<span class="link__label">Connected services</span>
<svg class="icon link__icon" focusable="false">
<use xlink:href="#icon-chevron-right"></use>
</svg>
</a>
</li>
<li class="mega-menu__list-item">
<a href="" class="link link--dark link--small">
<span class="link__label">Swegon Connect</span>
</a>
</li>
<li class="mega-menu__list-item">
<a href="" class="link link--dark link--small">
<span class="link__label">Blueye</span>
</a>
</li>
</ul>
</div>
</div>
</div>
<a href="#" class="mega-menu__close" aria-label="Close menu">Close menu</a>
</div>
</div>
</div>
</div>
</header>
<header role="banner" class="header header--large {{additionalClasses}}">
<div class="header__container">
<div class="header__overlay"></div>
<div class="header__inner">
<div class="header__topbar">
<div class="header__topbar-inner">
<a href="#" class="header__logo" title="Return to start page">
<img src="{{logo}}" alt="">
</a>
</div>
{{#if hasSearchWidget}}
<div class="header__search" id="header__search">
<div class="header__search-inner">
{{ render "@search-widget--with-categories-and-popular-searches"}}
</div>
</div>
{{/if}}
</div>
<nav class="header__mobile-navigation">
<div clasS="header__mobile-navigation-item">
<button class="search-button open-search-button" aria-expanded="false" aria-controls="header__search">
<svg class="icon search-button__icon" focusable="false">
<use xlink:href="#icon-search-small"></use>
</svg>
<span class="search-button__label">
Sök
</span>
</button>
</div>
<div clasS="header__mobile-navigation-item">
<button class="menu-button">
<span class="menu-button__icon"></span>
<span class="menu-button__label-wrapper">
<span class="menu-button__label menu-button__label--close">Meny</span>
<span class="menu-button__label menu-button__label--open">Stäng</span>
</span>
</button>
</div>
</nav>
<div class="header__main-nav">
<div class="header__primary-nav">
<div class="header__secondary-nav">
{{> @secondary-nav secondaryNav}}
</div>
{{render "@primary-nav"}}
<nav>
{{#each subnav}}
{{>@subnav this}}
{{/each}}
</nav>
</div>
</div>
</div>
{{>@mega-menu megaMenu}}
</div>
</header>
{
"logo": "/swegon-logo.svg",
"hasSearchWidget": true,
"secondaryNav": {
"items": [
{
"label": "Sök",
"icon": "search-small",
"tag": "button",
"additionalClasses": "open-search-button",
"modifiers": [
"search"
],
"attributes": {
"aria-expanded": false,
"aria-controls": "header__search"
}
},
{
"label": "Karriär",
"attributes": {
"href": "#"
}
},
{
"label": "Webshop",
"attributes": {
"href": "#"
}
},
{
"label": "Sverige",
"tag": "button",
"isDivider": true,
"attributes": {
"aria-controls": "market-selector"
}
},
{
"label": "Kontakt",
"modifiers": [
"button"
],
"attributes": {
"href": "#"
}
}
]
},
"searchWidget": {
"context": {
"props": {
"endpoint": "/mocks/api/search-results.json",
"language": "en",
"searchQueryKey": "q",
"searchPageUrl": "/components/preview/product-search/",
"placeholderText": "Sök produkter",
"form": {
"method": "GET"
},
"className": "search-field--big",
"seeMoreText": "Visa alla",
"enableFocusTrap": false
}
},
"variants": [
{
"name": "with categories and popular searches",
"context": {
"props": {
"endpoint": "/mocks/api/search-results.json",
"language": "en",
"searchQueryKey": "q",
"searchPageUrl": "/components/preview/product-search/",
"placeholderText": "Sök produkter",
"form": {
"method": "GET"
},
"className": "search-field--big search-field--with-clear-button",
"seeMoreText": "Visa alla",
"enableFocusTrap": true,
"minQueryLength": 2,
"closeLabel": "Stäng",
"categoriesLabel": "Search in all:",
"categories": [
{
"key": "all",
"value": "All"
},
{
"key": "products",
"value": "Products"
},
{
"key": "documents",
"value": "Documents"
},
{
"key": "information",
"value": "Information"
},
{
"key": "contacts",
"value": "Contacts"
}
],
"suggestionsLabel": "Suggestions",
"suggestions": [
{
"label": "Eagle Ceiling",
"type": "products"
},
{
"label": "Eagle Free",
"type": "documents"
},
{
"label": "Eagle Wall",
"type": ""
},
{
"label": "Eagle Single",
"type": "information"
},
{
"label": "Eagle Double",
"type": ""
}
]
}
}
}
],
"props": {
"endpoint": "/mocks/api/search-results.json",
"language": "en",
"searchQueryKey": "q",
"searchPageUrl": "/components/preview/product-search/",
"placeholderText": "Sök produkter",
"form": {
"method": "GET"
},
"className": "search-field--big-l h-no-margin-bottom",
"seeMoreText": "Visa alla",
"enableFocusTrap": false
}
},
"megaMenu": {
"menus": [
{
"id": "products-and-services",
"hidden": true,
"title": {
"icon": "chevron-right",
"label": "Product and services",
"modifiers": [
"dark",
"big",
"bold"
]
},
"menu": [
{
"items": [
{
"label": "Air Handling",
"icon": "chevron-right",
"modifiers": [
"dark",
"bold"
]
},
{
"label": "Compact",
"modifiers": [
"dark",
"small"
]
},
{
"label": "Gold",
"modifiers": [
"dark",
"small"
]
},
{
"label": "Global",
"modifiers": [
"dark",
"small"
]
},
{
"label": "Silver M",
"modifiers": [
"dark",
"small"
]
},
{
"label": "Global FW",
"modifiers": [
"dark",
"small"
]
}
]
},
{
"items": [
{
"label": "Room Units",
"icon": "chevron-right",
"modifiers": [
"dark",
"bold"
]
},
{
"label": "Waterbourne Climate",
"modifiers": [
"dark",
"small"
]
},
{
"label": "Air Diffusers and Grilles",
"modifiers": [
"dark",
"small"
]
}
]
},
{
"items": [
{
"label": "Cooling & Heating",
"icon": "chevron-right",
"modifiers": [
"dark",
"bold"
]
},
{
"label": "Air-Cooled Chillers and Heat Pumps",
"modifiers": [
"dark",
"small"
]
},
{
"label": "Water-cooled Chillers and Heat Pumps",
"modifiers": [
"dark",
"small"
]
},
{
"label": "Air source multifunction",
"modifiers": [
"dark",
"small"
]
},
{
"label": "IT Cooling",
"modifiers": [
"dark",
"small"
]
},
{
"label": "Remote Source",
"modifiers": [
"dark",
"small"
]
},
{
"label": "Water source multifunction",
"modifiers": [
"dark",
"small"
]
}
]
},
{
"items": [
{
"label": "Air distribution",
"icon": "chevron-right",
"modifiers": [
"dark",
"bold"
]
},
{
"label": "Sound Attenuators",
"modifiers": [
"dark",
"small"
]
},
{
"label": "Roof fans",
"modifiers": [
"dark",
"small"
]
},
{
"label": "Volume Control and Dampers",
"modifiers": [
"dark",
"small"
]
},
{
"label": "Airborne Room",
"modifiers": [
"dark",
"small"
]
},
{
"label": "Remote Source",
"modifiers": [
"dark",
"small"
]
},
{
"label": "Water source multifunction",
"modifiers": [
"dark",
"small"
]
}
]
},
{
"items": [
{
"label": "Smoke and Fire",
"icon": "chevron-right",
"modifiers": [
"dark",
"bold"
]
},
{
"label": "Actionair Dampers",
"modifiers": [
"dark",
"small"
]
},
{
"label": "Actionpac Control Systems",
"modifiers": [
"dark",
"small"
]
}
]
},
{
"items": [
{
"label": "Louvres",
"icon": "chevron-right",
"modifiers": [
"dark",
"bold"
]
},
{
"label": "World class glass and metal Naco Louvres",
"modifiers": [
"dark",
"small"
]
}
]
},
{
"items": [
{
"label": "Air Filtration",
"icon": "chevron-right",
"modifiers": [
"dark",
"bold"
]
},
{
"label": "Envirco® Fan Filter Units",
"modifiers": [
"dark",
"small"
]
},
{
"label": "Trion® Electrostatic Precipitators",
"modifiers": [
"dark",
"small"
]
}
]
},
{
"items": [
{
"label": "Optimisation systems",
"icon": "chevron-right",
"modifiers": [
"dark",
"bold"
]
},
{
"label": "System Products",
"modifiers": [
"dark",
"small"
]
},
{
"label": "Demand Controlled Indoor Climate",
"modifiers": [
"dark",
"small"
]
},
{
"label": "VAV Products",
"modifiers": [
"dark",
"small"
]
},
{
"label": "Cooling & heating system optimisation",
"modifiers": [
"dark",
"small"
]
}
]
},
{
"items": [
{
"label": "Connected services",
"icon": "chevron-right",
"modifiers": [
"dark",
"bold"
]
},
{
"label": "Swegon Connect",
"modifiers": [
"dark",
"small"
]
},
{
"label": "Blueye",
"modifiers": [
"dark",
"small"
]
}
]
}
]
},
{
"id": "references",
"hidden": true,
"title": {
"icon": "chevron-right",
"label": "References",
"modifiers": [
"dark",
"big",
"bold"
]
},
"menu": [
{
"items": [
{
"label": "Air Filtration",
"icon": "chevron-right",
"modifiers": [
"dark",
"bold"
]
},
{
"label": "Envirco® Fan Filter Units",
"modifiers": [
"dark",
"small"
]
},
{
"label": "Trion® Electrostatic Precipitators",
"modifiers": [
"dark",
"small"
]
}
]
},
{
"items": [
{
"label": "Optimisation systems",
"icon": "chevron-right",
"modifiers": [
"dark",
"bold"
]
},
{
"label": "System Products",
"modifiers": [
"dark",
"small"
]
},
{
"label": "Demand Controlled Indoor Climate",
"modifiers": [
"dark",
"small"
]
},
{
"label": "VAV Products",
"modifiers": [
"dark",
"small"
]
},
{
"label": "Cooling & heating system optimisation",
"modifiers": [
"dark",
"small"
]
}
]
},
{
"items": [
{
"label": "Connected services",
"icon": "chevron-right",
"modifiers": [
"dark",
"bold"
]
},
{
"label": "Swegon Connect",
"modifiers": [
"dark",
"small"
]
},
{
"label": "Blueye",
"modifiers": [
"dark",
"small"
]
}
]
}
]
}
]
},
"subnav": [
{
"id": "subnav-products-and-services",
"hidden": true,
"title": "Products and services",
"backButtonLabel": "Main menu",
"link": {
"label": "Show all",
"href": "#",
"modifiers": "small"
},
"items": [
{
"link": {
"label": "Air Handling",
"href": "#",
"icon": "chevron-right",
"modifiers": [
"dark",
"small"
],
"attributes": {
"aria-controls": "subnav-air-handling"
}
},
"submenu": {
"id": "subnav-air-handling",
"modifiers": [
"submenu"
],
"title": "Air Handling",
"backButtonLabel": "Products and services",
"link": {
"label": "Show all",
"href": "#",
"modifiers": "small"
},
"items": [
{
"link": {
"label": "Compact",
"href": "#",
"modifiers": [
"dark",
"small"
]
}
},
{
"link": {
"label": "Gold",
"href": "#",
"modifiers": [
"dark",
"small"
]
}
},
{
"link": {
"label": "Global",
"href": "#",
"modifiers": [
"dark",
"small"
]
}
},
{
"link": {
"label": "Silver M",
"href": "#",
"modifiers": [
"dark",
"small"
]
}
},
{
"link": {
"label": "Global FW",
"href": "#",
"modifiers": [
"dark",
"small"
]
}
}
]
}
},
{
"link": {
"label": "Room Units",
"href": "#",
"icon": "chevron-right",
"modifiers": [
"dark",
"small"
],
"attributes": {
"aria-controls": "subnav-room-units"
}
},
"submenu": {
"id": "subnav-room-units",
"modifiers": [
"submenu"
],
"title": "Room Units",
"backButtonLabel": "Products and services",
"link": {
"label": "Show all",
"href": "#",
"modifiers": "small"
},
"items": [
{
"link": {
"label": "Waterbourne Climate",
"href": "#",
"modifiers": [
"dark",
"small"
]
}
},
{
"link": {
"label": "Air Diffusers and Grilles",
"href": "#",
"modifiers": [
"dark",
"small"
]
}
}
]
}
},
{
"link": {
"label": "Air distribution",
"href": "#",
"modifiers": [
"dark",
"small"
]
}
},
{
"link": {
"label": "Cooling & Heating",
"href": "#",
"icon": "chevron-right",
"modifiers": [
"dark",
"small"
],
"attributes": {
"aria-controls": "subnav-cooling-and-heating"
}
},
"submenu": {
"id": "subnav-cooling-and-heating",
"modifiers": [
"submenu"
],
"title": "Cooling & Heating",
"backButtonLabel": "Products and services",
"link": {
"label": "Show all",
"href": "#",
"modifiers": "small"
},
"items": [
{
"link": {
"label": "Air-Cooled Chillers and Heat Pumps",
"href": "#",
"modifiers": [
"dark",
"small"
]
}
},
{
"link": {
"label": "Water-cooled Chillers and Heat Pumps",
"href": "#",
"modifiers": [
"dark",
"small"
]
}
},
{
"link": {
"label": "Air source multifunction",
"href": "#",
"modifiers": [
"dark",
"small"
]
}
},
{
"link": {
"label": "IT Cooling",
"href": "#",
"modifiers": [
"dark",
"small"
]
}
},
{
"link": {
"label": "Remote Source",
"href": "#",
"modifiers": [
"dark",
"small"
]
}
},
{
"link": {
"label": "Water source multifunction",
"href": "#",
"modifiers": [
"dark",
"small"
]
}
}
]
}
},
{
"link": {
"label": "Louvres",
"href": "#",
"modifiers": [
"dark",
"small"
]
}
},
{
"link": {
"label": "Air Filtration",
"href": "#",
"modifiers": [
"dark",
"small"
]
}
},
{
"link": {
"label": "Optimisation systems",
"href": "#",
"modifiers": [
"dark",
"small"
]
}
},
{
"link": {
"label": "Connected services",
"href": "#",
"modifiers": [
"dark",
"small"
]
}
}
]
},
{
"id": "subnav-references",
"hidden": true,
"title": "References",
"backButtonLabel": "Main menu",
"link": {
"label": "Show all",
"href": "#",
"modifiers": "small"
},
"items": [
{
"link": {
"label": "Hotels",
"href": "#",
"icon": "chevron-right",
"modifiers": [
"dark",
"small"
],
"attributes": {
"aria-controls": "subnav-hotels"
}
},
"submenu": {
"id": "subnav-hotels",
"modifiers": [
"submenu"
],
"title": "Hotels",
"backButtonLabel": "References",
"link": {
"label": "Show all",
"href": "#",
"modifiers": "small"
},
"items": [
{
"link": {
"label": "Citizen M",
"href": "#",
"modifiers": [
"dark",
"small"
]
}
},
{
"link": {
"label": "Hotel Norge by Scandic",
"href": "#",
"modifiers": [
"dark",
"small"
]
}
}
]
}
},
{
"link": {
"label": "Offices",
"href": "#",
"icon": "chevron-right",
"modifiers": [
"dark",
"small"
],
"attributes": {
"aria-controls": "subnav-offices"
}
},
"submenu": {
"id": "subnav-offices",
"modifiers": [
"submenu"
],
"title": "Offices",
"backButtonLabel": "References",
"link": {
"label": "Show all",
"href": "#",
"modifiers": "small"
},
"items": [
{
"link": {
"label": "Stockholm Waterfront",
"href": "#",
"modifiers": [
"dark",
"small"
]
}
},
{
"link": {
"label": "Assemblin Uppsala",
"href": "#",
"modifiers": [
"dark",
"small"
]
}
},
{
"link": {
"label": "30 St. Mary Aze, London",
"href": "#",
"modifiers": [
"dark",
"small"
]
}
},
{
"link": {
"label": "Green Hall Business Centre, Vilnius",
"href": "#",
"modifiers": [
"dark",
"small"
]
}
}
]
}
},
{
"link": {
"label": "Commmercial Buildings",
"href": "#",
"modifiers": [
"dark",
"small"
]
}
},
{
"link": {
"label": "Apartment Buildings",
"href": "#",
"modifiers": [
"dark",
"small"
]
}
},
{
"link": {
"label": "Industrial buildings",
"href": "#",
"modifiers": [
"dark",
"small"
]
}
},
{
"link": {
"label": "Other Buildings",
"href": "#",
"icon": "chevron-right",
"modifiers": [
"dark",
"small"
],
"attributes": {
"aria-controls": "subnav-other-buildings"
}
},
"submenu": {
"id": "subnav-other-buildings",
"modifiers": [
"submenu"
],
"title": "Other buildings",
"backButtonLabel": "References",
"link": {
"label": "Show all",
"href": "#",
"modifiers": "small"
},
"items": [
{
"link": {
"label": "Palazzo Ezzelino, Padua",
"href": "#",
"modifiers": [
"dark",
"small"
]
}
},
{
"link": {
"label": "Malmö Live, Sweden",
"href": "#",
"modifiers": [
"dark",
"small"
]
}
}
]
}
}
]
}
]
}
import StickyNavigation from './StickyNavigation';
function Header(header) {
// elements
const _modifierClasses = ['header--small', 'header--medium', 'header--large'];
const primaryNav = header.querySelector('.primary-nav');
const primaryNavnavInner = primaryNav.querySelector('.primary-nav__inner');
const primaryNavContainer = header.querySelector('.header__primary-nav');
const menuButton = header.querySelector('.menu-button');
const body = document.body;
const openSearchButton = header.querySelector('.open-search-button');
const allSearchButtons = header.querySelectorAll('.open-search-button');
const searchOverlay = header.querySelector('.header__overlay');
const headerSearchContainer = header.querySelector('.header__search');
const closeSearchButton = header.querySelector('.header__search-close');
// css classes
const navigationOpenModifier = 'header__primary-nav--open';
const mobileButtonOpenModifier = 'menu-button--open';
const searchOpenModifier = 'header--search-open';
const overFlowHidden = 'h-overflow-hidden';
const escKeyCode = 27;
let isSearchOpen = false;
// Helper function to update aria-expanded for all search buttons
function updateSearchButtonsState(expanded) {
allSearchButtons.forEach(button => {
button.setAttribute('aria-expanded', expanded);
});
}
// listeners
allSearchButtons.forEach(button => {
button && button.addEventListener('click', toggleSearch);
});
searchOverlay && searchOverlay.addEventListener('click', toggleSearch);
closeSearchButton && closeSearchButton.addEventListener('click', closeSearch);
document.addEventListener('keydown', (e) => e.keyCode === escKeyCode && closeSearch());
function clearAndAddBaseClasses() {
let classListWithoutModifiers = [...header.classList].filter(
(className) => !_modifierClasses.includes(className)
);
header.className = '';
header.classList.add(...classListWithoutModifiers);
}
// function for applying a modifier class which works with the current view port width
function addModifier(modifierClasses) {
if (primaryNav.clientWidth < primaryNavnavInner.scrollWidth) {
const currentModifier = modifierClasses[modifierClasses.length - 1];
clearAndAddBaseClasses();
header.classList.add(currentModifier);
if (modifierClasses.length === 1) {
return;
}
addModifier(_modifierClasses.slice(0, modifierClasses.length - 1));
}
}
function toggleMobileMenu() {
const blogPageHeaderWrapper =
document.querySelector('.header-container-wrapper') || document.createElement('div');
const topBarHeight =
(document.querySelector('.top-bar') && document.querySelector('.top-bar').offsetHeight) || 0;
const headerMainNavWrapper = primaryNavContainer.parentNode;
const newMainNavWrapperHeight = window.innerHeight - topBarHeight;
if (
primaryNavContainer.classList.contains(navigationOpenModifier) &&
menuButton.classList.contains(mobileButtonOpenModifier)
) {
primaryNavContainer.classList.remove(navigationOpenModifier);
menuButton.classList.remove(mobileButtonOpenModifier);
blogPageHeaderWrapper.style.height = 'auto';
headerMainNavWrapper.style.height = 'auto';
body.classList.remove(overFlowHidden);
header.classList.remove('header--mobile-menu-open');
} else {
primaryNavContainer.classList.add(navigationOpenModifier);
menuButton.classList.add(mobileButtonOpenModifier);
blogPageHeaderWrapper.style.height = '100%';
headerMainNavWrapper.style.height = `${newMainNavWrapperHeight}px`;
body.classList.add(overFlowHidden);
header.classList.add('header--mobile-menu-open');
animateHeader();
}
window.scrollTo(0, 0);
if (!primaryNavContainer.classList.contains(navigationOpenModifier) && isSearchOpen) {
toggleSearch();
}
}
function recalculateMobileMenu() {
// Check if mobile menu is open, then calculate.
if (
primaryNavContainer.classList.contains(navigationOpenModifier) &&
menuButton.classList.contains(mobileButtonOpenModifier)
) {
const topBarHeight =
(document.querySelector('.top-bar') && document.querySelector('.top-bar').offsetHeight) || 0;
const headerMainNavWrapper = primaryNavContainer.parentNode;
const newMainNavWrapperHeight = window.innerHeight - topBarHeight;
headerMainNavWrapper.style.height = `${newMainNavWrapperHeight}px`;
primaryNavContainer.scrollTop = 0;
}
}
function animateHeader() {
header.classList.add('header--mobile-menu-animate');
setTimeout(() => {
header.classList.remove('header--mobile-menu-animate');
primaryNavContainer.scrollTop = 0;
}, 310);
}
function closeSearch() {
const searchFieldContainer = header.querySelector('.search-field');
const searchField = header.querySelector('.search-field input');
isSearchOpen = false;
updateSearchButtonsState(isSearchOpen);
header.classList.remove(searchOpenModifier);
if (searchField) {
!isSearchOpen && searchField.blur();
searchFieldContainer.classList.remove('is-open');
toggleOverflow();
}
}
function toggleSearch() {
const searchFieldContainer = header.querySelector('.search-field');
const searchField = header.querySelector('.search-field input');
isSearchOpen = !JSON.parse(
openSearchButton.getAttribute('aria-expanded')
);
openSearchButton.setAttribute(
'aria-expanded',
JSON.stringify(isSearchOpen)
);
updateSearchButtonsState(isSearchOpen);
header.classList.toggle(searchOpenModifier, isSearchOpen);
if (searchField) {
isSearchOpen
? searchFieldContainer.classList.add('is-open')
: searchFieldContainer.classList.remove('is-open');
isSearchOpen ? searchField.focus() : searchField.blur();
toggleOverflow();
}
}
function toggleOverflow() {
const method = isSearchOpen ? 'add' : 'remove';
document.querySelector('html').classList[method](overFlowHidden);
document.body.classList[method](overFlowHidden);
}
// initial check
addModifier(_modifierClasses);
StickyNavigation(header);
// listiners
window.addEventListener('resize', () => {
addModifier(_modifierClasses);
StickyNavigation(header);
});
menuButton.addEventListener('click', toggleMobileMenu);
header.addEventListener('recalculate', () => {
recalculateMobileMenu();
StickyNavigation(header);
});
headerSearchContainer.addEventListener('close-header-search', closeSearch);
}
export default Header;
const getEvent = (name) => {
let event;
try {
event = new CustomEvent(name);
} catch (e) {
event = document.createEvent('Event');
event.initEvent(name, true, true);
}
return event;
};
const Navigation = (PrimaryNav, header) => {
const onClick = e => {
e.preventDefault();
const isMobileMenuActive = header.classList.contains('header--small');
let event;
let target;
if (isMobileMenuActive) {
target = document.getElementById(`subnav-${e.currentTarget.getAttribute('aria-controls')}`);
event = getEvent('triggerSubnav');
} else {
target = document.querySelector('.mega-menu');
event = getEvent('triggerMegaMenu');
event['data'] = {
trigger: e.currentTarget,
current: document.getElementById(`${e.currentTarget.getAttribute('aria-controls')}`)
};
}
target && target.dispatchEvent(event);
};
const init = () => {
const triggers = PrimaryNav.querySelectorAll('.primary-nav__link[aria-controls]');
for (let trigger of triggers) {
trigger.addEventListener('click', (e) => onClick(e));
}
};
init();
};
export default Navigation;
const calculateStickyOffset = (selectors) => {
let offset = 0;
for (let selector of selectors) {
const el = document.querySelector(selector);
if (el) {
offset += el.offsetHeight;
}
}
return offset;
};
const StickyNavigation = (el) => {
const height = el.offsetHeight;
const stickyOffsetElements = ['.top-bar'];
const stickyOffset = calculateStickyOffset(stickyOffsetElements);
const topbarHeight = el.querySelector('.header__topbar').offsetHeight + stickyOffset;
const container = el.querySelector('.header__container');
let lastScrollTop = 0;
const resetStickyNavigation = () => {
el.classList.remove('header--sticky', 'header--sticky-animation');
el.style.height = 'auto';
container.style.removeProperty('transform');
};
const handleScroll = () => {
if (el.classList.contains('header--small')) {
resetStickyNavigation();
return;
}
let currentScrollTop = document.documentElement.scrollTop;
if (currentScrollTop > topbarHeight) {
el.style.height = height + 'px';
el.classList.add('header--sticky');
if (currentScrollTop > lastScrollTop) {
container.style.transform = 'translateY(' + -topbarHeight + 'px)';
} else {
container.style.transform = 'translateY(-' + stickyOffset + 'px)';
}
// Timeout and extra class needed for animation to be smootly.
setTimeout(() => {
el.classList.add('header--sticky-animation');
}, 20);
}
if (currentScrollTop <= stickyOffset) {
resetStickyNavigation();
}
lastScrollTop = currentScrollTop;
};
window.addEventListener('scroll', handleScroll);
};
export default StickyNavigation;
%width {
max-width: $row-max-width;
margin: auto;
}
@mixin extended-background($backgroundColor) {
@include breakpoint($xxl) {
&:before,
&:after {
content: "";
display: block;
width: 100vw;
height: 100%;
position: absolute;
background: $backgroundColor;
top: 0;
}
&:before {
right: 100%;
}
&:after {
left: 100%;
}
}
}
.header {
&--small {
width: 100%;
z-index: $z-header;
}
&--search-open {
.header__search {
transform: translateY(0);
.header--small & {
transform: translateY(80px);
}
}
.header__overlay {
visibility: visible;
opacity: 1;
}
}
@include breakpoint($l) {
margin-left: -$size-16;
width: calc(100% + #{$size-32});
}
&--sticky {
position: relative;
z-index: 11;
}
}
.header__container {
.header--sticky & {
z-index: 1;
position: fixed;
width: 100%;
}
}
.header__topbar,
.header__primary-nav,
.header__secondary-nav,
.header__mobile-menu,
.header__search {
pointer-events: all;
.header--medium &,
.header--large & {
@extend %width;
}
}
.header__main-nav {
position: relative;
.header--small & {
position: absolute;
top: 0;
display: flex;
flex-direction: column;
flex: 1;
width: 100%;
height: 100%;
z-index: $z-header__main-nav;
pointer-events: none;
@include breakpoint($m) {
width: calc(100% - #{size(4)}); // Lines up with Logo and gutter.
}
}
.header--subnav-open & {
z-index: $z-header__main-nav-submenu-open;
}
.header--subnav-open.header--search-open & {
z-index: $z-header__main-nav;
}
}
.header__topbar {
display: flex;
position: relative;
align-items: center;
}
.header__topbar-inner {
display: flex;
width: 100%;
height: 100%;
background: $color-white;
border-bottom: solid $color-gray-2 0.5px;
padding: 15px size(3);
z-index: $z-header__topbar-inner;
&:before,
&:after {
border-bottom: solid $color-gray-1 1px;
}
@extend %width;
.header--small & {
padding: size(3);
}
}
.header__search {
position: absolute;
top: 100%;
left: 0;
right: 0;
padding: size(3);
background: $color-white;
z-index: $z-header__search;
transform: translateY(-100%);
transition: all 0.2s;
@extend %width;
.header--small & {
top: 0;
z-index: $z-header__mobile-nav;
}
}
.header__search-inner {
max-width: 992px;
margin: auto;
}
.header__overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
width: 100vw;
left: 50%;
transform: translateX(-50%);
height: 100vh;
background: rgba(00, 00, 00, 0.5);
transition: all 0.2s;
visibility: hidden;
opacity: 0;
z-index: $z-header__overlay;
}
.header__logo {
display: flex;
flex-shrink: 0;
align-items: center;
align-self: flex-start;
margin-right: size(2);
.header--mobile-menu-open.header--subnav-open & {
visibility: hidden;
}
img {
height: 28px;
.header--medium &,
.header--large & {
height: 26px;
}
}
}
.header__secondary-nav {
padding: size(3);
top: 0;
right: 0;
position: absolute;
transform: translateY(-100%);
z-index: $z-header__secondary-nav;
margin: size(1) size(-3) 0;
padding: size(3) size(3) 12px;
.header--small & {
background: $color-white;
position: relative;
transform: none;
padding: size(3);
order: 2; // Move to bottom of header.
}
}
.header__mobile-navigation {
position: absolute;
top: 0;
right: size(1);
display: none;
z-index: $z-header__mobile-menu;
.header--small & {
display: flex;
}
&-item {
margin: size(2) size(1.5) 0 0;
}
}
.header__primary-nav {
padding: size(1.5) size(3);
background-color: $color-white;
border-bottom: solid $color-gray-2 0.5px;
position: relative;
@include breakpoint($xl) {
padding: size(1.5) size(3);
}
.header--small & {
display: flex;
flex-direction: column;
flex: 1;
overflow: hidden;
overflow-y: scroll;
justify-content: space-between;
visibility: hidden;
margin-top: 77px;
padding-bottom: 0;
transform: translateY(size(-3));
transition: transform 0.3s ease-out;
order: 1; // Move to top of header.
&--open {
visibility: visible;
transform: none;
}
}
.header--small.header--subnav-open & {
background-color: $color-white;
padding-top: 0;
}
.header--small.header--subnav-animate & {
overflow: visible;
}
.header--small.header--mobile-menu-animate & {
overflow: visible;
}
}
.header__container {
.header--sticky-animation & {
transition: transform 0.5s ease-in-out;
}
.header--sticky & {
max-width: 1440px;
}
}
import Header from './Header';
import Navigation from './Navigation';
const els = document.querySelectorAll('.header');
for (let el of els) {
const PrimaryNav = el.querySelector('.primary-nav');
Header(el);
if (PrimaryNav) {
Navigation(PrimaryNav, el);
}
}
No notes defined.