1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
|
<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>
|
