_nav_openshift.html.erb

<ul class="nav nav-sidebar">
  <%- navigation.each.with_index do |topic_group, groupidx| -%>

<!--  the top level  groupings start here -->

<%# group_id %>
<%# topic_group[:id] %>
<%# topic_id %>

<!-- group_id is the one that is user selected. topic_group[id] is what we are parsing via navigation -->

    <%- current_group = topic_group[:id] == group_id -%>
    <li class="nav-header">

<%# current_group %>
<%#  topic_group[:id] %>
<%# group_id %>


      <a class="" href="javascript:void(0);" data-toggle="collapse" data-target="#topicGroup<%= groupidx %>">
        <span id="tgSpan<%= groupidx %>" class="fa <%= current_group ? 'fa-angle-down' : 'fa-angle-right' %>"></span>
          <%= topic_group[:name] %>
          <!-- prints out the names of the top level books with arrow down or to right
               So in this case: Welcome 1 and Another Book -->
      </a>


      <!-- this then goes through all the topics within the top level groups
      depending on whether it itself contains further topics or is a single file -->

      <ul id="topicGroup<%= groupidx %>" class="collapse <%= current_group ? 'in' : '' %> list-unstyled">

        <%- topic_group[:topics].each.with_index do |topic, topicidx| -%>

        <!-- for each topic in this topic_group, for example in Welcome 1, what topics exist?
        Welcome 2 and Welcome 1 More -->

          <%- if not topic.has_key?(:topics) -%>

          <!-- is this is a single page? That is, does this topic have more topics?
          Welcome 1 More -->

            <%- current_topic = current_group && (topic[:id] == topic_id) -%>
            <!-- ^ this establishs whether we are reading this current page -->

            <li><a class="<%= current_topic ? ' active' : '' %>" href="<%= subtopic_shim %><%= topic[:path] %>"><%= topic[:name] %></a></li>
            <!--  if active, then highlight it,  otherwise nothing to do -->

          <%- else -%>

            <!-- this topic contains subtopics - Welcome 2 -->

            <%- current_subgroup = topic[:id] == subgroup_id -%>

            <!-- start a new heading area -->

            <li class="nav-header">
              <a class="" href="javascript:void(0);" data-toggle="collapse" data-target="#topicSubGroup-<%= groupidx %>-<%= topicidx %>">
                <span id="sgSpan-<%= groupidx %>-<%= topicidx %>" class="fa <%= current_subgroup ? 'fa-caret-down' : 'fa-caret-right' %>"></span>
                  &nbsp;<%= topic[:name] %>

                  <!-- prints out the names of the second level books with arrow down or to right
                  So in this case: Welcome 2 -->

              </a>
              <ul id="topicSubGroup-<%= groupidx %>-<%= topicidx %>" class="nav-tertiary list-unstyled collapse<%= current_subgroup ? ' in' : '' %>">
                <%- topic[:topics].each.with_index do |subtopic, subtopicidx| -%>

                <!-- for each topic in this topic_group, in Welcome 2, what topics exist?
                     Welcome 2 Index Page, Welcome 3 and Welcome 2 More - we list them all.. -->

                <%# subtopic[:path] %>
                <%# subgroup_id %>
                <%# current_group %>
                <%# current_subgroup %>
                <%# topic_id %>

                <%- if not subtopic.has_key?(:topics) -%>
                <!-- is this is a single page? That is, does this topic have more topics?
                 Welcome 2 Index Page and Welcome 2 More -->

                  <%- current_subtopic = current_group && current_subgroup && (subtopic[:id] == topic_id) %>


                  <li>
                    <a class="<%= current_subtopic ? ' active' : '' %>" href="<%= subtopic_shim %><%= subtopic[:path] %>">
                      <%= subtopic[:name] %>
                    </a>
                  </li>

                <% else %>

                <!-- Welcome 3 -->

                <%- current_subsubgroup = subtopic[:id] == subsubgroup_id -%>

                <%# subsubgroup_id %>
                <%# subtopic[:id] %>
                <%# current_subsubgroup %>

                <li class="nav-header">
                  <a class="" href="javascript:void(0);" data-toggle="collapse" data-target="#topicSubSubGroup-<%= groupidx %>-<%= topicidx %>-<%= subtopicidx %>">
                    <span id="ssgSpan-<%= groupidx %>-<%= topicidx %>-<%= subtopicidx %>" class="fa <%= current_subsubgroup ? 'fa-caret-down' : 'fa-caret-right' %>"></span>
                    &nbsp;<%= subtopic[:name] %>
                  </a>
                  <ul id="topicSubSubGroup-<%= groupidx %>-<%= topicidx %>-<%= subtopicidx %>" class="nav-tertiary list-unstyled collapse<%= current_subsubgroup ? ' in' : '' %>">
                  <%- subtopic[:topics].each do |subsubtopic| -%>

                    <!-- list all topics within Welcome 3 here. Note that we are not coding this for more subtopics here -->
                    <%- current_subsubtopic = current_group && current_subgroup && current_subsubgroup && (subsubtopic[:id] == topic_id) %>

                    <li>
                      <a class="<%= current_subsubtopic ? ' active' : '' %>" href="<%= subtopic_shim %><%= subsubtopic[:path] %>" style="padding-left: 70px;">
                        <%= subsubtopic[:name] %>
                      </a>
                    </li>

                  <%- end -%>
                  </ul>
                  </li>

                <%- end -%>


                <%- end -%>
              </ul>
            </li>
          <%- end -%>
        <%- end -%>
      </ul>
    </li>
  <%- end -%>
</ul>