blob: 0a87cee19b8771257ee207583f73ba5fd9e0afd8 (
plain)
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
|
<div
class="slide-menu collapsed"
style="
width: 100vw;
height: 100vh;
overflow: hidden;
background-color: var(--bgTransparent);
position: fixed;
left: 0;
top: -100vh;
display: flex;
justify-content: center;
align-items: center;
"
>
<div
class="menu-container"
style="
background-color: var(--bgAbove);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 6px;
border: solid 1px var(--textColor);
border-radius: 5px;
box-shadow: 3px 3px 5px 2px var(--bgBelow);
"
>
<a class="menu-item" href="/"><i>{{ partial "icons/home" . }}</i>Home</a>
{{ range .Site.Sections.ByWeight }}
<a class="menu-item" href="{{ .Permalink }}"
><i>{{ if .Params.icon }} {{ partial (print "icons/" .Params.icon) . }}
{{ else }} {{ partial "icons/folder" . }} {{ end }}</i>{{ .Title }}</a
>
{{ end }}
</div>
</div>
<script>
const slideMenu = document.querySelector(".slide-menu");
const menuContainer = document.querySelector(".menu-container");
slideMenu.addEventListener("click", (event) => {
if (event.target !== menuContainer){
const hamBurger = document.querySelector(".hamburger");
const cross = document.querySelector(".cross");
htmlDoc.style.overflowY = "scroll";
htmlDoc.style.marginRight = "0";
hamBurger.style.visibility = "visible";
cross.style.visibility = "hidden";
slideMenu.classList.add("collapsed");
slideMenu.style.top = "-100vh";
}
});
</script>
|
