lib/templates/html/sidebar.html

{% autoescape off %}
<aside class="sidebar">
  <div id="leftside-navigation" class="nano">
    <ul class="nano-content">
      <li>
        <a href="#summary"><i class="fa-solid fa-list"></i><span>Summary</span></a>
      </li>
{% for segment in segments %}
      <li class="sub-menu">
        <a href="javascript:void(0);"><i class="{{segment.icon}}"></i><span>{{segment.name}}</span><i class="arrow fa-solid fa-angle-right pull-right"></i></a>
        <ul>
{% for histogram in segment.histograms %}
          <li><a href="#{{segment.name}}-{{histogram}}">{{histogram}}</a></li>
{% endfor %}
{% for metric in segment.pageload_metrics %}
          <li><a href="#{{segment.name}}-{{metric}}">pageload event: {{metric}}</a></li>
{% endfor %}
        </ul>
      </li>
{% endfor %}
      <li>
        <a href="#config"><i class="fa-solid fa-gear"></i><span>Configuration</span></a>
      </li>
    </ul>
  </div>
</aside>

<script id="rendered-js" >
  $("#leftside-navigation .sub-menu > a").click(function (e) {
  $("#leftside-navigation ul ul").slideUp(), $(this).next().is(":visible") || $(this).next().slideDown(),
  e.stopPropagation();
});
</script>
{% endautoescape %}