multi lev menu complete

#8

assets/sass/components/_menu.scss

@@ -39,6 +39,26 @@
     height: $menu-title-height;
     margin: 0.25rem 0;
 
+    &[data-depth="1"] {
+      font-size: 0.925rem;
+      margin-left: 1.25rem;
+    }
+
+    &[data-depth="2"] {
+      font-size: 0.925rem;
+      margin-left: 2.5rem;
+    }
+
+    &[data-depth="3"] {
+      font-size: 0.925rem;
+      margin-left: 3.75rem;
+    }
+
+    &[data-depth="4"] {
+      font-size: 0.925rem;
+      margin-left: 5rem;
+    }
+
     @include no-select;
     @include flexbox();
     @include align-items(center);
@@ -62,6 +82,26 @@
       height: $menu-title-height;
       margin: 0.25rem 0;
 
+      &[data-depth="1"] {
+        font-size: 0.925rem;
+        margin-left: 1.25rem;
+      }
+
+      &[data-depth="2"] {
+        font-size: 0.925rem;
+        margin-left: 2.5rem;
+      }
+
+      &[data-depth="3"] {
+        font-size: 0.925rem;
+        margin-left: 3.75rem;
+      }
+
+      &[data-depth="4"] {
+        font-size: 0.925rem;
+        margin-left: 5rem;
+      }
+
       @include no-select;
       @include flexbox();
       @include align-items(center);
@@ -69,9 +109,6 @@
         color: themed('body-color');
 
         &.active {
-          font-weight: bold;
-          color: themed('active-font-color');
-
           svg {
             color: themed('active-font-color');
           }
@@ -131,10 +168,6 @@
     
     @include transition();
 
-    .active {
-      font-weight: bold;
-    }
-
     li {
       margin-left: 1.25rem;
 

layouts/partials/head/scripts.html

@@ -101,7 +101,15 @@
           return null;
         }
 
+        var parent = elem.parentNode;
+        while (parent.classList.contains('menu__list') && parent.classList.contains('active')) {
+          console.log('parent');
+          parent.style.maxHeight = 100 * parent.children.length + "px";
+          parent = parent.parentNode;
+        }
+
         if (content.style.maxHeight) {
+          console.log('null');
           content.style.maxHeight = null;
           content.classList.remove('active');
           menuTitleIcon.classList.add('right');
@@ -112,6 +120,7 @@
             menuTitleIcon.classList.remove('down');
           }
         } else {
+          console.log('scrollHeight');
           content.style.maxHeight = content.scrollHeight + "px";
           content.classList.add('active');
           menuTitleIcon.classList.remove('right');

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

@@ -7,40 +7,62 @@
     {{ end }}
   </h6>
   <ul>
-    {{ $currentURL := .Permalink }}
+    {{ $root := . }}
     {{ range (.Site.GetPage "section" .Type).Pages }}
-      {{ $sectionName1 := index (last 1 (split (delimit (split .Permalink "/") "," "") ",")) 0 }}
-      {{ $sectionName2 := index (last 2 (split (delimit (split $currentURL "/") "," "") ",")) 0 }}
-      {{ if .Params.Collapsible }}
-        <span class="menu__title--collapse {{ if and (in $currentURL .Permalink) (eq $sectionName1 $sectionName2) }}active{{ end }}">
-          {{ .Title }}
-          <span class="menu__title--icon {{ if and (in $currentURL .Permalink) (eq $sectionName1 $sectionName2) }}{{ if eq ($.Param "languagedir") "rtl" }}downrtl{{ else }}down{{ end }}{{ else }}right{{ end }}">
-            {{ if eq ($.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 and (in $currentURL .Permalink) (eq $sectionName1 $sectionName2) }}active{{ end }}">
-          {{ range .Pages.ByWeight }}
-            {{ $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 }}">{{ .Title }}</a>
-            </li>
-          {{ end }}
-        </ul>
+      {{ 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 }}
-        {{ $lastUrlElement1 := index (last 1 (split (delimit (split .Permalink "/") "," "") ",")) 0 }}
-        {{ $lastUrlElement2 := index (last 1 (split (delimit (split $currentURL "/") "," "") ",")) 0 }}
-        <li class="{{ if and (eq $lastUrlElement1 $lastUrlElement2) (eq $sectionName1 $sectionName2) }}active{{ end }}">
-          <a href="{{ .Permalink }}" class="menu__title {{ if and (eq $lastUrlElement1 $lastUrlElement2) (eq $sectionName1 $sectionName2) }}active{{ end }}">{{ .Title }}</a>
-        </li>
+      {{ 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>
-</div>
+  {{ 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');

layouts/partials/main/sections/single-menu.html

@@ -7,37 +7,56 @@
     {{ end }}
   </h6>
   <ul>
-    {{ $currentURL := .Permalink }}
+    {{ $root := . }}
     {{ range (.Site.GetPage "section" .Type).Pages }}
-      {{ $sectionName1 := index (last 1 (split (delimit (split .Permalink "/") "," "") ",")) 0 }}
-      {{ $sectionName2 := index (last 2 (split (delimit (split $currentURL "/") "," "") ",")) 0 }}
+      {{ 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 }}
-        <span class="menu__title--collapse {{ if and (in $currentURL .Permalink) (eq $sectionName1 $sectionName2) }}active{{ end }}">
-          {{ .Title }}
-          <span class="menu__title--icon {{ if and (in $currentURL .Permalink) (eq $sectionName1 $sectionName2) }}{{ if eq ($.Param "languagedir") "rtl" }}downrtl{{ else }}down{{ end }}{{ else }}right{{ end }}">
-            {{ if eq ($.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 and (in $currentURL .Permalink) (eq $sectionName1 $sectionName2) }}active{{ end }}">
-          {{ range .Pages.ByWeight }}
-            {{ $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 }}">{{ .Title }}</a>
-            </li>
-          {{ end }}
-        </ul>
+        {{ 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 in $lastUrlElement1 $lastUrlElement2 }}active{{ end }}">{{ .Title }}</a>
+          <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>
-</div>
+  {{ 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 }}