railsgoat/app/views/layouts/shared/_sidebar.html.erb

    <div id="mainnav" class="hidden-phone hidden-tablet">
      <ul style="display: block;">
        <li class="active">
          <a href="#">
            <div class="icon">
              <span class="fs1" aria-hidden="true" data-icon="&#xe0a0;"></span>
            </div>
            Dashboard
          </a>
        </li>
        <li>
          <a href="#">
            <div class="icon">
              <span class="fs1" aria-hidden="true" data-icon="&#xe0b8;"></span>
            </div>
            Benefit Forms
          </a>
        </li>
        <li>
          <a href="#">
            <div class="icon">
              <span class="fs1" aria-hidden="true" data-icon="&#xe096;"></span>
            </div>
            401k Info
          </a>
        </li>
        <li>
          <a href="#">
            <div class="icon">
              <span class="fs1" aria-hidden="true" data-icon="&#xe0d2;"></span>
            </div>
            PTO
          </a>
        </li>
        <li>
          <a href="#">
            <div class="icon">
              <span class="fs1" aria-hidden="true" data-icon="&#xe0a9;"></span>
            </div>
            Work Info
          </a>
        </li>
        <li>
          <a href="#">
            <div class="icon">
              <span class="fs1" aria-hidden="true" data-icon="&#xe14a;"></span>
            </div>
            Tables
          </a>
        </li>
        <li>
          <a href="#">
            <div class="icon">
              <span class="fs1" aria-hidden="true" data-icon="&#xe00d;"></span>
            </div>
            Gallery
          </a>
        </li>
        <li>
          <a href="#">
            <div class="icon">
              <span class="fs1" aria-hidden="true" data-icon="&#xe100;"></span>
            </div>
            Typography
          </a>
        </li>
        <li class="submenu">
          <a href="#" class="selected">
            <div class="icon">
              <span class="fs1" aria-hidden="true" data-icon="&#xe0aa;"></span>
            </div>
            Extras
          </a>
          <ul>
            <li>
              <a href="#">Edit Profile</a>
            </li>
            <li>
              <a href="#">Calendar</a>
            </li>
            <li>
              <a href="#">Invoice</a>
            </li>
            <li>
              <a href="#">Login</a>
            </li>
            <li>
              <a href="#">Error</a>
            </li>
            
            <li>
              <a href="#">Help</a>
            </li>
          </ul>
        </li>
      </ul>
    </div>

	<script type="text/javascript">
	//Main menu navigation

	$('.li submenu > a').click(function(e){
	  e.preventDefault();
	  var submenu = $(this).siblings('ul');
	  var li = $(this).parents('li');
	  var submenus = $('#mainnav li.submenu ul');
	  var submenus_parents = $('#mainnav li.submenu');
	  if(li.hasClass('open'))
	  {
	    if(($(window).width() > 768) || ($(window).width() < 479)) {
	      submenu.slideUp();
	    } else {
	      submenu.fadeOut(250);
	    }
	    li.removeClass('open');
	  } else 
	  {
	    if(($(window).width() > 768) || ($(window).width() < 479)) {
	      submenus.slideUp();     
	      submenu.slideDown();
	    } else {
	      submenus.fadeOut(250);      
	      submenu.fadeIn(250);
	    }
	    submenus_parents.removeClass('open');   
	    li.addClass('open');  
	  }
	});

	var ul = $('#mainnav > ul');

	$('#mainnav > a').click(function(e)
	{
	  e.preventDefault();
	  var mainnav = $('#mainnav');
	  if(mainnav.hasClass('open'))
	  {
	    mainnav.removeClass('open');
	    ul.slideUp(250);
	  } else 
	  {
	    mainnav.addClass('open');
	    ul.slideDown(250);
	  }
	});

	</script>