[todo: define linking rules]

<header class="c-masthead">
    <div class="o-flex-container">
        <a href="" class="c-masthead__logo">
            <svg viewBox="0 0 544 70" width="544" height="236" preserveAspectRatio="xMinYMid meet" class="c-logo--loco">
                <use xlink:href="../../assets/logos/sprite.symbol.svg#loco" fill="#fff"></use>
            </svg>
        </a>
        <div class="c-masthead__right c-menu">
            <button class="c-menu__button" aria-controls="global-menu" aria-expanded="false">Site name</button>
            <nav class="c-menu__nav" id="global-menu" aria-expanded="false">
                <ul class="c-menu__list c-menu--global">
                    <li class="c-menu__item"><a href="https://www.sciencemuseumgroup.org.uk/">A blog link</a></li>
                    <li class="c-menu__item"><a href="https://www.sciencemuseumgroup.org.uk/">Another blog link</a></li>
                </ul>

            </nav>
            <div class="c-searchmenu">
                <div class="c-searchmenu__menuitem">
                    <a href="#js-searchmenu__panel">
                        <svg role="img" aria-labelledby="search1" class="u-icon" tabindex="-1" focusable="false">
                            <title id="search1">Open search</title>
                            <use xlink:href="../../assets/icons/sprite.symbol.svg#search" />
                        </svg>
                    </a>
                </div>
                <div class="c-searchmenu__target" id="js-searchmenu__panel"></div>
                <div class="c-searchmenu__panel">
                    <form method="get" class="c-searchmenu__form" action="search" autocomplete="off">
                        <label for="js-searchmenu--input" class="u-visually-hidden">Search for:</label>
                        <input type="search" id="js-searchmenu--input" class="c-searchmenu__input" placeholder="Search …" value="" name="s" />
                        <button type="submit" class="c-searchmenu__submit">
                            <svg role="img" aria-labelledby="search2" class="u-icon" tabindex="-1" focusable="false">
                                <title id="search2">Submit search query</title>
                                <use xlink:href="../../assets/icons/sprite.symbol.svg#search" />
                            </svg>
                        </button>
                    </form>
                </div>
                <div class="c-searchmenu__menuitem c-searchmenu__menuitem--close">
                    <a href="#elsewhere">
                        <svg role="img" aria-labelledby="close" class="u-icon">
                            <title id="close">Close search</title>
                            <use xlink:href="../../assets/icons/sprite.symbol.svg#dismiss" />
                        </svg>
                    </a>
                </div>
            </div>
        </div>

    </div>
    </div>
</header>

<script>
    document.addEventListener('DOMContentLoaded', function(event) {
        smgwds.menu();
    })
</script>
<header class="c-masthead">
  <div class="o-flex-container">
    <a href="{{link}}" class="c-masthead__logo">
      <svg viewBox="0 0 {{width}} {{height}}" width="{{width}}" height="{{aligned-height}}"
        preserveAspectRatio="xMinYMid meet" class="c-logo--{{slug}}">
        <use xlink:href="{{path '/assets/logos/sprite.symbol.svg'}}#{{slug}}" fill="#fff"></use>
      </svg>
    </a>
    <div class="c-masthead__right c-menu">
      <button class="c-menu__button" aria-controls="global-menu" aria-expanded="false">Site name</button>
      <nav class="c-menu__nav" id="global-menu" aria-expanded="false">
        {{ render '@menu--blog' }}
      </nav>
      {{ render '@searchmenu' }}
    </div>
  </div>
</header>

{{{ init }}}