Header

<div class="header grid js-header-burger js-focus-trap bg-white "><span class="visually-hidden js-trap-reverse-end">reset focus</span>
    <div class="header__upper grid__cell">
        <div class="header__inner container">
            <div class="header__burger"><a href="#footer-nav-1" id="header-burger-trigger" class="header__burger-trigger js-header-burger-trigger js-trap-start" aria-label="menu"><span></span><span></span><span></span></a>
            </div><a href="/" class="header__brand"><svg width="128" height="42" xmlns="http://www.w3.org/2000/svg" xlink:href="http://www.w3.org/1999/xlink" role="img" aria-labelledby="wellcome-collection-black-title"><title id="wellcome-collection-black-title">Wellcome Collection</title><image class="logo-svg" xlink:href="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20166.549%2056%22%3E%0A%20%20%3Cpolygon%20fill%3D%22black%22%20points%3D%2232.875%2C7.228%2025.238%2C7.228%2022.573%2C19.125%2022.424%2C19.125%2019.866%2C7.228%2013.009%2C7.228%2010.563%2C19.125%2010.489%2C19.125%207.635%2C7.228%200%2C7.228%206.004%2C26.463%2013.527%2C26.463%2016.381%2C14.64%2016.456%2C14.64%2019.236%2C26.463%2026.759%2C26.463%22/%3E%0A%09%3Cpath%20fill%3D%22black%22%20d%3D%22M51.129%2C18.494c0-7.486-3.296-11.748-10.933-11.748%20c-6.079%2C0-10.154%2C4.56-10.154%2C10.155c0%2C6.411%2C4.629%2C10.043%2C10.784%2C10.043c4.373%2C0%2C8.415-1.929%2C9.896-6.078h-6.856%20c-0.592%2C0.927-1.89%2C1.371-3.077%2C1.371c-2.299%2C0-3.558-1.556-3.741-3.744H51.129z%20M37.085%2C14.677%20c0.333-2.075%2C1.592-3.225%2C3.78-3.225c1.888%2C0%2C3.223%2C1.446%2C3.223%2C3.225H37.085z%22/%3E%0A%09%3Crect%20fill%3D%22black%22%20x%3D%2250.636%22%20width%3D%227.34%22%20height%3D%2226.463%22/%3E%0A%09%3Crect%20fill%3D%22black%22%20x%3D%2259.712%22%20width%3D%227.338%22%20height%3D%2226.463%22/%3E%0A%09%3Cpath%20fill%3D%22black%22%20d%3D%22M86.91%2C14.528c-0.445-5.299-4.744-7.782-9.783-7.782%20c-5.783%2C0-10.417%2C4.041-10.417%2C10.117c0%2C6.079%2C4.634%2C10.082%2C10.417%2C10.082c5.188%2C0%2C9.301-2.928%2C10.005-8.154h-7.005%20c-0.148%2C1.518-1.26%2C2.815-2.854%2C2.815c-2.817%2C0-3.225-2.407-3.225-4.744c0-2.334%2C0.408-4.779%2C3.225-4.779%20c0.778%2C0%2C1.409%2C0.22%2C1.853%2C0.629c0.48%2C0.409%2C0.742%2C1.037%2C0.814%2C1.816H86.91z%22/%3E%0A%09%3Cpath%20fill%3D%22black%22%20d%3D%22M99.643%2C16.827c0%2C2.038-0.37%2C4.78-3.148%2C4.78c-2.781%2C0-3.15-2.742-3.15-4.78%20c0-2.039%2C0.369-4.743%2C3.15-4.743C99.273%2C12.083%2C99.643%2C14.788%2C99.643%2C16.827z%20M106.982%2C16.827c0-5.337-3.263-10.081-10.487-10.081%20c-7.228%2C0-10.488%2C4.744-10.488%2C10.081c0%2C5.335%2C3.261%2C10.118%2C10.488%2C10.118C103.719%2C26.945%2C106.982%2C22.162%2C106.982%2C16.827z%22/%3E%0A%09%3Cpath%20fill%3D%22black%22%20d%3D%22M106.785%2C26.463h7.339V16.047c0-2.001%2C0.631-3.445%2C2.484-3.445%20c2.225%2C0%2C2.407%2C1.63%2C2.407%2C3.445v10.416h7.339V16.047c0-2.001%2C0.629-3.445%2C2.483-3.445c2.223%2C0%2C2.409%2C1.63%2C2.409%2C3.445v10.416h7.34%20V13.27c0-3.116-1.668-6.523-6.599-6.523c-4.782%2C0-6.263%2C2.779-6.56%2C3.002c-0.89-1.929-3.112-3.002-5.191-3.002%20c-2.666%2C0-4.816%2C0.814-6.299%2C3.04h-0.073V7.228h-7.08V26.463z%22/%3E%0A%09%3Cpath%20fill%3D%22black%22%20d%3D%22M159.447%2C18.494c0-7.486-3.298-11.748-10.933-11.748%20c-6.077%2C0-10.155%2C4.56-10.155%2C10.155c0%2C6.411%2C4.634%2C10.043%2C10.785%2C10.043c4.374%2C0%2C8.414-1.929%2C9.896-6.078h-6.857%20c-0.591%2C0.927-1.889%2C1.371-3.074%2C1.371c-2.298%2C0-3.558-1.556-3.744-3.744H159.447z%20M145.403%2C14.677%20c0.332-2.075%2C1.593-3.225%2C3.78-3.225c1.889%2C0%2C3.225%2C1.446%2C3.225%2C3.225H145.403z%22/%3E%0A%09%3Cpath%20fill%3D%22black%22%20d%3D%22M31.329%2C42.585c-0.445-5.299-4.745-7.783-9.783-7.783%20c-5.784%2C0-10.416%2C4.04-10.416%2C10.118C11.13%2C51%2C15.762%2C55%2C21.546%2C55c5.188%2C0%2C9.301-2.927%2C10.004-8.153h-7.003%20c-0.147%2C1.521-1.261%2C2.818-2.852%2C2.818c-2.82%2C0-3.226-2.411-3.226-4.745c0-2.335%2C0.406-4.782%2C3.226-4.782%20c0.775%2C0%2C1.407%2C0.225%2C1.854%2C0.631c0.481%2C0.407%2C0.737%2C1.038%2C0.813%2C1.816H31.329z%22/%3E%0A%09%3Cpath%20fill%3D%22black%22%20d%3D%22M43.692%2C44.883c0%2C2.038-0.369%2C4.782-3.149%2C4.782s-3.149-2.744-3.149-4.782%20s0.369-4.745%2C3.149-4.745S43.692%2C42.845%2C43.692%2C44.883z%20M51.031%2C44.883c0-5.338-3.262-10.081-10.488-10.081%20c-7.229%2C0-10.488%2C4.743-10.488%2C10.081C30.055%2C50.22%2C33.314%2C55%2C40.543%2C55C47.77%2C55%2C51.031%2C50.22%2C51.031%2C44.883z%22/%3E%0A%09%3Crect%20fill%3D%22black%22%20x%3D%2250.647%22%20y%3D%2228.056%22%20width%3D%227.34%22%20height%3D%2226.464%22/%3E%0A%09%3Crect%20fill%3D%22black%22%20x%3D%2259.724%22%20y%3D%2228.056%22%20width%3D%227.338%22%20height%3D%2226.464%22/%3E%0A%09%3Cpath%20fill%3D%22black%22%20d%3D%22M87.811%2C46.552c0-7.488-3.3-11.75-10.934-11.75%20c-6.077%2C0-10.152%2C4.559-10.152%2C10.155C66.725%2C51.369%2C71.357%2C55%2C77.508%2C55c4.373%2C0%2C8.413-1.926%2C9.896-6.076h-6.856%20c-0.595%2C0.925-1.891%2C1.37-3.077%2C1.37c-2.299%2C0-3.559-1.557-3.745-3.742H87.811z%20M73.765%2C42.734%20c0.333-2.075%2C1.596-3.225%2C3.779-3.225c1.891%2C0%2C3.226%2C1.447%2C3.226%2C3.225H73.765z%22/%3E%0A%09%3Cpath%20fill%3D%22black%22%20d%3D%22M106.553%2C42.585c-0.443-5.299-4.743-7.783-9.784-7.783%20c-5.782%2C0-10.412%2C4.04-10.412%2C10.118C86.357%2C51%2C90.987%2C55%2C96.769%2C55c5.189%2C0%2C9.304-2.927%2C10.008-8.153h-7.006%20c-0.147%2C1.521-1.259%2C2.818-2.853%2C2.818c-2.819%2C0-3.227-2.411-3.227-4.745c0-2.335%2C0.407-4.782%2C3.227-4.782%20%20%20c0.778%2C0%2C1.407%2C0.225%2C1.854%2C0.631c0.481%2C0.407%2C0.738%2C1.038%2C0.812%2C1.816H106.553z%22/%3E%0A%09%3Cpath%20fill%3D%22black%22%20d%3D%22M114.174%2C29.429h-7.34v5.854h-3.26v4.521h3.26v9.193%20c0%2C5.261%2C3.448%2C5.745%2C6.561%2C5.745c1.558%2C0%2C3.226-0.224%2C4.707-0.224v-5.559c-0.555%2C0.073-1.112%2C0.108-1.668%2C0.108%20c-1.854%2C0-2.26-0.775-2.26-2.556v-6.709h3.928v-4.521h-3.928V29.429z%22/%3E%0A%09%3Crect%20fill%3D%22black%22%20x%3D%22119.014%22%20y%3D%2228.056%22%20width%3D%227.336%22%20height%3D%225.153%22/%3E%0A%09%3Crect%20fill%3D%22black%22%20x%3D%22119.014%22%20y%3D%2235.284%22%20width%3D%227.336%22%20height%3D%2219.236%22/%3E%0A%09%3Cpath%20fill%3D%22black%22%20d%3D%22M139.727%2C44.883c0%2C2.038-0.371%2C4.782-3.148%2C4.782%20c-2.781%2C0-3.151-2.744-3.151-4.782s0.37-4.745%2C3.151-4.745C139.356%2C40.138%2C139.727%2C42.845%2C139.727%2C44.883z%20M147.067%2C44.883%20c0-5.338-3.263-10.081-10.488-10.081c-7.228%2C0-10.489%2C4.743-10.489%2C10.081c0%2C5.337%2C3.262%2C10.117%2C10.489%2C10.117%20C143.804%2C55%2C147.067%2C50.22%2C147.067%2C44.883z%22/%3E%0A%09%3Cpath%20fill%3D%22black%22%20d%3D%22M146.537%2C54.52h7.337V44.365c0-3.075%2C1.669-3.706%2C2.93-3.706%20c2.149%2C0%2C2.408%2C1.556%2C2.408%2C3.78V54.52h7.338V41.324c0-4.41-3.15-6.521-6.596-6.521c-2.928%2C0-4.894%2C1.002-6.267%2C2.926h-0.072%20v-2.444h-7.078V54.52z%22/%3E%0A%3C/svg%3E" src="/assets/images/wellcome-collection-black.png" width="128" height="42"></image></svg></a>
            <nav id="header-nav" class="header__nav js-header-burger-drawer" aria-labelledby="header-burger-trigger">
                <ul class="plain-list header__list font-WB7-s margin-top-s0 margin-left-s0 margin-bottom-s0 margin-right-s0 padding-top-s0 padding-left-s0 padding-bottom-s0 padding-right-s0">
                    <li class="header__item "><a class="header__link js-header-nav-link" href="#">Visit us</a>
                    </li>
                    <li class="header__item "><a class="header__link js-header-nav-link" href="#">What&#x27;s on</a>
                    </li>
                    <li class="header__item "><a class="header__link js-header-nav-link" href="#">Stories</a>
                    </li>
                    <li class="header__item "><a class="header__link js-header-nav-link" href="#">Images</a>
                    </li>
                    <li class="header__item "><a class="header__link js-header-nav-link" href="#">What we do</a>
                    </li>
                </ul>
            </nav>
            <div id="header-search" class="header__search"></div><span class="visually-hidden js-trap-end">reset focus</span>
        </div>
    </div>
