|
| 1 | +{{- $context := .context -}} |
| 2 | + |
| 3 | +{{- $disableSidebar := .disableSidebar | default false -}} |
| 4 | +{{- $displayPlaceholder := .displayPlaceholder | default false -}} |
| 5 | + |
| 6 | +{{- $sidebarClass := cond $disableSidebar (cond $displayPlaceholder "md:hx-hidden xl:hx-block" "md:hx-hidden") "md:hx-sticky" -}} |
| 7 | + |
| 8 | +{{- $navRoot := cond (eq site.Home.Type "docs") site.Home $context.FirstSection -}} |
| 9 | +{{- $pageURL := $context.RelPermalink -}} |
| 10 | + |
| 11 | +{{/* EXPERIMENTAL */}} |
| 12 | +{{- if .context.Params.sidebar.hide -}} |
| 13 | + {{- $disableSidebar = true -}} |
| 14 | + {{- $displayPlaceholder = true -}} |
| 15 | +{{- end -}} |
| 16 | + |
| 17 | + |
| 18 | +<div class="mobile-menu-overlay [transition:background-color_1.5s_ease] hx-fixed hx-inset-0 hx-z-10 hx-bg-black/80 dark:hx-bg-black/60 hx-hidden"></div> |
| 19 | +<aside class="sidebar-container hx-flex hx-flex-col print:hx-hidden md:hx-top-16 md:hx-shrink-0 md:hx-w-64 md:hx-self-start max-md:[transform:translate3d(0,-100%,0)] {{ $sidebarClass }}"> |
| 20 | + <!-- Search bar on small screen --> |
| 21 | + <div class="hx-px-4 hx-pt-4 md:hx-hidden"> |
| 22 | + {{ partial "search.html" }} |
| 23 | + </div> |
| 24 | + <div class="hextra-scrollbar hx-overflow-y-auto hx-overflow-x-hidden hx-p-4 hx-grow md:hx-h-[calc(100vh-var(--navbar-height)-var(--menu-height))]"> |
| 25 | + <ul class="hx-flex hx-flex-col hx-gap-1 md:hx-hidden"> |
| 26 | + <!-- Nav --> |
| 27 | + {{ template "sidebar-main" (dict "context" site.Home "pageURL" $pageURL "page" $context "toc" true) -}} |
| 28 | + {{ template "sidebar-footer" }} |
| 29 | + </ul> |
| 30 | + |
| 31 | + <!-- Sidebar on large screen --> |
| 32 | + {{- if $disableSidebar -}} |
| 33 | + {{- if $displayPlaceholder }}<div class="max-xl:hx-hidden hx-h-0 hx-w-64 hx-shrink-0"></div>{{ end -}} |
| 34 | + {{ .context.Scratch.Set "enableFooterSwitches" true }} |
| 35 | + {{- else -}} |
| 36 | + <ul class="hx-flex hx-flex-col hx-gap-1 max-md:hx-hidden"> |
| 37 | + {{ template "sidebar-main" (dict "context" $navRoot "page" $context "pageURL" $pageURL) }} |
| 38 | + {{ template "sidebar-footer" }} |
| 39 | + </ul> |
| 40 | + {{ end -}} |
| 41 | + </div> |
| 42 | + {{/* Hide theme switch when sidebar is disabled */}} |
| 43 | + {{ $switchesClass := cond $disableSidebar "md:hx-hidden" "" -}} |
| 44 | + {{ $displayThemeToggle := (site.Params.theme.displayToggle | default true) -}} |
| 45 | + |
| 46 | + {{ if or hugo.IsMultilingual $displayThemeToggle }} |
| 47 | + <div class="{{ $switchesClass }} {{ with hugo.IsMultilingual }}hx-justify-end{{ end }} hx-sticky hx-bottom-0 hx-bg-white dark:hx-bg-dark hx-mx-4 hx-py-4 hx-shadow-[0_-12px_16px_#fff] hx-flex hx-items-center hx-gap-2 dark:hx-border-neutral-800 dark:hx-shadow-[0_-12px_16px_#111] contrast-more:hx-border-neutral-400 contrast-more:hx-shadow-none contrast-more:dark:hx-shadow-none hx-border-t" data-toggle-animation="show"> |
| 48 | + {{- with hugo.IsMultilingual -}} |
| 49 | + {{- partial "language-switch" (dict "context" $context "grow" true) -}} |
| 50 | + {{- with $displayThemeToggle }}{{ partial "theme-toggle" (dict "hideLabel" true) }}{{ end -}} |
| 51 | + {{- else -}} |
| 52 | + {{- with $displayThemeToggle -}} |
| 53 | + <div class="hx-flex hx-grow hx-flex-col">{{ partial "theme-toggle" }}</div> |
| 54 | + {{- end -}} |
| 55 | + {{- end -}} |
| 56 | + </div> |
| 57 | + {{- end -}} |
| 58 | +</aside> |
| 59 | + |
| 60 | +{{- define "sidebar-main" -}} |
| 61 | + {{ template "sidebar-tree" (dict "context" .context "level" 0 "page" .page "pageURL" .pageURL "toc" (.toc | default false)) }} |
| 62 | +{{- end -}} |
| 63 | + |
| 64 | +{{- define "sidebar-tree" -}} |
| 65 | + {{- if ge .level 4 -}} |
| 66 | + {{- return -}} |
| 67 | + {{- end -}} |
| 68 | + |
| 69 | + {{- $context := .context -}} |
| 70 | + {{- $page := .page }} |
| 71 | + {{- $pageURL := .page.RelPermalink -}} |
| 72 | + {{- $level := .level -}} |
| 73 | + {{- $toc := .toc | default false -}} |
| 74 | + |
| 75 | + {{- with $items := union .context.RegularPages .context.Sections -}} |
| 76 | + {{- $items = where $items "Params.sidebar.exclude" "!=" true -}} |
| 77 | + {{- if eq $level 0 -}} |
| 78 | + {{- range $items.ByDate.Reverse }} |
| 79 | + {{- if .Params.sidebar.separator -}} |
| 80 | + <li class="[word-break:break-word] hx-mt-5 hx-mb-2 hx-px-2 hx-py-1.5 hx-text-sm hx-font-semibold hx-text-gray-900 first:hx-mt-0 dark:hx-text-gray-100"> |
| 81 | + <span class="hx-cursor-default">{{ partial "utils/title" . }}</span> |
| 82 | + </li> |
| 83 | + {{- else -}} |
| 84 | + {{- $active := eq $pageURL .RelPermalink -}} |
| 85 | + {{- $shouldOpen := or (.Params.sidebar.open) (.IsAncestor $page) $active | default true }} |
| 86 | + <li class="{{ if $shouldOpen }}open{{ end }}"> |
| 87 | + {{- $linkTitle := partial "utils/title" . -}} |
| 88 | + {{- template "sidebar-item-link" dict "context" . "active" $active "title" $linkTitle "link" .RelPermalink -}} |
| 89 | + {{- if and $toc $active -}} |
| 90 | + {{- template "sidebar-toc" dict "page" . -}} |
| 91 | + {{- end -}} |
| 92 | + {{- template "sidebar-tree" dict "context" . "page" $page "pageURL" $pageURL "level" (add $level 1) "toc" $toc -}} |
| 93 | + </li> |
| 94 | + {{- end -}} |
| 95 | + {{- end -}} |
| 96 | + {{- else -}} |
| 97 | + <div class="ltr:hx-pr-0 hx-overflow-hidden"> |
| 98 | + <ul class='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 before:hx-content-[""] 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'> |
| 99 | + {{- range $items.ByDate.Reverse }} |
| 100 | + {{- $active := eq $pageURL .RelPermalink -}} |
| 101 | + {{- $shouldOpen := or (.Params.sidebar.open) (.IsAncestor $page) $active | default true }} |
| 102 | + {{- $linkTitle := partial "utils/title" . -}} |
| 103 | + <li class="hx-flex hx-flex-col {{ if $shouldOpen }}open{{ end }}"> |
| 104 | + {{- template "sidebar-item-link" dict "context" . "active" $active "title" $linkTitle "link" .RelPermalink -}} |
| 105 | + {{- if and $toc $active -}} |
| 106 | + {{ template "sidebar-toc" dict "page" . }} |
| 107 | + {{- end }} |
| 108 | + {{ template "sidebar-tree" dict "context" . "page" $page "pageURL" $pageURL "level" (add $level 1) "toc" $toc }} |
| 109 | + </li> |
| 110 | + {{- end -}} |
| 111 | + </ul> |
| 112 | + </div> |
| 113 | + {{- end -}} |
| 114 | + {{- end }} |
| 115 | +{{- end -}} |
| 116 | + |
| 117 | +{{- define "sidebar-toc" -}} |
| 118 | + {{ $page := .page }} |
| 119 | + {{ with $page.Fragments.Headings }} |
| 120 | + <ul class='hx-flex hx-flex-col hx-gap-1 hx-relative before:hx-absolute before:hx-inset-y-1 before:hx-w-px before:hx-bg-gray-200 before:hx-content-[""] dark:before:hx-bg-neutral-800 ltr:hx-pl-3 ltr:before:hx-left-0 rtl:hx-pr-3 rtl:before:hx-right-0 ltr:hx-ml-3 rtl:hx-mr-3'> |
| 121 | + {{- range . }} |
| 122 | + {{- with .Headings }} |
| 123 | + {{- range . -}} |
| 124 | + <li> |
| 125 | + <a |
| 126 | + href="#{{ anchorize .ID }}" |
| 127 | + class="hx-flex hx-rounded hx-px-2 hx-py-1.5 hx-text-sm hx-transition-colors [word-break:break-word] hx-cursor-pointer [-webkit-tap-highlight-color:transparent] [-webkit-touch-callout:none] contrast-more:hx-border hx-gap-2 before:hx-opacity-25 before:hx-content-['#'] hx-text-gray-500 hover:hx-bg-gray-100 hover:hx-text-gray-900 dark:hx-text-neutral-400 dark:hover:hx-bg-primary-100/5 dark:hover:hx-text-gray-50 contrast-more:hx-text-gray-900 contrast-more:dark:hx-text-gray-50 contrast-more:hx-border-transparent contrast-more:hover:hx-border-gray-900 contrast-more:dark:hover:hx-border-gray-50" |
| 128 | + > |
| 129 | + {{- .Title -}} |
| 130 | + </a> |
| 131 | + </li> |
| 132 | + {{ end -}} |
| 133 | + {{ end -}} |
| 134 | + {{ end -}} |
| 135 | + </ul> |
| 136 | + {{ end }} |
| 137 | +{{- end -}} |
| 138 | + |
| 139 | +{{- define "sidebar-footer" -}} |
| 140 | + {{- range site.Menus.sidebar -}} |
| 141 | + {{- $name := or (T .Identifier) .Name -}} |
| 142 | + {{ if eq .Params.type "separator" }} |
| 143 | + <li class="[word-break:break-word] hx-mt-5 hx-mb-2 hx-px-2 hx-py-1.5 hx-text-sm hx-font-semibold hx-text-gray-900 first:hx-mt-0 dark:hx-text-gray-100"> |
| 144 | + <span class="hx-cursor-default">{{ $name }}</span> |
| 145 | + </li> |
| 146 | + {{ else }} |
| 147 | + <li>{{ template "sidebar-item-link" dict "active" false "title" $name "link" (.URL | relLangURL) }}</li> |
| 148 | + {{ end }} |
| 149 | + {{- end -}} |
| 150 | +{{- end -}} |
| 151 | + |
| 152 | +{{- define "sidebar-item-link" -}} |
| 153 | + {{- $external := strings.HasPrefix .link "http" -}} |
| 154 | + {{- $open := .open | default true -}} |
| 155 | + <a |
| 156 | + class="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 [-webkit-tap-highlight-color:transparent] [-webkit-touch-callout:none] [word-break:break-word] |
| 157 | + {{- if .active }} |
| 158 | + sidebar-active-item 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 |
| 159 | + {{- else }} |
| 160 | + 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 |
| 161 | + {{- end -}}" |
| 162 | + href="{{ .link }}" |
| 163 | + {{ if $external }}target="_blank" rel="noreferer"{{ end }} |
| 164 | + > |
| 165 | + {{- .title -}} |
| 166 | + {{- with .context }} |
| 167 | + {{- if or .RegularPages .Sections }} |
| 168 | + <span class="hextra-sidebar-collapsible-button"> |
| 169 | + {{- template "sidebar-collapsible-button" -}} |
| 170 | + </span> |
| 171 | + {{- end }} |
| 172 | + {{ end -}} |
| 173 | + </a> |
| 174 | +{{- end -}} |
| 175 | + |
| 176 | +{{- define "sidebar-collapsible-button" -}} |
| 177 | + <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" class="hx-h-[18px] hx-min-w-[18px] hx-rounded-sm hx-p-0.5 hover:hx-bg-gray-800/5 dark:hover:hx-bg-gray-100/5"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" class="hx-origin-center hx-transition-transform rtl:-hx-rotate-180"></path></svg> |
| 178 | +{{- end -}} |
0 commit comments