Masthead Navigation Bar: Foundation

<nav class='Masthead Navbar' aria-label='Top menu'>
  <div id='MastheadControls'>
    {{#if bearpassmenu}}
      <div class='BearPass'>
        <div class='BearPassLogin'>
          <input type='checkbox' id='bearpass-toggle' />
          <label
            for='bearpass-toggle'
            data-toggle='dropdown'
            class='keyicon'
          ><div class='BPlogin'>Log in</div><img
              src='../../images/sgf-logo.svg'
              alt='Key'
            /></label>
          <div class='SearchContainer'>
            <div id='BearPassMenu'>
              <ul class='bearpassmenu'>
                {{#each this.bearpassmenu}}
                  <li>
                    <a
                      href='{{this.url}}'
                      aria-label='{{this.label}}'
                    >{{this.label}}</a>
                  </li>
                {{/each}}
              </ul>
            </div>
          </div>
        </div>
      </div>
    {{/if}}
    {{#if siteindexmenu}}
      <div class='SiteIndex'>
        <div class='SiteIndexDropDown'>
          <input
            type='checkbox'
            id='siteindex-toggle'
            value=''
            name='siteindex-checkbox'
          />
          <label for='siteindex-toggle' data-toggle='dropdown'>A-Z</label>
          <div class='SearchContainer' aria-label='Site Index'>
            <div id='SiteIndexMenu'>
              <ul>
                {{#each this.siteindexmenu}}
                  <li>
                    <a
                      href='{{this.url}}'
                      aria-label='{{this.label}}'
                    >{{this.label}}</a>
                  </li>
                {{/each}}
              </ul>
            </div>
          </div>
        </div>
      </div>
    {{/if}}
    {{#if navmenu}}
      <div class='NavMenu'>
        {{#each this.navmenu}}
          <a
            href='{{this.url}}'
            aria-label='{{this.label}}'
            target='_self'
          >{{this.label}}</a>
        {{/each}}
      </div>
    {{/if}}
    <div class='SearchMenuDropDown'>
      <input
        type='checkbox'
        id='searchmenu-toggle'
        value=''
        name='searchmenu-checkbox'
      />
      <label for='searchmenu-toggle' data-toggle='dropdown' class='magnifyicon'>
        <img src='../../images/sgf-logo.svg' alt='Magnify glass' />
      </label>
      <div class='SearchContainer' aria-label='Search'>
        <form
          action='{{utility.search.url}}'
          itemprop='potentialAction'
          itemscope
          itemtype='https://schema.org/SearchAction'
          method='get'
        >
          <meta
            content='https://search.missouristate.edu/?q={q}'
            itemprop='target'
          />
          <label for='KeywordsDropDown'>
            <img
              src='data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'
              alt='Enter keyword:'
              width='1'
              height='1'
            />Search
          </label>
          <input
            id='KeywordsDropDown'
            itemprop='query-input'
            name='q'
            placeholder='Search'
            type='search'
          />
          <input
            alt='Go'
            cheight='1'
            src='data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'
            type='image'
            width='1'
          />
        </form>
      </div>
    </div>
    <div class='Search'>
      <form
        action='{{utility.search.url}}'
        method='get'
        itemprop='potentialAction'
        itemscope
        itemtype='https://schema.org/SearchAction'
        method='get'
      >
        <meta
          content='https://search.missouristate.edu/?q={q}'
          itemprop='target'
        />
        <label for='Keywords'>
          <img
            src='data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'
            alt='Enter keyword:'
            width='1'
            height='1'
          />Search
        </label>
        <input
          id='Keywords'
          itemprop='query-input'
          name='q'
          placeholder='Search'
          type='search'
        />
        <input
          alt='Go'
          height='1'
          src='data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'
          type='image'
          width='1'
        />
      </form>
    </div>
  </div>
</nav>