forked from drowl87/hextra_mirror
69 lines
4.6 KiB
HTML
69 lines
4.6 KiB
HTML
<aside class="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)]">
|
|
<ul class="flex flex-col gap-1 max-md:hidden">
|
|
{{- $s := .FirstSection -}}
|
|
{{- $topLevelItems := union $s.RegularPages $s.Sections -}}
|
|
{{- $currentUrl := .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>
|
|
{{ end }}
|
|
{{ end }}
|
|
</ul>
|
|
</div>
|
|
<!-- 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">
|
|
<button title="Change theme" class="h-7 rounded-md px-2 text-left text-xs font-medium text-gray-600 transition-colors dark:text-gray-400 hover:bg-gray-100 hover:text-gray-900 dark:hover:bg-primary-100/5 dark:hover:text-gray-50" id="theme-toggle" type="button" aria-label="Toggle Dark Mode">
|
|
<div id="theme-toggle-light-icon" class="hidden flex items-center gap-2 capitalize">
|
|
{{- partial "utils/icon.html" (dict "context" . "name" "sun" "attributes" "height=12") -}}
|
|
<span>Light</span>
|
|
</div>
|
|
<div id="theme-toggle-dark-icon" class="hidden flex items-center gap-2 capitalize">
|
|
{{- partial "utils/icon.html" (dict "context" . "name" "moon" "attributes" "height=12") -}}
|
|
<span>Dark</span>
|
|
</div>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</aside>
|