From 74fb165358319f8315f542e2ee066737bc08583c Mon Sep 17 00:00:00 2001 From: Xin Date: Wed, 3 Apr 2024 22:36:58 +0000 Subject: [PATCH 01/17] feat: sidebar util to read data --- .../components/sidebar/read-data.html | 20 +++++++++++++++++++ 1 file changed, 20 insertions(+) create mode 100644 layouts/partials/components/sidebar/read-data.html diff --git a/layouts/partials/components/sidebar/read-data.html b/layouts/partials/components/sidebar/read-data.html new file mode 100644 index 00000000..86592e01 --- /dev/null +++ b/layouts/partials/components/sidebar/read-data.html @@ -0,0 +1,20 @@ +{{/* + Get 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 := "" }} + +{{ if hugo.IsMultilingual }} + {{ with (index site.Data site.Language.Lang "sidebar") }} + {{ $data = . }} + {{ end }} +{{ else }} + {{ with (index site.Data "sidebar") }} + {{ $data = . }} + {{ end }} +{{ end }} + +{{ return $data }} From 462cc5b68d4a6a82faf7f7aaee936fd26f4ccc7c Mon Sep 17 00:00:00 2001 From: Xin Date: Thu, 4 Apr 2024 21:57:17 +0000 Subject: [PATCH 02/17] chore: add new sidebar template --- assets/css/components/sidebar.css | 4 +-- assets/js/menu.js | 2 +- layouts/partials/sidebar-ng.html | 41 +++++++++++++++++++++++++++++++ 3 files changed, 44 insertions(+), 3 deletions(-) create mode 100644 layouts/partials/sidebar-ng.html diff --git a/assets/css/components/sidebar.css b/assets/css/components/sidebar.css index 394c8d63..9c8221d3 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; } 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/layouts/partials/sidebar-ng.html b/layouts/partials/sidebar-ng.html new file mode 100644 index 00000000..e695a32a --- /dev/null +++ b/layouts/partials/sidebar-ng.html @@ -0,0 +1,41 @@ +{{- $context := .context -}} + +{{- $disableSidebar := .disableSidebar | default false -}} +{{- $displayPlaceholder := .displayPlaceholder | default false -}} + +{{- $sidebarClass := cond $disableSidebar (cond $displayPlaceholder "md:hidden xl:block" "md:hidden") "md:sticky" -}} + +{{- $navRoot := cond (eq site.Home.Type "docs") site.Home $context.FirstSection -}} +{{- $pageURL := $context.RelPermalink -}} + +{{ $data := partialCached "components/sidebar/read-data" $context $context.FirstSection }} + + + + +{{ with $data }} + {{ warnf "The data file for the sidebar is still unstable. Please use caution when upgrading." }} + 
+    {{ . | jsonify (dict "indent" "  ") }}
+
+{{ else }} + +{{ end }} + +{{- define "partials/sidebar/mobile-search" -}} +
+ {{- partialCached "search.html" . -}} +
+{{- end -}} From fdfdef69b57d0fd96896addd286b2ef964d68289 Mon Sep 17 00:00:00 2001 From: Xin Date: Fri, 5 Apr 2024 21:30:24 +0100 Subject: [PATCH 03/17] chore: basic structure using new sidebar data --- .../{read-data.html => get-section-data.html} | 10 +++--- layouts/partials/sidebar-ng.html | 33 +++++++++---------- 2 files changed, 20 insertions(+), 23 deletions(-) rename layouts/partials/components/sidebar/{read-data.html => get-section-data.html} (56%) diff --git a/layouts/partials/components/sidebar/read-data.html b/layouts/partials/components/sidebar/get-section-data.html similarity index 56% rename from layouts/partials/components/sidebar/read-data.html rename to layouts/partials/components/sidebar/get-section-data.html index 86592e01..a93bad0e 100644 --- a/layouts/partials/components/sidebar/read-data.html +++ b/layouts/partials/components/sidebar/get-section-data.html @@ -1,18 +1,18 @@ -{{/* - Get sidebar config from Hugo `data` directory +{{/* 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 "" }} +{{ $sidebarKey := "sidebar" }} {{ if hugo.IsMultilingual }} - {{ with (index site.Data site.Language.Lang "sidebar") }} + {{ with (index site.Data site.Language.Lang $sidebarKey $section) }} {{ $data = . }} {{ end }} {{ else }} - {{ with (index site.Data "sidebar") }} + {{ with (index site.Data $sidebarKey $section) }} {{ $data = . }} {{ end }} {{ end }} diff --git a/layouts/partials/sidebar-ng.html b/layouts/partials/sidebar-ng.html index e695a32a..08590029 100644 --- a/layouts/partials/sidebar-ng.html +++ b/layouts/partials/sidebar-ng.html @@ -8,34 +8,31 @@ {{- $navRoot := cond (eq site.Home.Type "docs") site.Home $context.FirstSection -}} {{- $pageURL := $context.RelPermalink -}} -{{ $data := partialCached "components/sidebar/read-data" $context $context.FirstSection }} +{{ $data := partialCached "components/sidebar/get-section-data" $context $context.Section }} - From 63f153999e36e9fde0d5b46a1b41b9df49657813 Mon Sep 17 00:00:00 2001 From: Xin Date: Sun, 14 Apr 2024 11:12:17 +0100 Subject: [PATCH 05/17] chore: basic rendering from data --- .../components/sidebar/item-link.html | 1 + .../components/sidebar/render-data.html | 15 ++++++++++++++ .../components/sidebar/render-items.html | 20 +++++++++++++++++++ layouts/partials/sidebar-ng.html | 2 +- 4 files changed, 37 insertions(+), 1 deletion(-) create mode 100644 layouts/partials/components/sidebar/render-data.html create mode 100644 layouts/partials/components/sidebar/render-items.html diff --git a/layouts/partials/components/sidebar/item-link.html b/layouts/partials/components/sidebar/item-link.html index ea7396e5..6fd4345b 100644 --- a/layouts/partials/components/sidebar/item-link.html +++ b/layouts/partials/components/sidebar/item-link.html @@ -15,4 +15,5 @@ {{- 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..bbbb1964 --- /dev/null +++ b/layouts/partials/components/sidebar/render-data.html @@ -0,0 +1,15 @@ +{{- $page := .page -}} +{{- $pageLink := $page.RelPermalink -}} + +{{- range .data -}} + {{- $active := or (eq $pageLink .link) (eq (strings.TrimSuffix "/" $pageLink) .link) -}} + {{- $containsPage := hasPrefix $pageLink .link -}} + {{- $shouldOpen := or (.open) $containsPage $active | default true -}} + +
  • + {{- 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) -}} + {{- 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..d1771851 --- /dev/null +++ b/layouts/partials/components/sidebar/render-items.html @@ -0,0 +1,20 @@ +{{- $items := .items -}} +{{- $pageLink := .link -}} +{{ $shouldOpen := true }} + + +
    +
      + {{- range $items }} + {{- $active := or (eq $pageLink .link) (eq (strings.TrimSuffix "/" $pageLink) .link) -}} +
    • + {{- 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" .link) -}} + {{- end -}} +
      • + {{- end -}} +
    +
    diff --git a/layouts/partials/sidebar-ng.html b/layouts/partials/sidebar-ng.html index 8eeed1a4..e9d8689d 100644 --- a/layouts/partials/sidebar-ng.html +++ b/layouts/partials/sidebar-ng.html @@ -25,7 +25,7 @@
      {{ with $data }} {{ warnf "The data file for the sidebar is still unstable. Please use caution when upgrading." }} - 
      {{ . | jsonify (dict "indent" "  ") }}
      + {{ partial "components/sidebar/render-data" (dict "data" . "page" $context) }} {{ end }} {{ partialCached "components/sidebar/footer" $context site.Home }}
    From 33f2cf653bd10e6f3e7ac2793ec1b840d3bf8b77 Mon Sep 17 00:00:00 2001 From: Xin Date: Sun, 14 Apr 2024 11:31:13 +0100 Subject: [PATCH 06/17] feat: generate sidebar json data for rendering --- .../sidebar/generate-section-data.html | 51 +++++++++++++++++++ .../components/sidebar/render-data.html | 2 +- .../components/sidebar/render-items.html | 5 +- layouts/partials/sidebar-ng.html | 4 +- 4 files changed, 58 insertions(+), 4 deletions(-) create mode 100644 layouts/partials/components/sidebar/generate-section-data.html 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..eb1df6d8 --- /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": "{{ .LinkTitle | default .File.BaseFileName }}", + "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/render-data.html b/layouts/partials/components/sidebar/render-data.html index bbbb1964..cc2bc2fd 100644 --- a/layouts/partials/components/sidebar/render-data.html +++ b/layouts/partials/components/sidebar/render-data.html @@ -4,7 +4,7 @@ {{- range .data -}} {{- $active := or (eq $pageLink .link) (eq (strings.TrimSuffix "/" $pageLink) .link) -}} {{- $containsPage := hasPrefix $pageLink .link -}} - {{- $shouldOpen := or (.open) $containsPage $active | default true -}} + {{- $shouldOpen := or (.open) $containsPage $active | default false -}}
  • {{- partial "components/sidebar/item-link" (dict "active" $active "title" .title "link" .link "items" .items) -}} diff --git a/layouts/partials/components/sidebar/render-items.html b/layouts/partials/components/sidebar/render-items.html index d1771851..61549aa8 100644 --- a/layouts/partials/components/sidebar/render-items.html +++ b/layouts/partials/components/sidebar/render-items.html @@ -1,6 +1,5 @@ {{- $items := .items -}} {{- $pageLink := .link -}} -{{ $shouldOpen := true }}
    @@ -9,6 +8,10 @@ > {{- range $items }} {{- $active := 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 -}} diff --git a/layouts/partials/sidebar-ng.html b/layouts/partials/sidebar-ng.html index e9d8689d..0f1b2267 100644 --- a/layouts/partials/sidebar-ng.html +++ b/layouts/partials/sidebar-ng.html @@ -8,8 +8,8 @@ {{- $navRoot := cond (eq site.Home.Type "docs") site.Home $context.FirstSection -}} {{- $pageURL := $context.RelPermalink -}} -{{ $data := partialCached "components/sidebar/get-section-data" $context $context.Section }} - +{{/* {{ $data := partialCached "components/sidebar/get-section-data" $context $context.Section }} */}} +{{ $data := partial "components/sidebar/generate-section-data" $navRoot | unmarshal }}
    From e444156bb90bae3828e12195e6ea86a7e31fdb93 Mon Sep 17 00:00:00 2001 From: Xin Date: Sun, 14 Apr 2024 12:28:39 +0100 Subject: [PATCH 07/17] refactor: add back mobile and footer for sidebar --- layouts/partials/sidebar-ng.html | 62 +++++++++++++++++++++++++------- 1 file changed, 49 insertions(+), 13 deletions(-) diff --git a/layouts/partials/sidebar-ng.html b/layouts/partials/sidebar-ng.html index 0f1b2267..7fb3a712 100644 --- a/layouts/partials/sidebar-ng.html +++ b/layouts/partials/sidebar-ng.html @@ -3,37 +3,73 @@ {{- $disableSidebar := .disableSidebar | default false -}} {{- $displayPlaceholder := .displayPlaceholder | default false -}} -{{- $sidebarClass := cond $disableSidebar (cond $displayPlaceholder "md:hidden xl:block" "md:hidden") "md:sticky" -}} +{{- $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 := partialCached "components/sidebar/get-section-data" $context $context.Section }} */}} -{{ $data := partial "components/sidebar/generate-section-data" $navRoot | unmarshal }} +{{/* {{ $data := partialCached "components/sidebar/get-section-data" $context $context.Section }} */}} +{{- $data := partial "components/sidebar/generate-section-data" $navRoot | unmarshal -}} +{{- $dataMobile := partial "components/sidebar/generate-section-data" site.Home | unmarshal -}} +
    -{{- define "partials/sidebar/mobile-search" -}} +{{- 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 -}} From a1c7acd6b509795c1b102ab659f659ae23e212f0 Mon Sep 17 00:00:00 2001 From: Xin Date: Sun, 14 Apr 2024 23:53:53 +0100 Subject: [PATCH 08/17] feat: add params page.sidebar.source and page.sidebar.cache --- .../sidebar/{footer.html => bottom.html} | 0 layouts/partials/sidebar-ng.html | 27 ++++++++++++++----- 2 files changed, 21 insertions(+), 6 deletions(-) rename layouts/partials/components/sidebar/{footer.html => bottom.html} (100%) diff --git a/layouts/partials/components/sidebar/footer.html b/layouts/partials/components/sidebar/bottom.html similarity index 100% rename from layouts/partials/components/sidebar/footer.html rename to layouts/partials/components/sidebar/bottom.html diff --git a/layouts/partials/sidebar-ng.html b/layouts/partials/sidebar-ng.html index 7fb3a712..8e7a6bf1 100644 --- a/layouts/partials/sidebar-ng.html +++ b/layouts/partials/sidebar-ng.html @@ -8,9 +8,18 @@ {{- $navRoot := cond (eq site.Home.Type "docs") site.Home $context.FirstSection -}} {{- $pageURL := $context.RelPermalink -}} -{{/* {{ $data := partialCached "components/sidebar/get-section-data" $context $context.Section }} */}} -{{- $data := partial "components/sidebar/generate-section-data" $navRoot | unmarshal -}} -{{- $dataMobile := partial "components/sidebar/generate-section-data" site.Home | unmarshal -}} +{{- $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 -}}
    @@ -35,9 +44,13 @@ {{- else -}}
      {{- with $data -}} - {{- partial "components/sidebar/render-data" (dict "data" . "page" $context) -}} + {{- if $shouldCache -}} + {{- partialCached "components/sidebar/render-data" (dict "data" . "page" $context) $navRoot -}} + {{- else -}} + {{- partial "components/sidebar/render-data" (dict "data" . "page" $context) -}} + {{- end -}} {{- end -}} - {{- partialCached "components/sidebar/footer" $context site.Home -}} + {{- partialCached "components/sidebar/bottom" $context site.Home -}}
    {{ end -}} @@ -59,7 +72,9 @@ {{ if or site.IsMultiLingual $displayThemeToggle }}
    {{- with site.IsMultiLingual -}} From 8c789626be35c4157b82c0ee353e3cd126300fe1 Mon Sep 17 00:00:00 2001 From: Xin Date: Sun, 28 Apr 2024 23:37:50 +0100 Subject: [PATCH 09/17] refactor: move sidebar item styles to css --- assets/css/components/sidebar.css | 12 ++++++++++++ layouts/partials/components/sidebar/item-link.html | 11 +++++------ 2 files changed, 17 insertions(+), 6 deletions(-) diff --git a/assets/css/components/sidebar.css b/assets/css/components/sidebar.css index 9c8221d3..5911fc22 100644 --- a/assets/css/components/sidebar.css +++ b/assets/css/components/sidebar.css @@ -18,4 +18,16 @@ li.open > a > span > svg > path { @apply hx-rotate-90; } + + .sidebar-item { + @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; + } + + .sidebar-item-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; + } + + .sidebar-item-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/layouts/partials/components/sidebar/item-link.html b/layouts/partials/components/sidebar/item-link.html index 6fd4345b..4f6dd637 100644 --- a/layouts/partials/components/sidebar/item-link.html +++ b/layouts/partials/components/sidebar/item-link.html @@ -1,11 +1,10 @@ {{- $external := strings.HasPrefix .link "http" -}} + +{{- $activeClass := cond (.active) "sidebar-item-active" "sidebar-item-inactive" -}} + + From 68e1e251191b9c8e167a1e3a928a8caa4f82ab7a Mon Sep 17 00:00:00 2001 From: Xin Date: Mon, 29 Apr 2024 22:36:48 +0100 Subject: [PATCH 10/17] feat: caching for sidebar items from data --- assets/css/components/sidebar.css | 4 ++ assets/js/sidebar.js | 44 ++++++++++++++++++- .../components/sidebar/render-data.html | 7 +-- .../components/sidebar/render-items.html | 12 +++-- layouts/partials/scripts.html | 2 +- layouts/partials/sidebar-ng.html | 4 +- 6 files changed, 59 insertions(+), 14 deletions(-) diff --git a/assets/css/components/sidebar.css b/assets/css/components/sidebar.css index 5911fc22..fcfa35f9 100644 --- a/assets/css/components/sidebar.css +++ b/assets/css/components/sidebar.css @@ -30,4 +30,8 @@ .sidebar-item-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; } + + .sidebar-item-list-container { + @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; + } } diff --git a/assets/js/sidebar.js b/assets/js/sidebar.js index 3b10eb49..895f9bca 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 () { const buttons = document.querySelectorAll(".hextra-sidebar-collapsible-button"); buttons.forEach(function (button) { @@ -5,8 +14,41 @@ document.addEventListener("DOMContentLoaded", function () { 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("sidebar-item-active"); + link.classList.remove("sidebar-item-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("sidebar-item-list")) { + parent.classList.add("open"); + } + parent = parent.parentElement; + } + } + }); + } + } }); diff --git a/layouts/partials/components/sidebar/render-data.html b/layouts/partials/components/sidebar/render-data.html index cc2bc2fd..f72a4a4d 100644 --- a/layouts/partials/components/sidebar/render-data.html +++ b/layouts/partials/components/sidebar/render-data.html @@ -1,15 +1,16 @@ {{- $page := .page -}} {{- $pageLink := $page.RelPermalink -}} +{{- $cached := .cached | default false }} {{- range .data -}} - {{- $active := or (eq $pageLink .link) (eq (strings.TrimSuffix "/" $pageLink) .link) -}} + {{- $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) -}} + {{- 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 index 61549aa8..c47dda2b 100644 --- a/layouts/partials/components/sidebar/render-items.html +++ b/layouts/partials/components/sidebar/render-items.html @@ -1,21 +1,19 @@ {{- $items := .items -}} {{- $pageLink := .link -}} +{{- $cached := .cached | default false }}
    -