Trying to Create 3 levels nested sidebar menu in Techdoc Theme

#1

Hi,

I am trying to create 3 or 4 level nested sidebar menu. I am Using Techdoc Theme.

I am using this below code:

{{$currentNode := .}}
<nav>
  <ul>
  {{- if eq .Site.Params.ordersectionsby "title" -}}
    {{- range .Site.Home.Sections.ByTitle -}}
      {{template "menu" dict "sect" . "currentnode" $currentNode}}
    {{- end -}}
  {{- else -}}
    {{- range .Site.Home.Sections.ByWeight -}}
      {{template "menu" dict "sect" . "currentnode" $currentNode}}
    {{- end -}}
  {{- end}}
  </ul>
</nav>

{{define "menu"}}
{{- $currentNode := .currentnode -}}
{{ with .sect }}
{{ if .IsSection }}
{{ if in .Site.Params.menu_exclusion .Section }}
{{- else -}}
  {{- safeHTML .Params.head -}}
  {{- $numberOfPages := (add (len .Pages) (len .Sections)) -}}
<li class="{{ if .IsAncestor $currentNode }}parent{{ end }}{{ if eq .UniqueID $currentNode.UniqueID }} active{{ end }}{{ if .Params.alwaysopen }} parent{{ end }} ">
  <a href="{{ if $currentNode.Params.noLink}}javascript:void(0);{{else}}{{ .URL }}{{end}}" class="clickable panel-collapsed">{{ safeHTML .Params.Pre }}{{ .Title }}{{ safeHTML .Params.Post }} 
    <!-- If the section has children, and down arrow if active, right arrow otherwise -->
    {{- if ne $numberOfPages 0 -}} 
      {{- if eq $currentNode.CurrentSection . -}}
    <i class="fa fa-angle-down"></i>
      {{- else -}}
    <i class="fa fa-angle-right"></i>
      {{- end -}}
    {{- end -}}
  </a>
  {{- if and (ne $numberOfPages 0) (eq $currentNode.CurrentSection .) -}}
  <ul class="{{ if .IsAncestor $currentNode }}sub-menu{{ end }}">
      {{- .Scratch.Set "pages" .Pages -}}
      {{- if .Sections -}}
        {{- .Scratch.Set "pages" (.Pages | union .Sections) -}}
      {{- end -}}
      {{- $pages := (.Scratch.Get "pages") -}}
      {{- if eq .Site.Params.ordersectionsby "title" -}}
        {{- range $pages.ByTitle -}}
          {{- if and .Params.hidden (not $.showhidden) -}}
          {{- else -}}
  {{template "menu" dict "sect" . "currentnode" $currentNode}}
          {{- end -}}
        {{- end -}}
      {{- else -}}
        {{- range $pages.ByWeight -}}
          {{- if and .Params.hidden (not $.showhidden) -}}
          {{- else -}}
  {{template "menu" dict "sect" . "currentnode" $currentNode}}
          {{- end -}}
        {{- end -}}
      {{- end}}
  </ul>
  {{end}}
</li>
{{- end -}}
{{- else -}}
  {{- if not .Params.Hidden -}}
<li class="{{ if eq .UniqueID $currentNode.UniqueID }}active{{ end }}"><a href="{{ if $currentNode.Params.noLink}}javascript:void(0);{{else}}{{ .URL }}{{end}}" >{{ safeHTML .Params.Pre }}{{ .Title }}{{ safeHTML .Params.Post }}</a></li>
  {{- end -}}
{{ end -}}
{{ end -}}
{{ end }}

This Code is not working.

I am looking for output look like below:

<ul>
		<li><a href="#">Nav Link1</a></li>
		<li><a href="#">Nav Link2</a>
			<ul class="sub-menu">
				<li><a href="#">Sub Nav1</a>
					<ul class="sub-menu">
						<li><a href="#">Sub Sub Nav1</a></li>	
						<li><a href="#">Sub Sub Nav2</a></li>	
						<li><a href="#">Sub Sub Nav3</a>
							<ul class="sub-menu">
								<li><a href="#">Sub Nav1</a></li>	
								<li><a href="#">Sub Nav2</a></li>	
								<li><a href="#">Sub Nav3</a></li>	
							</ul>
						</li>	
					</ul>		
				</li>	
				<li><a href="#">Sub Nav2</a></li>	
				<li><a href="#">Sub Nav3</a></li>	
			</ul>		
		
		</li>
		<li><a href="#">Nav Link3</a></li>
		<li><a href="#">Nav Link4</a></li>
	</ul>

Can anybody help me to get above output…

0 Likes