website/layouts/partials/tree.html
2020-04-29 15:35:58 +08:00

42 lines
1.1 KiB
HTML

<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>