zdoc/layouts/partials/main/sections/list-menu.html

<div class="menu">
  <h6 class="menu__label">
    {{ if .IsHome }}
      {{ .Site.Title }}
    {{ else }}
      {{ $.Param "Title" }}
    {{ end }}
  </h6>
  <ul>
    {{ $root := . }}
    {{ range (.Site.GetPage "section" .Type).Pages }}
      {{ template "render-menu" (dict "ctx" . "root" $root "depth" 0)}}
    {{ end }}
  </ul>
</div>

{{ define "render-menu" }}
  {{ $root := .root }}
  {{ $ctx := .ctx }}
  {{ $depth := .depth }}
  {{ $currentURL := $root.Permalink }}
  
  {{ $sectionName1 := index (last 1 (split (delimit (split $ctx.Permalink "/") "," "") ",")) 0 }}
  {{ $sectionName2 := index (last 2 (split (delimit (split $currentURL "/") "," "") ",")) 0 }}
  
  {{ $active := in $currentURL $ctx.Permalink }}
  {{ $active = or $active (eq $sectionName1 $sectionName2) }}
  {{ $active = or $active (in $currentURL $sectionName1) }}
  
  {{ if $ctx.Params.Collapsible }}
  <span class="menu__title--collapse {{ if $active }}active{{ end }}" data-depth="{{ $depth }}">
    {{ $ctx.Title }}
    <span
      class="menu__title--icon {{ if $active }}{{ if eq ($root.Param "languagedir") "rtl" }}downrtl{{ else }}down{{ end }}{{ else }}right{{ end }}">
      {{ if eq ($root.Param "languagedir") "rtl" }}
      {{ partial "svgs/arrow-left.svg" (dict "width" 22 "height" 22) }}
      {{ else }}
      {{ partial "svgs/arrow-right.svg" (dict "width" 22 "height" 22) }}
      {{ end }}
    </span>
  </span>
  <ul class="menu__list {{ if $active }}active{{ else if (in $ctx.Permalink (print "/" $sectionName1 "/")) }}{{ end }}"
    data-data={{ print "/" $sectionName1 "/"}} data-link={{ .root.Permalink }}>
    {{ range $ctx.Pages.ByWeight }}
    {{ if .Params.Collapsible }}
    {{ template "render-menu" (dict "ctx" . "root" $root "depth" (add $depth 1)) }}
    {{ else }}
    {{ $lastUrlElement1 := index (last 1 (split (delimit (split .Permalink "/") "," "") ",")) 0 }}
    {{ $lastUrlElement2 := index (last 1 (split (delimit (split $currentURL "/") "," "") ",")) 0 }}
    <li>
      <a href="{{ .Permalink }}"
        class="menu__title {{ if and (eq $lastUrlElement1 $lastUrlElement2) (eq $sectionName1 $sectionName2) }}active{{ end }}"
        data-depth="{{ $depth }}">{{ .Title }}</a>
    </li>
    {{ end }}
    {{ end }}
  </ul>
  {{ else }}
  {{ $lastUrlElement1 := index (last 1 (split (delimit (split $ctx.Permalink "/") "," "") ",")) 0 }}
  {{ $lastUrlElement2 := index (last 1 (split (delimit (split $currentURL "/") "," "") ",")) 0 }}
  <li class="{{ if $active }}active{{ end }}">
    <a href="{{ $ctx.Permalink }}" class="menu__title {{ if $active }}active{{ end }}">{{ $ctx.Title }}</a>
  </li>
  {{ end }}
{{ end }}

<script>
  var menuTitle = document.querySelectorAll('.menu__title');
  var modal = document.getElementById("myModal");
  var drawer = document.getElementById('myDrawer');

  var closeDrawer = function () {
    setTimeout(function () {
      modal.style.opacity = 0;
      drawer.style.left = '-100%';
      modal.style.left = '-100%';
    }, 250);
  }

  menuTitle ? 
  menuTitle.forEach(function(elem) {
    elem.onclick = function() {
      closeDrawer();
      localStorage.setItem('isDrawerOpen', 'false');
    }
  }) : null;
</script>