feat: multi-level sidebar

chore: support multiple search elements chore: sidebar display toc on mobile view chore: add hamburger menu to navbar on mobile chore: add markdown link hook for opening external link in new window chore: add sidebar footer - put search under params.type - make navbar link aware of external link
2023-08-06 15:23:37 +01:00 · 2023-08-06 15:23:37 +01:00 · 2f34627da3
commit 2f34627da3
parent 7e37b73779
12 changed files with 304 additions and 77 deletions
--- a/assets/css/components/navbar.css
+++ b/assets/css/components/navbar.css
@ -0,0 +1,47 @@
+nav {
+  .search-wrapper {
+    @apply hidden md:inline-block;
+  }
+}
+
+.hamburger-menu svg {
+  g {
+    @apply origin-center;
+    transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1);
+  }
+  path {
+    opacity: 1;
+    transition:
+      transform 0.2s cubic-bezier(0.25, 1, 0.5, 1) 0.2s,
+      opacity 0.2s ease 0.2s;
+  }
+
+  &.open {
+    path {
+      transition:
+        transform 0.2s cubic-bezier(0.25, 1, 0.5, 1),
+        opacity 0s ease 0.2s;
+    }
+    g {
+      transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1) 0.2s;
+    }
+  }
+
+  &.open > {
+    path {
+      @apply opacity-0;
+    }
+    g:nth-of-type(1) {
+      @apply rotate-45;
+      path {
+        transform: translate3d(0, 6px, 0);
+      }
+    }
+    g:nth-of-type(2) {
+      @apply -rotate-45;
+      path {
+        transform: translate3d(0, -6px, 0);
+      }
+    }
+  }
+}
--- a/assets/css/components/sidebar.css
+++ b/assets/css/components/sidebar.css
@ -1,7 +1,7 @@
@media (max-width: 767px) {
  .sidebar-container {
    @apply fixed pt-[calc(var(--navbar-height))] top-0 w-full bottom-0 z-[15] overscroll-contain bg-white dark:bg-dark;
-    /* transition: transform 0.8s cubic-bezier(0.52, 0.16, 0.04, 1); */
+    transition: transform 0.8s cubic-bezier(0.52, 0.16, 0.04, 1);
    will-change: transform, opacity;
    contain: layout style;
    backface-visibility: hidden;
--- a/assets/css/styles.css
+++ b/assets/css/styles.css
@ -8,6 +8,7 @@
@import "components/steps.css";
@import "components/search.css";
@import "components/sidebar.css";
+@import "components/navbar.css";

 html {
  @apply text-base antialiased;
@ -22,6 +23,7 @@ body {
 :root {
  --primary-hue: 212deg;
  --navbar-height: 4rem;
+  --menu-height: 3.75rem;
 }

 .dark {
--- a/assets/js/flexsearch.js
+++ b/assets/js/flexsearch.js
@ -10,17 +10,33 @@
 (function () {
  const searchDataURL = '{{ $searchData.Permalink }}';

-  const inputElement = document.getElementById('search-input');
-  const resultsElement = document.getElementById('search-results');
+  const inputElements = document.querySelectorAll('.search-input');
+  for (const el of inputElements) {
+    el.addEventListener('focus', init);
+    el.addEventListener('keyup', search);
+    el.addEventListener('keydown', handleKeyDown);
+  }

-  inputElement.addEventListener('focus', init);
-  inputElement.addEventListener('keyup', search);
-  inputElement.addEventListener('keydown', handleKeyDown);
+  // Get the search wrapper, input, and results elements.
+  function getActiveSearchElement() {
+    const inputs = Array.from(document.querySelectorAll('.search-wrapper')).filter(el => el.clientHeight > 0);
+    if (inputs.length === 1) {
+      return {
+        wrapper: inputs[0],
+        inputElement: inputs[0].querySelector('.search-input'),
+        resultsElement: inputs[0].querySelector('.search-results')
+      };
+    }
+    return undefined;
+  }

  const INPUTS = ['input', 'select', 'button', 'textarea']

  // Focus the search input when pressing ctrl+k/cmd+k or /.
  document.addEventListener('keydown', function (e) {
+    const { inputElement } = getActiveSearchElement();
+    if (!inputElement) return;
+
    const activeElement = document.activeElement;
    const tagName = activeElement && activeElement.tagName;
    if (
@ -42,18 +58,36 @@
    }
  });

+  // Dismiss the search results when clicking outside the search box.
+  document.addEventListener('mousedown', function (e) {
+    const { inputElement, resultsElement } = getActiveSearchElement();
+    if (!inputElement || !resultsElement) return;
+    if (
+      e.target !== inputElement &&
+      e.target !== resultsElement &&
+      !resultsElement.contains(e.target)
+    ) {
+      hideSearchResults();
+    }
+  });
+
  // Get the currently active result and its index.
  function getActiveResult() {
+    const { resultsElement } = getActiveSearchElement();
+    if (!resultsElement) return { result: undefined, index: -1 };
+
    const result = resultsElement.querySelector('.active');
-    if (result) {
-      const index = parseInt(result.getAttribute('data-index'));
-      return { result, index };
-    }
-    return { result: undefined, index: -1 };
+    if (!result) return { result: undefined, index: -1 };
+
+    const index = parseInt(result.getAttribute('data-index'));
+    return { result, index };
  }

  // Set the active result by index.
  function setActiveResult(index) {
+    const { resultsElement } = getActiveSearchElement();
+    if (!resultsElement) return;
+
    const { result: activeResult } = getActiveResult();
    activeResult && activeResult.classList.remove('active');
    const result = resultsElement.querySelector(`[data-index="${index}"]`);
@ -65,22 +99,31 @@

  // Get the number of search results from the DOM.
  function getResultsLength() {
+    const { resultsElement } = getActiveSearchElement();
+    if (!resultsElement) return 0;
    return resultsElement.querySelectorAll('li').length;
  }

  // Finish the search by hiding the results and clearing the input.
  function finishSearch() {
+    const { inputElement } = getActiveSearchElement();
+    if (!inputElement) return;
    hideSearchResults();
    inputElement.value = '';
    inputElement.blur();
  }

  function hideSearchResults() {
+    const { resultsElement } = getActiveSearchElement();
+    if (!resultsElement) return;
    resultsElement.classList.add('hidden');
  }

  // Handle keyboard events.
  function handleKeyDown(e) {
+    const { inputElement } = getActiveSearchElement();
+    if (!inputElement) return;
+
    const resultsLength = getResultsLength();
    const { result: activeResult, index: activeIndex } = getActiveResult();

@ -108,9 +151,11 @@
  }

  // Initializes the search.
-  function init() {
-    inputElement.removeEventListener('focus', init);
-    preloadIndex().then(search);
+  function init(e) {
+    e.target.removeEventListener('focus', init);
+    if (!(window.pageIndex && window.sectionIndex)) {
+      preloadIndex();
+    }
  }

  // Preload the search index.
@ -182,13 +227,14 @@
    }
  }

-  function search() {
-    const query = inputElement.value;
-    if (!inputElement.value) {
+  function search(e) {
+    const query = e.target.value;
+    if (!e.target.value) {
      hideSearchResults();
      return;
    }

+    const { resultsElement } = getActiveSearchElement();
    while (resultsElement.firstChild) {
      resultsElement.removeChild(resultsElement.firstChild);
    }
@ -249,9 +295,10 @@
    displayResults(sortedResults, query);
  }

-
-
  function displayResults(results, query) {
+    const { resultsElement } = getActiveSearchElement();
+    if (!resultsElement) return;
+
    if (!results.length) {
      resultsElement.innerHTML = `<span class="no-result">No results found.</span>`;
      return;
--- a/assets/js/menu.js
+++ b/assets/js/menu.js
@ -0,0 +1,17 @@
+const menu = document.querySelector('.hamburger-menu');
+
+menu.addEventListener('click', (e) => {
+  e.preventDefault();
+  const sidebarContainer = document.querySelector('.sidebar-container');
+
+  // Toggle the hamburger menu
+  menu.querySelector('svg').classList.toggle('open');
+
+  // When the menu is open, we want to show the navigation sidebar
+  sidebarContainer.classList.toggle('max-md:[transform:translate3d(0,-100%,0)]');
+  sidebarContainer.classList.toggle('max-md:[transform:translate3d(0,0,0)]');
+
+  // When the menu is open, we want to prevent the body from scrolling
+  document.body.classList.toggle('overflow-hidden');
+  document.body.classList.toggle('md:overflow-auto');
+});
--- a/data/icons.yaml
+++ b/data/icons.yaml
@ -36,3 +36,4 @@ cards: <svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor"

 copy: <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="currentColor"><rect x="9" y="9" width="13" height="13" rx="2" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></rect><path d="M5 15H4C2.89543 15 2 14.1046 2 13V4C2 2.89543 2.89543 2 4 2H13C14.1046 2 15 2.89543 15 4V5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg>
 check: <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 15 15"><path fill="currentColor" fill-rule="evenodd" d="M11.467 3.727c.289.189.37.576.181.865l-4.25 6.5a.625.625 0 0 1-.944.12l-2.75-2.5a.625.625 0 0 1 .841-.925l2.208 2.007l3.849-5.886a.625.625 0 0 1 .865-.181Z" clip-rule="evenodd"/></svg>
+menu: <svg fill="none" width="24" height="24" viewBox="0 0 24 24" stroke="currentColor"><g><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16"></path></g><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 12h16"></path><g><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 18h16"></path></g></svg>
--- a/hugo.toml
+++ b/hugo.toml
@ -66,9 +66,18 @@ defaultContentLanguage = 'en'
  [[menu.main]]
    name = 'Search'
    weight = 35
-    params = { placeholder = 'Search documentation...' }
+    params = { type = 'search', placeholder = 'Search documentation...' }
  [[menu.main]]
    name = 'GitHub'
    url = 'https://github.com'
    weight = 40
    params = { icon = 'github' }
+
+  [[menu.sidebar]]
+    name = 'More'
+    params = { type = 'separator' }
+    weight = 10
+  [[menu.sidebar]]
+    name = 'Hugo Docs ↗'
+    url = 'https://gohugo.io/documentation/'
+    weight = 20
--- a/layouts/_default/_markup/render-link.html
+++ b/layouts/_default/_markup/render-link.html
@ -0,0 +1 @@
+<a href="{{ .Destination | safeURL }}" {{ with .Title }}title="{{ . }}"{{ end }}{{ if strings.HasPrefix .Destination "http" }}target="_blank" rel="noopener"{{ end }}>{{ .Text | safeHTML }}</a>
--- a/layouts/partials/navbar.html
+++ b/layouts/partials/navbar.html
@ -11,18 +11,30 @@

    {{- $currentPage := . -}}
    {{- range .Site.Menus.main -}}
-      {{- if eq .Name "Search" -}}
+      {{- if eq .Params.type "search" -}}
        {{ partial "search.html" (dict "params" .Params) }}
-      {{- else if .Params.icon -}}
-        <a class="p-2 text-current" target="_blank" rel="noreferer" href="{{ .URL }}">
-          {{ partial "utils/icon.html" (dict "name" .Params.icon "attributes" "height=24") }}
-          <span class="sr-only">{{ .Name }}</span>
-        </a>
-      {{ else }}
-        <a class="text-sm contrast-more:text-gray-700 contrast-more:dark:text-gray-100 relative -ml-2 hidden whitespace-nowrap p-2 md:inline-block text-gray-600 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-200" href="{{ .URL }}">
-          <span class="text-center">{{ .Name }}</span>
-        </a>
+      {{- else -}}
+        {{ $external := strings.HasPrefix .URL "http" }}
+        {{- if .Params.icon -}}
+          <a class="p-2 text-current" {{ if $external }}target="_blank" rel="noreferer"{{ end }} href="{{ .URL | safeURL }}">
+            {{ partial "utils/icon.html" (dict "name" .Params.icon "attributes" "height=24") }}
+            <span class="sr-only">{{ .Name }}</span>
+          </a>
+        {{- else -}}
+          <a
+            href="{{ .URL | safeURL }}"
+            {{ if $external }}target="_blank" rel="noreferer"{{ end }}
+            class="text-sm contrast-more:text-gray-700 contrast-more:dark:text-gray-100 relative -ml-2 hidden whitespace-nowrap p-2 md:inline-block text-gray-600 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-200"
+          >
+            <span class="text-center">{{ .Name }}</span>
+          </a>
+        {{- end -}}
      {{ end }}
    {{ end }}
+
+
+    <button type="button" aria-label="Menu" class="hamburger-menu -mr-2 rounded p-2 active:bg-gray-400/20 md:hidden">
+      {{ partial "utils/icon.html" (dict "name" "menu" "attributes" "height=24") }}
+    </button>
  </nav>
 </div>
--- a/layouts/partials/scripts.html
+++ b/layouts/partials/scripts.html
@ -4,6 +4,9 @@
 {{ $codeCopyJS := resources.Get "js/code-copy.js" }}
 <script src="{{ $codeCopyJS.RelPermalink }}"></script>

+{{ $menuJS := resources.Get "js/menu.js" }}
+<script src="{{ $menuJS.RelPermalink }}"></script>
+
 {{ if .Page.Store.Get "hasMermaid" }}
  <script type="module">
    // TODO: embed mermaid.min.js in the theme
@ -18,6 +21,7 @@
  <script src="{{ $tabsJS.RelPermalink }}"></script>
 {{ end }}

+
 <!-- TODO: use feature flag for search and embed flexsearch -->
 {{ $searchJSFile := printf "%s.search.js" .Language.Lang }}
 {{ $searchJS := resources.Get "js/flexsearch.js" | resources.ExecuteAsTemplate $searchJSFile . }}
--- a/layouts/partials/search.html
+++ b/layouts/partials/search.html
@ -1,14 +1,14 @@
 {{- $placeholder := .params.placeholder | default "Search..." -}}


-<div id="search-wrapper" class="search-wrapper relative md:w-64 hidden md:inline-block mx-min-w-[200px]">
+<div class="search-wrapper relative md:w-64">
  <div class="relative flex items-center text-gray-900 contrast-more:text-gray-800 dark:text-gray-300 contrast-more:dark:text-gray-300">
-    <input id="search-input" placeholder="{{ $placeholder }}" class="block w-full appearance-none rounded-lg px-3 py-2 transition-colors text-base leading-tight md:text-sm bg-black/[.05] dark:bg-gray-50/10 focus:bg-white dark:focus:bg-dark placeholder:text-gray-500 dark:placeholder:text-gray-400 contrast-more:border contrast-more:border-current" type="search" value="" spellcheck="false" />
+    <input placeholder="{{ $placeholder }}" class="search-input block w-full appearance-none rounded-lg px-3 py-2 transition-colors text-base leading-tight md:text-sm bg-black/[.05] dark:bg-gray-50/10 focus:bg-white dark:focus:bg-dark placeholder:text-gray-500 dark:placeholder:text-gray-400 contrast-more:border contrast-more:border-current" type="search" value="" spellcheck="false" />
    <kbd class="absolute my-1.5 select-none ltr:right-1.5 rtl:left-1.5 h-5 rounded bg-white px-1.5 font-mono text-[10px] font-medium text-gray-500 border dark:border-gray-100/20 dark:bg-dark/50 contrast-more:border-current contrast-more:text-current contrast-more:dark:border-current items-center gap-1 transition-opacity pointer-events-none hidden sm:flex"> <span class="text-xs">⌘</span>K </kbd>
  </div>

  <div>
-    <ul id="search-results" class="hidden border border-gray-200 bg-white text-gray-100 dark:border-neutral-800 dark:bg-neutral-900 absolute top-full z-20 mt-2 overflow-auto overscroll-contain rounded-xl py-2.5 shadow-xl max-h-[min(calc(50vh-11rem-env(safe-area-inset-bottom)),400px)] md:max-h-[min(calc(100vh-5rem-env(safe-area-inset-bottom)),400px)] inset-x-0 ltr:md:left-auto rtl:md:right-auto contrast-more:border contrast-more:border-gray-900 contrast-more:dark:border-gray-50 w-screen min-h-[100px] max-w-[min(calc(100vw-2rem),calc(100%+20rem))]"
+    <ul class="search-results hidden border border-gray-200 bg-white text-gray-100 dark:border-neutral-800 dark:bg-neutral-900 absolute top-full z-20 mt-2 overflow-auto overscroll-contain rounded-xl py-2.5 shadow-xl max-h-[min(calc(50vh-11rem-env(safe-area-inset-bottom)),400px)] md:max-h-[min(calc(100vh-5rem-env(safe-area-inset-bottom)),400px)] inset-x-0 ltr:md:left-auto rtl:md:right-auto contrast-more:border contrast-more:border-gray-900 contrast-more:dark:border-gray-50 w-screen min-h-[100px] max-w-[min(calc(100vw-2rem),calc(100%+20rem))]"
      style="transition: max-height 0.2s ease 0s;"
    ></ul>
  </div>
--- a/layouts/partials/sidebar.html
+++ b/layouts/partials/sidebar.html
@ -1,55 +1,142 @@
 <aside class="sidebar-container flex flex-col print:hidden md:top-16 md:shrink-0 md:w-64 md:sticky md:self-start max-md:[transform:translate3d(0,-100%,0)]">
-  <div class="overflow-y-auto overflow-x-hidden p-4 grow md:h-[calc(100vh-4rem-3.75rem)]">
+  <!-- Search bar on small screen -->
+  <div class="px-4 pt-4 md:hidden">
+    {{ partial "search.html" }}
+  </div>
+  <div class="overflow-y-auto overflow-x-hidden p-4 grow md:h-[calc(100vh-var(--navbar-height)-var(--menu-height))]">
+    <ul class="flex flex-col gap-1 md:hidden">
+      <!-- Navbar -->
+      {{- range .Site.Menus.main -}}
+        {{- if and .URL (ne .Params.type "search") -}}
+          <li>{{ template "sidebar-item-link" dict "active" false "title" .Name "link" .URL }}</li>
+        {{- end -}}
+      {{- end -}}
+      <div class="mt-4 border-t py-4 dark:border-neutral-800 contrast-more:border-neutral-400 dark:contrast-more:border-neutral-400" />
+
+      {{- $s := .FirstSection -}}
+      {{- $topLevelItems := union $s.RegularPages $s.Sections -}}
+      {{- $pageURL := .RelPermalink -}}
+
+      {{- range $topLevelItems.ByWeight -}}
+        {{ template "sidebar-item" (dict "item" . "pageURL" $pageURL) }}
+        {{ template "sidebar-tree" (dict "context" . "level" 1 "pageURL" $pageURL "toc" true) }}
+      {{ end }}
+
+
+      <!-- Sidebar footer -->
+      <div class="mt-4 border-t py-4 dark:border-neutral-800 contrast-more:border-neutral-400 dark:contrast-more:border-neutral-400" />
+      {{ template "sidebar-footer" }}
+    </ul>
+
+    <!-- Sidebar on large screen -->
    <ul class="flex flex-col gap-1 max-md:hidden">
      {{- $s := .FirstSection -}}
      {{- $topLevelItems := union $s.RegularPages $s.Sections -}}
-      {{- $currentUrl := .RelPermalink -}}
+      {{- $pageURL := .RelPermalink -}}

      {{- range $topLevelItems.ByWeight -}}
-        {{- $isCurrent := eq $currentUrl .RelPermalink -}}
-        {{- $title := .LinkTitle | default .File.BaseFileName -}}
-        <li class="open">
-          {{- if $isCurrent -}}
-            <a
-              class="flex cursor-pointer items-center justify-between gap-2 rounded bg-primary-100 px-2 py-1.5 text-sm font-semibold text-primary-800 transition-colors [-webkit-tap-highlight-color:transparent] [-webkit-touch-callout:none] [word-break:break-word] contrast-more:border contrast-more:border-primary-500 dark:bg-primary-400/10 dark:text-primary-600 contrast-more:dark:border-primary-500"
-              href="{{ .RelPermalink }}"
-            >
-              {{- $title -}}
-            </a>
-          {{ else }}
-            <a
-              class="flex cursor-pointer items-center justify-between gap-2 rounded px-2 py-1.5 text-sm text-gray-500 transition-colors [-webkit-tap-highlight-color:transparent] [-webkit-touch-callout:none] [word-break:break-word] hover:bg-gray-100 hover:text-gray-900 contrast-more:border contrast-more:border-transparent contrast-more:text-gray-900 contrast-more:hover:border-gray-900 dark:text-neutral-400 dark:hover:bg-primary-100/5 dark:hover:text-gray-50 contrast-more:dark:text-gray-50 contrast-more:dark:hover:border-gray-50"
-              href="{{ .RelPermalink }}"
-              >{{- $title -}}
-            </a>
-          {{- end -}}
-        </li>
-        {{ $secondLevelItems := union .RegularPages .Sections }}
-        {{ with $secondLevelItems }}
-          <div class="pt-1 ltr:pr-0">
-            <ul class='relative flex flex-col gap-1 before:absolute before:inset-y-1 before:w-px before:bg-gray-200 before:content-[""] ltr:ml-3 ltr:pl-3 ltr:before:left-0 rtl:mr-3 rtl:pr-3 rtl:before:right-0 dark:before:bg-neutral-800'>
-              {{ range $secondLevelItems.ByWeight }}
-                {{ $isCurrent := eq $currentUrl .RelPermalink }}
-                <li class="flex flex-col gap-1">
-                  <a
-                    class="flex cursor-pointer rounded px-2 py-1.5 text-sm transition-colors [-webkit-tap-highlight-color:transparent] [-webkit-touch-callout:none] [word-break:break-word]
-                  {{ if eq $currentUrl .RelPermalink }}
-                      bg-primary-100 font-semibold text-primary-800 contrast-more:border contrast-more:border-primary-500 dark:bg-primary-400/10 dark:text-primary-600 contrast-more:dark:border-primary-500
-                    {{ else }}
-                      text-gray-500 hover:bg-gray-100 hover:text-gray-900 contrast-more:border contrast-more:border-transparent contrast-more:text-gray-900 contrast-more:hover:border-gray-900 dark:text-neutral-400 dark:hover:bg-primary-100/5 dark:hover:text-gray-50 contrast-more:dark:text-gray-50 contrast-more:dark:hover:border-gray-50
-                    {{ end }}"
-                    href="{{ .RelPermalink }}"
-                  >
-                    {{ .LinkTitle | default .File.BaseFileName }}
-                  </a>
-                </li>
-              {{ end }}
-            </ul>
-          </div>
+        <!-- First level items and nested tree under  -->
+        {{ template "sidebar-item" (dict "item" . "pageURL" $pageURL) }}
+        {{ template "sidebar-tree" (dict "context" . "level" 1 "pageURL" $pageURL) }}
+      {{ end }}
+      <!-- Sidebar footer -->
+      {{ template "sidebar-footer" }}
+    </ul>
+  </div>
+  {{ template "theme-switch" }}
+</aside>
+
+{{- define "sidebar-footer" -}}
+  {{- range site.Menus.sidebar -}}
+    {{ if eq .Params.type "separator" }}
+      <li class="[word-break:break-word] mt-5 mb-2 px-2 py-1.5 text-sm font-semibold text-gray-900 first:mt-0 dark:text-gray-100">
+        <span class="cursor-default">{{ .Name }}</span>
+      </li>
+    {{ else }}
+      <li>{{ template "sidebar-item-link" dict "active" false "title" .Name "link" .URL }}</li>
+    {{ end }}
+  {{- end -}}
+{{- end -}}
+
+{{- define "sidebar-tree" -}}
+  {{ $pageURL := .pageURL }}
+  {{ $level := .level }}
+  {{ $toc := .toc | default false }}
+
+  {{ if ge $level 4 }}
+    {{ return }}
+  {{ end }}
+
+  {{ $items := union .context.RegularPages .context.Sections }}
+  {{ with $items }}
+    <div class="pt-1 ltr:pr-0">
+      <ul class='relative flex flex-col gap-1 before:absolute before:inset-y-1 before:w-px before:bg-gray-200 before:content-[""] ltr:ml-3 ltr:pl-3 ltr:before:left-0 rtl:mr-3 rtl:pr-3 rtl:before:right-0 dark:before:bg-neutral-800'>
+        {{ range $items.ByWeight }}
+          {{ $active := eq $pageURL .RelPermalink }}
+          {{ $title := .LinkTitle | default .File.BaseFileName }}
+          <li class="flex flex-col gap-1">
+            {{ template "sidebar-item-link" dict "active" $active "title" $title "link" .RelPermalink }}
+            {{ if and $toc $active }}
+              {{ template "sidebar-toc" dict "page" . }}
+            {{ end }}
+          </li>
+          {{ template "sidebar-tree" dict "context" . "pageURL" $pageURL "level" (add $level 1) }}
+        {{ end }}
+      </ul>
+    </div>
+  {{ end }}
+{{- end -}}
+
+{{- define "sidebar-toc" -}}
+  {{ $page := .page }}
+  {{ with $page.Fragments.Headings }}
+    <ul class='flex flex-col gap-1 relative before:absolute before:inset-y-1 before:w-px before:bg-gray-200 before:content-[""] dark:before:bg-neutral-800 ltr:pl-3 ltr:before:left-0 rtl:pr-3 rtl:before:right-0 ltr:ml-3 rtl:mr-3'>
+      {{ range . }}
+        {{ with .Headings }}
+          {{ range . }}
+            <li>
+              <a
+                href="#{{ anchorize .ID }}"
+                class="flex rounded px-2 py-1.5 text-sm transition-colors [word-break:break-word] cursor-pointer [-webkit-tap-highlight-color:transparent] [-webkit-touch-callout:none] contrast-more:border flex gap-2 before:opacity-25 before:content-['#'] text-gray-500 hover:bg-gray-100 hover:text-gray-900 dark:text-neutral-400 dark:hover:bg-primary-100/5 dark:hover:text-gray-50 contrast-more:text-gray-900 contrast-more:dark:text-gray-50 contrast-more:border-transparent contrast-more:hover:border-gray-900 contrast-more:dark:hover:border-gray-50"
+              >
+                {{- .Title -}}
+              </a>
+            </li>
+          {{ end }}
        {{ end }}
      {{ end }}
    </ul>
-  </div>
+  {{ end }}
+{{- end -}}
+
+{{- define "sidebar-item" }}
+  {{- $active := eq .pageURL .item.RelPermalink -}}
+  {{- $title := .item.LinkTitle | default .item.File.BaseFileName -}}
+  {{- $link := .item.RelPermalink -}}
+
+
+  <li class="open">
+    {{ template "sidebar-item-link" dict "active" $active "title" $title "link" $link }}
+  </li>
+{{- end -}}
+
+{{- define "sidebar-item-link" -}}
+  {{ $external := strings.HasPrefix .link "http" }}
+  <a
+    class="flex cursor-pointer rounded px-2 py-1.5 text-sm transition-colors [-webkit-tap-highlight-color:transparent] [-webkit-touch-callout:none] [word-break:break-word]
+    {{- if .active }}
+      bg-primary-100 font-semibold text-primary-800 contrast-more:border contrast-more:border-primary-500 dark:bg-primary-400/10 dark:text-primary-600 contrast-more:dark:border-primary-500
+    {{- else }}
+      text-gray-500 hover:bg-gray-100 hover:text-gray-900 contrast-more:border contrast-more:border-transparent contrast-more:text-gray-900 contrast-more:hover:border-gray-900 dark:text-neutral-400 dark:hover:bg-primary-100/5 dark:hover:text-gray-50 contrast-more:dark:text-gray-50 contrast-more:dark:hover:border-gray-50
+    {{- end -}}"
+    href="{{ .link }}"
+    {{ if $external }}target="_blank" rel="noreferer"{{ end }}
+  >
+    {{- .title -}}
+  </a>
+{{- end -}}
+
+{{- define "theme-switch" -}}
  <!-- theme switch button -->
  <div class="sticky bottom-0 bg-white dark:bg-dark mx-4 py-4 shadow-[0_-12px_16px_#fff] flex items-center gap-2 dark:border-neutral-800 dark:shadow-[0_-12px_16px_#111] contrast-more:border-neutral-400 contrast-more:shadow-none contrast-more:dark:shadow-none border-t" data-toggle-animation="show">
    <div class="grow flex flex-col">
@ -65,4 +152,4 @@
      </button>
    </div>
  </div>
-</aside>
+{{- end -}}
				`@ -0,0 +1 @@`
				`<a href="{{ .Destination \| safeURL }}" {{ with .Title }}title="{{ . }}"{{ end }}{{ if strings.HasPrefix .Destination "http" }}target="_blank" rel="noopener"{{ end }}>{{ .Text \| safeHTML }}</a>`