</div>
// @flow
import {withToggler} from '../../hocs/withToggler';
import {font, spacing} from '../../../utils/classnames';
import WellcomeCollectionBlack from '../../../icons/wellcome_collection_black';

type Props = {|
  siteSection: string,
  isActive: boolean,
  toggle: () => void,
  links: Array<{|
    href: string,
    title: string,
    siteSection: string
  |}>,
|}

const Header = withToggler(({ links, siteSection, toggle, isActive }: Props) => (
  <div className={`header grid js-header-burger js-focus-trap bg-white ${isActive ? 'header--is-burger-open' : ''}`}>
    <span className='visually-hidden js-trap-reverse-end'>reset focus</span>
    <div className='header__upper grid__cell'>
      <div className='header__inner container'>
        <div className='header__burger'>
          <a href='#footer-nav-1'
            id='header-burger-trigger'
            className='header__burger-trigger js-header-burger-trigger js-trap-start'
            aria-label='menu'
            onClick={(event) => { event.preventDefault(); toggle(); }}>
            <span />
            <span />
            <span />
          </a>
        </div>
        <a href='/' className='header__brand'>
          <WellcomeCollectionBlack />
        </a>
        <nav id='header-nav'
          className='header__nav js-header-burger-drawer'
          aria-labelledby='header-burger-trigger'>
          <ul className={`plain-list header__list ${font({s: 'WB7'})} ${spacing({s: 0}, {margin: ['top', 'left', 'bottom', 'right'], padding: ['top', 'left', 'bottom', 'right']})}`}>
            {links.map((link, i) => (
              <li className={`header__item ${link.siteSection === siteSection ? ' header__item--is-current' : ''}`} key={i}>
                <a className='header__link js-header-nav-link'
                  href={link.href}
                  {... link.siteSection === siteSection ? {'aria-current': true} : {}}
                >{link.title}</a>
              </li>
            ))}
          </ul>
        </nav>
        {/* we leave this here until we know exactly what we want to do with search */}
        <div id='header-search' className='header__search'></div>
        <span className='visually-hidden js-trap-end'>reset focus</span>
      </div>
    </div>
  </div>
));

export default Header;
{
  "links": [
    {
      "siteSection": "Visit us",
      "title": "Visit us",
      "href": "#"
    },
    {
      "siteSection": "What's on",
      "title": "What's on",
      "href": "#"
    },
    {
      "siteSection": "Stories",
      "title": "Stories",
      "href": "#"
    },
    {
      "siteSection": "Images",
      "title": "Images",
      "href": "#"
    },
    {
      "siteSection": "What we do",
      "title": "What we do",
      "href": "#"
    }
  ]
}

There are no notes for this item.