[p-book] header

<header>
  <div class="container">
    <a class="skip-link" href="#content">Skip to content</a>
    <div class="logo">
      <a href="index.php"><img src="img/logo.png" alt="Creative Folk"></a>
    </div>
    <nav>
      <button id="toggle-navigation" aria-expanded="false">
        <span class="icon-menu"></span><span class="hidden">Menu</span>
      </button>
      <ul id="menu">
        <?php foreach ($navigation as $link) { ?>
        <li>
            <a href="category.php?id=<?= $link['id'] ?>" 
            <?= ($section == $link['id'] ) ? 'class="on" aria-current="page"' : '' ?>>
            <?= html_escape($link['name']) ?>
            </a>
        </li>
        <?php } ?>
        <li><a href="search.php">
          <span class="icon-search"></span><span class="search-text">Search</span>
        </a></li>
      </ul>
    </nav>
  </div>
</header>

 

document.body.classList.add('js');
var toggle    = document.querySelector('#toggle-navigation');
var menu      = document.querySelector('#menu');
var menuItems = document.querySelectorAll('#menu li a');

toggle.addEventListener('click', function(){
  if (menu.classList.contains('is-active')) {
    this.setAttribute('aria-expanded', 'false');
    menu.classList.remove('is-active');
  } else {
    menu.classList.add('is-active'); 
    this.setAttribute('aria-expanded', 'true');
  }
});