<div>
  <nav class='nav-menu'>
    {{ template "section-tree-nav-section" (dict "page" . "section" .FirstSection)  }}
  </nav>
</div>

{{ define "section-tree-nav-section" }}
{{ $s := .section }}
{{ $p := .page }}
{{ $list_active := $p.IsDescendant $s }}
{{ if eq $s $s.FirstSection}}
{{ else }}
<p class="list-title">
	<svg width="1em" height="1em" viewBox="0 0 24 24" class="{{ if $list_active }}arrow-open{{ end }}">
		<path fill="#FFF" d="M6.426 8L5 9.426l7 7 7-7L17.574 8 12 13.574z" opacity="0.9"></path>
	</svg>
	{{ $s.LinkTitle }}
</p>
{{ end }}

<ul class="{{ if $list_active }}ul-active{{ end }}">
	{{ $pages := where (union $s.Pages $s.Sections).ByWeight ".Params.toc_hide" "!=" true }}
	{{ range $pages }}
	{{ $active := eq . $p }}
	<li class="list{{ if $active }} active{{ end }}">
		{{ if .IsPage }}
		<a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a>
		{{ else }}
		{{ template "section-tree-nav-section" (dict "page" $p "section" .) }}
		{{ end }}
	</li>
	{{ end }}
</ul>
{{ end }}
<script>
	$('.list-title').click(function() {
		console.log('click')
		$(this).find('svg').toggleClass('arrow-open')
		$(this).next().toggleClass('ul-active')
	})
</script>
