Fazer div Sumir

Olá gente estou fazendo um menu responsivo porém não tenho muito conhecimento de jquery e chegou a hora de usar.

veja minha estrutura HTML.

<header id="navbar">
 <nav class="menu-list">
 <figure class="brand">
 <a href="#" title="Covey">
 <img src="images/Covey_logo.png" alt="Covey">
 </a>
 </figure>
 <div class="menu-bar">
 <a href="#" class="btn-menu">
 <span class="icon-menu"></span>
 </a>
 </div>
 <div class="pages">
 <ul>
 <li><a href="#">Home</a></li>
 <li><a href="#">Empresa</a></li>
 <li><a href="#">Produtos</a></li>
 <li><a href="#">Contato</a></li>
 </ul>
 </div>
 </nav>
 </header>

Queria um javascript para fechar a Div pages quando eu clicar na div menu-bar

ja tentei usar essa solução e não funciona

$(document).ready(main);

function main () {
	$('.menu-bar').click(function(){
 $('.pages').toggle();
	});
}