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

<div id="mainnav"class="hidden-phone hidden-tablet">
  <ul style="display: block;">
	<li id="tutorials_home">
      <%= link_to tutorials_path, :html => {:method => "get"} do %>
        <div class="icon">
          <span class="fs1" aria-hidden="true" data-icon="&#xe001;"></span>
        </div>
        Tutorial Home
     <% end %>
    </li>
    <li id="injection">
      <%= link_to injection_tutorials_path do %>
        <div class="icon">
          <span class="fs1" aria-hidden="true" data-icon="&#xe094;"></span>
        </div>
        A1 Injection
     <% end %>
    </li>
	<li id="broken_auth">
      <%= link_to broken_auth_tutorials_path do %>
        <div class="icon">
          <span class="fs1" aria-hidden="true" data-icon="&#xe094;"></span>
        </div>
        A2 Broken Auth
      <% end %>
    </li>
    <li id="xss">
     <%= link_to xss_tutorials_path do %>
        <div class="icon">
          <span class="fs1" aria-hidden="true" data-icon="&#xe094;"></span>
        </div>
       A3 XSS
      <% end %>
    </li>
    
    <li id="insecure_dor">
      <%= link_to insecure_dor_tutorials_path do %>
        <div class="icon">
          <span class="fs1" aria-hidden="true" data-icon="&#xe094;"></span>
        </div>
        A4 Insecure DOR
      <% end %>
    </li>
	<li id="misconfig">
      <%= link_to misconfig_tutorials_path do %>
        <div class="icon">
          <span class="fs1" aria-hidden="true" data-icon="&#xe094;"></span>
        </div>
        A5 Misconfig
      <% end %>
    </li>
    <li id="exposure">
      <%= link_to exposure_tutorials_path do %>
        <div class="icon">
          <span class="fs1" aria-hidden="true" data-icon="&#xe094;"></span>
        </div>
        A6 Exposure
      <% end %>
    </li>
    <li id="access_control">
      <%= link_to access_control_tutorials_path do %>
        <div class="icon">
          <span class="fs1" aria-hidden="true" data-icon="&#xe094;"></span>
        </div>
        A7 Access Control
      <% end %>
    </li>
	<li id="csrf">
      <%= link_to csrf_tutorials_path do %>
        <div class="icon">
          <span class="fs1" aria-hidden="true" data-icon="&#xe094;"></span>
        </div>
        A8 CSRF
      <% end %>
    </li>
    <li id="insecure_components">
      <%= link_to insecure_components_tutorials_path do %>
        <div class="icon">
          <span class="fs1" aria-hidden="true" data-icon="&#xe094;"></span>
        </div>
        A9 Components
      <% end %>
    </li>
    <li id="redirects">
     <%= link_to redirects_tutorials_path do %>
        <div class="icon">
          <span class="fs1" aria-hidden="true" data-icon="&#xe094;"></span>
        </div>
        A10 Redirects
     <% end %>
    </li>
    <li id="submenu" class="submenu">
      <a href="#" class="selected">
        <div class="icon">
          <span class="fs1" aria-hidden="true" data-icon="&#xe0b8;"></span>
        </div>
        Extras
      </a>
      <ul>
		<li id="gauntlt">
          <%= link_to "gauntlt", gauntlt_tutorials_path %>
        </li>
        <li id="guard">
         <%= link_to "Guard", guard_tutorials_path %>
        </li>
		<li id="mass_assignment">
          <%= link_to "Mass Assignment", mass_assignment_tutorials_path %>
        </li>
		<li id="logic_flaws">
			<%= link_to "Logic Flaws", logic_flaws_tutorials_path %>
		</li>	
		<li id="metaprogramming">
			<%= link_to "Meta- Programming", metaprogramming_tutorials_path %>
		</li>
      </ul>
    </li>
  </ul>
</div>

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

$('.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>