docker
/
docs
mirror of https://github.com/docker/docs.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

hugo: use inline svgs for sidebar icons 

Signed-off-by: David Karlsson <35727626+dvdksn@users.noreply.github.com>
This commit is contained in:
David Karlsson 2024-01-25 10:44:21 +01:00
parent 1f42d72ed3
commit 558fbdfabc
2 changed files with 11 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
assets/js/src/sidebar.js
View File

@ -1,13 +1,9 @@
function toggleMenuItem(event) {
const section = event.currentTarget.parentElement;
const icon = section.querySelector(".icon");
const icons = event.currentTarget.querySelectorAll(".icon-svg");
const subsection = section.querySelector("ul");
subsection.classList.toggle("hidden");
if (subsection.classList.contains("hidden")) {
icon.setAttribute("data-icon", "expand_more");
} else {
icon.setAttribute("data-icon", "expand_less");
}
icons.forEach(i => i.classList.toggle('hidden'))
}
const sectiontree = document.querySelector("#sectiontree");

11
layouts/partials/sidebar.html
View File

@ -45,8 +45,15 @@
<li>
{{/* See event handler in assets/js/src/sidebar.js */}}
<button class="rounded px-4 sidebar-hover w-full flex items-center justify-between">
<span class="py-2 truncate flex items-center gap-2">{{ markdownify .entry.sectiontitle }}</span>
<span class="icon" data-icon="{{ cond $expanded "expand_less" "expand_more"}}"></span>
<span class="py-2 truncate flex items-center gap-2">
{{ markdownify .entry.sectiontitle }}
</span>
<span class="icon-svg {{ if $expanded }}hidden{{ end }}">
{{ partial "icon" "expand_more" }}
</span>
<span class="icon-svg {{ if not $expanded }}hidden{{ end }}">
{{ partial "icon" "expand_less" }}
</span>
</button>
<ul class="{{if not $expanded}}hidden {{end}}ml-3 md:ml-[21px]">
{{ range .entry.section }}