HugoBlox-kit/modules/blox/layouts/_partials/components/sidebar.html

{{- $context := .context -}}

{{- $no_sidebar := ne .no_sidebar false -}}
{{- $pad_sidebar := true -}}
{{- $sidebar_dynamic_class := cond $no_sidebar (cond $pad_sidebar "lg:hidden xl:block" "lg:hidden") "lg:sticky" -}}

{{- $root_section := cond (eq site.Home.Type "docs") site.Home $context.FirstSection -}}
{{- $page_url := $context.RelPermalink -}}

{{/* Only replace explicit mobile menu links with automated links for Docs pages */}}
{{ if not $no_sidebar }}
  {{/* Classes appended to `hb-sidebar-mobile-menu` are modified via sidebar JS, so do not @apply them to `hb-sidebar-mobile-menu` */}}
  <div class="hb-sidebar-mobile-menu fixed inset-0 z-10 bg-white dark:bg-black/80 hidden"></div>
{{ end }}

<!-- Explicit `transform` class as we toggle it in JS -->
<aside class="hb-sidebar-container max-lg:[transform:translate3d(0,-100%,0)] {{ $sidebar_dynamic_class }}">
  <!-- Search bar on small screen -->
  <div class="px-4 pt-4 lg:hidden">
    <!-- Currently, use the navbar search button instead -->
    {{/* partial "search.html" */}}
  </div>
  <div class="hb-scrollbar lg:h-[calc(100vh-var(--navbar-height))]">
    <ul class="flex flex-col gap-1 lg:hidden">
      <!-- Navigation links -->
      {{ template "menu-links" (dict "context" site.Home "pageURL" $page_url "page" $context "toc" true) -}}
      {{ template "custom-menu-links" }}
    </ul>

    <!-- Sidebar on large screen -->
    {{- if $no_sidebar -}}
      <div class="max-xl:hidden h-0 w-64 shrink-0"></div>
    {{- else -}}
      <ul class="flex flex-col gap-1 max-lg:hidden">
        {{ template "menu-links" (dict "context" $root_section "page" $context  "pageURL" $page_url) }}
        {{ template "custom-menu-links" }}
      </ul>
    {{ end -}}
  </div>

</aside>

{{- define "menu-links" -}}
  {{ template "link-tree" (dict "context" .context "level" 0 "page" .page "pageURL" .pageURL "toc" (.toc | default false)) }}
{{- end -}}

{{- define "link-tree" -}}
  {{- if ge .level 4 -}}
    {{- return -}}
  {{- end -}}

  {{- $context := .context -}}
  {{- $page := .page }}
  {{- $page_url := .page.RelPermalink -}}
  {{- $level := .level -}}
  {{- $toc := .toc | default false -}}

  {{- with $items := union .context.RegularPages .context.Sections -}}
    {{- $items = where $items "Params.sidebar.hidden" "!=" true -}}
    {{- if eq $level 0 -}}
      {{- range $items.ByWeight }}
        {{- $active := eq $page_url .RelPermalink -}}
        {{- $is_expanded := or (.Params.sidebar.open) (.IsAncestor $page) $active | default false }}
        <li class="{{ if $is_expanded }}open{{ end }}">
          {{- template "custom-menu-link" dict "context" . "active" $active "title" .LinkTitle "link" .RelPermalink -}}
          {{- if and $toc $active -}}
            {{- template "mobile-toc" dict "page" . -}}
          {{- end -}}
          {{- template "link-tree" dict "context" . "page" $page "pageURL" $page_url "level" (add $level 1) "toc" $toc -}}
        </li>
      {{- end -}}
    {{- else -}}
      <div class="ltr:pr-0 overflow-hidden">
        <ul class="hb-sidebar-list">
          {{- range $items.ByWeight }}
            {{- $active := eq $page_url .RelPermalink -}}
            {{- $is_expanded := or (.Params.sidebar.open) (.IsAncestor $page) $active | default false }}
            {{- $title := .LinkTitle | default .File.BaseFileName -}}
            <li class="flex flex-col {{ if $is_expanded }}open{{ end }}">
              {{- template "custom-menu-link" dict "context" . "active" $active "title" $title "link" .RelPermalink -}}
              {{- if and $toc $active -}}
                {{ template "mobile-toc" dict "page" . }}
              {{- end }}
              {{ template "link-tree" dict "context" . "page" $page "pageURL" $page_url "level" (add $level 1) "toc" $toc }}
            </li>
          {{- end -}}
        </ul>
      </div>
    {{- end -}}
  {{- end }}
{{- end -}}

{{- define "mobile-toc" -}}
  {{ $page := .page }}
  {{ with $page.Fragments.Headings }}
    <ul class="hb-sidebar-mobile-toc">
      {{- range . }}
        {{- with .Headings }}
          {{- range . -}}
            <li>
              <a
                href="#{{ anchorize .ID }}"
                class="hb-docs-link"
              >
                {{- .Title -}}
              </a>
            </li>
          {{ end -}}
        {{ end -}}
      {{ end -}}
    </ul>
  {{ end }}
{{- end -}}

{{- define "custom-menu-links" -}}
  {{- range site.Menus.sidebar -}}
    {{- $name := .Name -}}
    {{ 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 cursor-default">
        <span>{{ $name }}</span>
      </li>
    {{ else }}
      <li>{{ template "custom-menu-link" dict "active" false "title" $name "link" (.URL | relLangURL) }}</li>
    {{ end }}
  {{- end -}}
{{- end -}}

{{- define "custom-menu-link" -}}
  {{- $is_external := strings.HasPrefix .link "http" -}}
  {{- $open := .open | default false -}}
  <a
    class="hb-sidebar-custom-link
    {{- if .active }}
      sidebar-active-item bg-primary-100 font-semibold text-primary-800 dark:bg-primary-300 dark:text-primary-900
    {{- else }}
      text-gray-500 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-300 dark:hover:bg-primary-800 dark:hover:text-gray-50
    {{- end -}}"
    href="{{ .link }}"
    {{ if $is_external }}target="_blank" rel="noreferer"{{ end }}
  >
    {{- .title -}}
    {{- with .context }}
      {{- if or .RegularPages .Sections }}
        <span data-hb-sidebar-toggle>
            <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-[18px] min-w-[18px] rounded-sm p-0.5 hover:bg-gray-800/5 dark:hover:bg-gray-100/5"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" class="origin-center transition-transform rtl:-rotate-180"></path></svg>
        </span>
      {{- end }}
    {{ end -}}
  </a>
{{- end -}}