You are now ready to query for products from the REST API and display them in the page:

1. Add the HTML in bold to index.html:

<div class="app-main">
  <div>
    <ul id="menu"></ul>
  </div>
  <div id="productsContainer" class="clear-fix"></div>
  <div class="clear-fix"></div>
</div>

2. Implement a products query and execute it when a category changes by adding the code in bold to app.js:

function syncProducts() {
  const productsContainer = $('#productsContainer');
  const category = $('#menu > li').filter('.menu-
   selected').attr('categoryName');

  productsContainer.empty();
  window.api.getProducts(category, items => {
    productsContainer.append(
      items.map(item => renderTemplate('product-item', item)));
  });
}

function setupAppMenu() {
  $('#menu').menu({items: "li"});
  $('#menu > li').click(e => {
    $('#menu > li').removeClass('menu-selected');
    $(e.currentTarget).toggleClass('menu-selected');
    syncProducts();
  });

  syncProducts();
}