diff options
Diffstat (limited to 'layouts/partials/menu.html')
| -rw-r--r-- | layouts/partials/menu.html | 29 |
1 files changed, 24 insertions, 5 deletions
diff --git a/layouts/partials/menu.html b/layouts/partials/menu.html index f47080e..9868f4d 100644 --- a/layouts/partials/menu.html +++ b/layouts/partials/menu.html @@ -4,8 +4,7 @@ width: 100vw;
height: 100vh;
overflow: hidden;
- background-color: #19092be3;
- transition: all 0.5s;
+ background-color: var(--bgTransparent);
position: fixed;
left: 0;
top: -100vh;
@@ -15,6 +14,7 @@ "
>
<div
+ class="menu-container"
style="
background-color: var(--bgColor);
display: flex;
@@ -27,10 +27,29 @@ box-shadow: 3px 3px 5px 2px black;
"
>
- <a class="menu-item" href="/">Home</a>
+ <a class="menu-item" href="/"><i>{{ partial "icons/home" . }}</i>Home</a>
- {{ range .Site.Sections }}
- <a class="menu-item" href="{{ .Permalink }}">{{ .Title }}</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>
|