aethrvmn/home
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Added hide/show for menu

Browse source
This commit is contained in:
aethrvmn 2024-11-18 00:43:03 +01:00
parent a9c10cdab8
commit e74715d745
2 changed files with 50 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
layouts/partials/docs/inject/toc-before.html
View file

@ -0,0 +1 @@
<u><h3>TableOfContents</h3></u>

46
layouts/partials/docs/menu.html
View file

@ -4,25 +4,67 @@
<div class="book-menu-top">
{{ partial "docs/inject/menu-before" . }}
{{ partial "docs/menu-hugo" .Site.Menus.before }}
<h4><u>{{ partial "docs/menu-hugo" .Site.Menus.before }}</u></h4>
</div>
<div class="book-menu-mid">
<!-- Portfolio Section -->
<div class="menu-section">
<h4 class="toggle-section" data-target="portfolio-section">
<u>portfolio</u> <span class="arrow">▼</span>
</h4>
<div id="portfolio-section" class="section-content">
{{ if .Site.Params.BookMenuBundle }}
{{ partial "docs/menu-bundle" . }}
{{ else }}
{{ partial "docs/menu-filetree" . }}
{{ end }}
</div>
</div>
<!-- Writing Section -->
<div class="menu-section">
<h4 class="toggle-section" data-target="writing-section">
<u>writing</u> <span class="arrow">▼</span>
</h4>
<div id="writing-section" class="section-content">
{{ partial "docs/menu-hugo" .Site.Menus.after }}
</div>
</div>
</div>
<div class="book-menu-bot">
{{ partial "docs/inject/menu-after" . }}
{{ partial "docs/menu-hugo" .Site.Menus.after }}
{{ partial "docs/menu-hugo" .Site.Menus.contact }}
</div>
</nav>
<!-- Restore menu position as soon as possible to avoid flickering -->
{{ $script := resources.Get "menu-reset.js" | resources.Minify }}
<!---->
{{ with $script.Content }}
<script>{{ . | safeJS }}</script>
<script>
document.addEventListener("DOMContentLoaded", () => {
const toggleSections = document.querySelectorAll(".toggle-section");
toggleSections.forEach((toggle) => {
toggle.addEventListener("click", () => {
const targetId = toggle.getAttribute("data-target");
const section = document.getElementById(targetId);
const arrow = toggle.querySelector(".arrow");
if (section.classList.contains("open")) {
section.classList.remove("open");
arrow.classList.remove("up");
} else {
section.classList.add("open");
arrow.classList.add("up");
}
});
});
});
</script>
{{ end }}