diff --git a/assets/css/components/sidebar.css b/assets/css/components/sidebar.css index 394c8d63..7fe6c8c5 100644 --- a/assets/css/components/sidebar.css +++ b/assets/css/components/sidebar.css @@ -1,5 +1,5 @@ @media (max-width: 767px) { - .sidebar-container { + .hextra-sidebar-container { @apply hx-fixed hx-pt-[calc(var(--navbar-height))] hx-top-0 hx-w-full hx-bottom-0 hx-z-[15] hx-overscroll-contain hx-bg-white dark:hx-bg-dark; transition: transform 0.8s cubic-bezier(0.52, 0.16, 0.04, 1); will-change: transform, opacity; @@ -8,7 +8,7 @@ } } -.sidebar-container { +.hextra-sidebar-container { li > div { @apply hx-h-0; } @@ -18,4 +18,19 @@ li.open > a > span > svg > path { @apply hx-rotate-90; } + + .hextra-sidebar-item-list { + @apply hx-relative hx-flex hx-flex-col hx-gap-1 before:hx-absolute before:hx-inset-y-1 before:hx-w-px before:hx-bg-gray-200 ltr:hx-ml-3 ltr:hx-pl-3 ltr:before:hx-left-0 rtl:hx-mr-3 rtl:hx-pr-3 rtl:before:hx-right-0 dark:before:hx-bg-neutral-800; + } + + .hextra-sidebar-item-link { + @apply hx-flex hx-items-center hx-justify-between hx-gap-2 hx-cursor-pointer hx-rounded hx-px-2 hx-py-1.5 hx-text-sm hx-transition-colors; + + &.active { + @apply hx-bg-primary-100 hx-font-semibold hx-text-primary-800 contrast-more:hx-border contrast-more:hx-border-primary-500 dark:hx-bg-primary-400/10 dark:hx-text-primary-600 contrast-more:dark:hx-border-primary-500; + } + &.inactive { + @apply hx-text-gray-500 hover:hx-bg-gray-100 hover:hx-text-gray-900 contrast-more:hx-border contrast-more:hx-border-transparent contrast-more:hx-text-gray-900 contrast-more:hover:hx-border-gray-900 dark:hx-text-neutral-400 dark:hover:hx-bg-primary-100/5 dark:hover:hx-text-gray-50 contrast-more:dark:hx-text-gray-50 contrast-more:dark:hover:hx-border-gray-50; + } + } } diff --git a/assets/js/menu.js b/assets/js/menu.js index 9191b057..f27ed9a4 100644 --- a/assets/js/menu.js +++ b/assets/js/menu.js @@ -3,7 +3,7 @@ document.addEventListener('DOMContentLoaded', function () { const menu = document.querySelector('.hamburger-menu'); const overlay = document.querySelector('.mobile-menu-overlay'); - const sidebarContainer = document.querySelector('.sidebar-container'); + const sidebarContainer = document.querySelector('.hextra-sidebar-container'); // Initialize the overlay const overlayClasses = ['hx-fixed', 'hx-inset-0', 'hx-z-10', 'hx-bg-black/80', 'dark:hx-bg-black/60']; diff --git a/assets/js/sidebar.js b/assets/js/sidebar.js index 65f7b15f..b398d074 100644 --- a/assets/js/sidebar.js +++ b/assets/js/sidebar.js @@ -1,3 +1,12 @@ +/** + * Check if the element is visible. + * @param {Element} element Dom element + * @returns boolean + */ +function isVisible(element) { + return element.offsetWidth > 0 || element.offsetHeight > 0; +} + document.addEventListener("DOMContentLoaded", function () { scrollToActiveItem(); enableCollapsibles(); @@ -10,10 +19,43 @@ function enableCollapsibles() { e.preventDefault(); const list = button.parentElement.parentElement; if (list) { - list.classList.toggle("open") + list.classList.toggle("open"); } }); }); + + const isCached = "{{- site.Params.page.sidebar.cache | default false -}}" === "true"; + const currentPagePath = window.location.href; + + if (isCached) { + // find the current page in the sidebar and open the parent lists + const sidebar = document.querySelector(".hextra-sidebar-container"); + if (sidebar) { + // find a tags and compare href with current page path + const links = sidebar.querySelectorAll("a"); + links.forEach(function (link) { + const linkPath = link.href; + + if (currentPagePath === linkPath) { + // add active class to the link + link.classList.add("active"); + link.classList.remove("inactive"); + + if (!isVisible(link)) { + return; + } + // recursively open parent lists + let parent = link.parentElement; + while (parent && !parent.classList.contains("hextra-sidebar-container")) { + if (parent.tagName === "LI" && parent.classList.contains("hextra-sidebar-item")) { + parent.classList.add("open"); + } + parent = parent.parentElement; + } + } + }); + } + } } function scrollToActiveItem() { @@ -31,6 +73,6 @@ function scrollToActiveItem() { const yDistance = visibleActiveItem.getBoundingClientRect().top - sidebarScrollbar.getBoundingClientRect().top; sidebarScrollbar.scrollTo({ behavior: "instant", - top: yDistance - yOffset + top: yDistance - yOffset, }); } diff --git a/layouts/partials/components/sidebar/bottom.html b/layouts/partials/components/sidebar/bottom.html new file mode 100644 index 00000000..40871bd3 --- /dev/null +++ b/layouts/partials/components/sidebar/bottom.html @@ -0,0 +1,12 @@ +{{- range site.Menus.sidebar }} + {{- $name := or (T .Identifier) .Name }} + {{- if eq .Params.type "separator" }} +
  • + {{ $name }} +
    • + {{- else }} +
  • + {{- partial "components/sidebar/item-link" (dict "active" false "title" $name "link" (.URL | relLangURL)) -}} +
    • + {{- end }} +{{- end -}} diff --git a/layouts/partials/components/sidebar/collapsible-button.html b/layouts/partials/components/sidebar/collapsible-button.html new file mode 100644 index 00000000..3ba74f3a --- /dev/null +++ b/layouts/partials/components/sidebar/collapsible-button.html @@ -0,0 +1,5 @@ + + + + + diff --git a/layouts/partials/components/sidebar/generate-section-data.html b/layouts/partials/components/sidebar/generate-section-data.html new file mode 100644 index 00000000..a44dd0cf --- /dev/null +++ b/layouts/partials/components/sidebar/generate-section-data.html @@ -0,0 +1,51 @@ +{{- $context := . -}} + +{{- $pages := union .RegularPages .Sections -}} +{{- $pages = where $pages "Params.sidebar.exclude" "!=" true -}} + +{{- $data := slice -}} + +{{- range $pages.ByWeight -}} + {{ $structure := (partial "sidebar/section-walk" .) | unmarshal -}} + {{ $data = $data | append $structure -}} +{{ end -}} + +{{- define "partials/sidebar/section-walk" -}} + {{- with . -}} + { + "title": "{{ partial "utils/title" . }}", + "link": "{{ .RelPermalink }}", + "toc": {{ partial "sidebar/section-page-toc" . }}, + "open": {{ .Params.sidebar.open | default false }} + {{- if .IsSection }}, + "items": [ + {{ $pages := union .RegularPages .Sections -}} + {{ $pages = where $pages "Params.sidebar.exclude" "!=" true -}} + {{ range $index, $page := $pages.ByWeight -}} + {{ partial "sidebar/section-walk" . }}{{ if not (ge $index (sub (len $pages) 1)) }},{{ end -}} + {{ end -}} + ] + {{ end -}} + } + {{- end }} +{{- end -}} + +{{- define "partials/sidebar/section-page-toc" -}} + {{/* Get level 2 headings list used mainly for mobile navigation */}} + [ + {{- with .Fragments.Headings -}} + {{/* Loop over level 1 headings */}} + {{- range . }} + {{- with .Headings }} + {{ $headings := . }} + {{- range $index, $heading := $headings }} + {{ $heading.Title | jsonify (dict "noHTMLEscape" true) }} + {{- if not (ge $index (sub (len $headings) 1)) }},{{ end -}} + {{ end -}} + {{- end -}} + {{ end -}} + {{- end -}} + ] +{{- end -}} + +{{ return ($data | jsonify (dict "noHTMLEscape" true)) }} diff --git a/layouts/partials/components/sidebar/get-section-data.html b/layouts/partials/components/sidebar/get-section-data.html new file mode 100644 index 00000000..8b073a89 --- /dev/null +++ b/layouts/partials/components/sidebar/get-section-data.html @@ -0,0 +1,20 @@ +{{/* Get section sidebar config from Hugo `data` directory + + If the site is multilingual, the sidebar data is stored in a language-specific + directory. For example, the English sidebar data is stored in `data/en/sidebar.yaml`. +*/}} +{{ $data := "" }} +{{ $section := .Section | default "index" }} +{{ $filename := "sidebar" }} + +{{ if hugo.IsMultilingual }} + {{ with (index site.Data site.Language.Lang $filename $section) }} + {{ $data = . }} + {{ end }} +{{ else }} + {{ with (index site.Data $filename $section) }} + {{ $data = . }} + {{ end }} +{{ end }} + +{{ return $data }} diff --git a/layouts/partials/components/sidebar/item-link.html b/layouts/partials/components/sidebar/item-link.html new file mode 100644 index 00000000..c60a52e1 --- /dev/null +++ b/layouts/partials/components/sidebar/item-link.html @@ -0,0 +1,18 @@ +{{- $external := strings.HasPrefix .link "http" -}} + +{{- $activeClass := cond (.active) "active" "inactive" -}} + + + + {{- .title -}} + {{- with .context }} + {{- if or .RegularPages .Sections }} + {{- partialCached "components/sidebar/collapsible-button" . }} + {{- end }} + {{ end -}} + {{- with .items }}{{- partialCached "components/sidebar/collapsible-button" site.Home }}{{ end -}} + diff --git a/layouts/partials/components/sidebar/render-data.html b/layouts/partials/components/sidebar/render-data.html new file mode 100644 index 00000000..41750cd3 --- /dev/null +++ b/layouts/partials/components/sidebar/render-data.html @@ -0,0 +1,16 @@ +{{- $page := .page -}} +{{- $pageLink := $page.RelPermalink -}} +{{- $cached := .cached | default false }} + +{{- range .data -}} + {{- $active := and (not $cached) (or (eq $pageLink .link) (eq (strings.TrimSuffix "/" $pageLink) .link)) -}} + {{- $containsPage := hasPrefix $pageLink .link -}} + {{- $shouldOpen := or (.open) $containsPage $active | default false -}} + +
  • + {{- partial "components/sidebar/item-link" (dict "active" $active "title" .title "link" .link "items" .items) -}} + {{- if .items -}} + {{- partial "components/sidebar/render-items" (dict "items" .items "link" $pageLink "cached" $cached) -}} + {{- end -}} +
    • +{{ end }} diff --git a/layouts/partials/components/sidebar/render-items.html b/layouts/partials/components/sidebar/render-items.html new file mode 100644 index 00000000..b43f5ce3 --- /dev/null +++ b/layouts/partials/components/sidebar/render-items.html @@ -0,0 +1,21 @@ +{{- $items := .items -}} +{{- $pageLink := .link -}} +{{- $cached := .cached | default false }} + + +
    + +
    diff --git a/layouts/partials/scripts.html b/layouts/partials/scripts.html index 026b3445..c2174027 100644 --- a/layouts/partials/scripts.html +++ b/layouts/partials/scripts.html @@ -4,7 +4,7 @@ {{- $jsLang := resources.Get "js/lang.js" -}} {{- $jsCodeCopy := resources.Get "js/code-copy.js" -}} {{- $jsFileTree := resources.Get "js/filetree.js" -}} -{{- $jsSidebar := resources.Get "js/sidebar.js" -}} +{{- $jsSidebar := resources.Get "js/sidebar.js" | resources.ExecuteAsTemplate "sidebar.js" . -}} {{- $jsBackToTop := resources.Get "js/back-to-top.js" -}} {{- $scripts := slice $jsTheme $jsMenu $jsCodeCopy $jsTabs $jsLang $jsFileTree $jsSidebar $jsBackToTop | resources.Concat "js/main.js" -}} diff --git a/layouts/partials/sidebar-ng.html b/layouts/partials/sidebar-ng.html new file mode 100644 index 00000000..d2bb59ea --- /dev/null +++ b/layouts/partials/sidebar-ng.html @@ -0,0 +1,95 @@ +{{- $context := .context -}} + +{{- $disableSidebar := .disableSidebar | default false -}} +{{- $displayPlaceholder := .displayPlaceholder | default false -}} + +{{- $sidebarClass := cond $disableSidebar (cond $displayPlaceholder "md:hx-hidden xl:hx-block" "md:hx-hidden") "md:hx-sticky" -}} + +{{- $navRoot := cond (eq site.Home.Type "docs") site.Home $context.FirstSection -}} +{{- $pageURL := $context.RelPermalink -}} + +{{- $data := slice -}} +{{- $dataMobile := slice -}} + +{{- if (eq site.Params.page.sidebar.source "data") -}} + {{ $data = partialCached "components/sidebar/get-section-data" $context $context.Section }} + {{- $dataMobile = $data -}} +{{- else -}} + {{- $data = (partialCached "components/sidebar/generate-section-data" $navRoot $navRoot) | unmarshal -}} + {{- $dataMobile = (partialCached "components/sidebar/generate-section-data" site.Home site.Home) | unmarshal -}} +{{- end -}} + +{{- $shouldCache := site.Params.page.sidebar.cache | default false -}} + +{{/* EXPERIMENTAL */}} +{{- if .context.Params.sidebar.hide -}} + {{- $disableSidebar = true -}} + {{- $displayPlaceholder = true -}} +{{- end -}} + +
    + + + +{{- define "partials/components/sidebar/mobile-search" -}} +
    + {{- partialCached "search.html" . -}} +
    +{{- end -}} + +{{- define "partials/components/sidebar/switches" -}} + {{- $context := .context -}} + {{- $disableSidebar := .disableSidebar -}} + {{/* Hide theme switch when sidebar is disabled */}} + {{ $switchesClass := cond $disableSidebar "md:hx-hidden" "" -}} + {{ $displayThemeToggle := (site.Params.theme.displayToggle | default true) -}} + + {{ if or site.IsMultiLingual $displayThemeToggle }} +
    + {{- with site.IsMultiLingual -}} + {{- partial "language-switch" (dict "context" $context "grow" true) -}} + {{- with $displayThemeToggle }}{{ partial "theme-toggle" (dict "hideLabel" true) }}{{ end -}} + {{- else -}} + {{- with $displayThemeToggle -}} +
    {{ partial "theme-toggle" }}
    + {{- end -}} + {{- end -}} +
    + {{- end -}} +{{- end -}}