You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
84 lines
3.7 KiB
84 lines
3.7 KiB
<aside
|
|
class="will-change-transform transform transition-transform -translate-x-full absolute top-0 left-0 md:relative md:translate-x-0 w-3/4 md:w-60 h-full min-h-screen p-3 bg-slate-50 dark:bg-slate-800 border-r border-slate-200 dark:border-slate-700 flex flex-col gap-2.5 z-20 sidebar">
|
|
<p class="font-bold mb-5 flex items-center gap-2">
|
|
<button
|
|
aria-label="Close sidebar"
|
|
class="md:hidden menu-trigger-close p-1 rounded text-slate-800 dark:text-slate-50 hover:bg-slate-200 dark:hover:bg-slate-700">
|
|
{{- partial "icon/closeIcon.html" . -}}
|
|
</button>
|
|
<a href="{{ .Site.BaseURL }}" class="px-2">
|
|
<span>{{ .Site.Title }}</span>
|
|
</a>
|
|
<button
|
|
aria-label="Toggle dark mode"
|
|
class="dark-mode-toggle p-2 rounded border dark:border-slate-700 hover:bg-slate-200 dark:hover:bg-slate-700">
|
|
{{- partial "icon/sunIcon.html" . -}}
|
|
</button>
|
|
</p>
|
|
|
|
{{ $permalink := cond (eq (len .RelPermalink) 1) .RelPermalink (strings.TrimRight "/" .RelPermalink) }}
|
|
<ul class="list-none flex flex-col gap-1">
|
|
{{ range .Site.Menus.main }}
|
|
<li>
|
|
<a class="px-2 py-1.5 rounded-md text-sm flex items-center justify-between {{ if eq .URL $permalink }} bg-slate-800 text-white dark:bg-slate-50 dark:text-slate-800 dark:selection:bg-slate-400 {{ else }} hover:bg-slate-200 dark:hover:bg-slate-700 {{ end }}"
|
|
href="{{ .URL }}" {{ if strings.HasPrefix .URL "http" }} target="_blank" rel="noopener" {{ end }}>
|
|
<span>{{ .Name }}</span>
|
|
{{ if strings.HasPrefix .URL "http" }}
|
|
<span>
|
|
{{- partial "icon/externalIcon.html" . -}}
|
|
</span>
|
|
{{ end }}
|
|
</a>
|
|
</li>
|
|
{{ end }}
|
|
</ul>
|
|
|
|
<div class="flex-1"></div>
|
|
|
|
{{ if .Site.Params.newsletter }}
|
|
{{- partial "newsletter-widget.html" . -}}
|
|
{{ end }}
|
|
|
|
<ul class="list-none flex flex-wrap justify-center gap-1 pt-2 border-t border-slate-200 dark:border-slate-600">
|
|
{{ range .Site.Menus.social }}
|
|
<li>
|
|
<a class="px-2 py-1.5 rounded-md text-sm block text-slate-800 dark:text-slate-50 {{ if eq (.URL|absURL) $permalink }} bg-slate-800 text-white dark: {{ else }} hover:bg-slate-200 dark:hover:bg-slate-700 {{ end }}"
|
|
href="{{ .URL }}" target="_blank" rel="me noopener noreferrer">
|
|
<span class="sr-only">{{ .Name }}</span>
|
|
{{ if eq .Name "GitHub" }}
|
|
<span>{{- partial "icon/githubIcon.html" . -}}</span>
|
|
{{ else if eq .Name "Keybase" }}
|
|
<span>{{- partial "icon/keybaseIcon.html" . -}}</span>
|
|
{{ else if eq .Name "Twitter" }}
|
|
<span>{{- partial "icon/twitterIcon.html" . -}}</span>
|
|
{{ else if eq .Name "LinkedIn" }}
|
|
<span>{{- partial "icon/linkedinIcon.html" . -}}</span>
|
|
{{ else if eq .Name "Instagram" }}
|
|
<span>{{- partial "icon/instagramIcon.html" . -}}</span>
|
|
{{ else if eq .Name "Dribbble" }}
|
|
<span>{{- partial "icon/dribbbleIcon.html" . -}}</span>
|
|
{{ else if eq .Name "Codepen" }}
|
|
<span>{{- partial "icon/codepenIcon.html" . -}}</span>
|
|
{{ else if eq .Name "Twitch" }}
|
|
<span>{{- partial "icon/twitchIcon.html" . -}}</span>
|
|
{{ else if eq .Name "Email" }}
|
|
<span>{{- partial "icon/emailIcon.html" . -}}</span>
|
|
{{ else if eq .Name "RSS" }}
|
|
<span>{{- partial "icon/rssfeedIcon.html" . -}}</span>
|
|
{{ end }}
|
|
</a>
|
|
</li>
|
|
{{ end }}
|
|
</ul>
|
|
</aside>
|
|
|
|
<div
|
|
class="fixed bg-slate-700 bg-opacity-5 transition duration-200 ease-in-out inset-0 z-10 pointer-events-auto md:hidden left-0 top-0 w-full h-full hidden menu-overlay">
|
|
</div>
|
|
|
|
<button
|
|
aria-label="Toggle Sidebar"
|
|
class="md:hidden absolute top-3 left-3 z-10 menu-trigger p-1 rounded text-slate-800 dark:text-slate-50 hover:bg-slate-100">
|
|
{{- partial "icon/menuIcon.html" . -}}
|
|
</button>
|