Allow appearance switcher to be placed in menus

This commit is contained in:
James Panther
2023-01-17 12:58:04 +11:00
parent 9b338b6b65
commit 28a187895f
12 changed files with 218 additions and 32 deletions
+1
View File
@@ -1,4 +1,5 @@
{{- partial "partials/functions/warnings.html" .Site -}}
{{- partial "partials/functions/init.html" . -}}
<!DOCTYPE html>
<html
lang="{{ with .Site.Params.isoCode | default (.Site.LanguageCode | default "en") }}
+24 -5
View File
@@ -1,4 +1,3 @@
{{ $searchCount := 0 }}
<footer class="py-10 print:hidden">
{{/* Footer menu */}}
{{ if .Site.Menus.footer }}
@@ -9,10 +8,10 @@
class="mb-1 group ltr:text-right rtl:text-left sm:mb-0 ltr:sm:mr-7 ltr:sm:last:mr-0 rtl:sm:ml-7 rtl:sm:last:ml-0"
>
{{ if eq .Params.action "search" }}
{{ $searchCount = add $searchCount 1 }}
{{ $.Scratch.Add "searchCount" 1 }}
{{ if $.Site.Params.enableSearch | default false }}
<button
id="search-button-f{{ $searchCount }}"
id="search-button-{{ $.Scratch.Get "searchCount" }}"
title="{{ .Title | default (i18n "search.open_button_title") }}"
>
{{ with .Params.icon }}
@@ -29,6 +28,26 @@
{{ end }}
</button>
{{ end }}
{{ else if eq .Params.action "appearance" }}
{{ $.Scratch.Add "switchCount" 1 }}
<button
id="appearance-switcher-{{ $.Scratch.Get "switchCount" }}"
type="button"
aria-label="appearance switcher"
>
<span
class="inline transition-colors group-dark:hover:text-primary-400 group-hover:text-primary-600 dark:hidden"
title="{{ i18n "footer.dark_appearance" }}"
>
{{ partial "icon.html" "moon" }}
</span>
<span
class="hidden transition-colors group-dark:hover:text-primary-400 group-hover:text-primary-600 dark:inline"
title="{{ i18n "footer.light_appearance" }}"
>
{{ partial "icon.html" "sun" }}
</span>
</button>
{{ else }}
<a
href="{{ .URL }}"
@@ -78,14 +97,14 @@
</p>
{{ end }}
</div>
{{/* Appearance switch */}}
{{/* Appearance switcher */}}
{{ if .Site.Params.footer.showAppearanceSwitcher | default false }}
<div
class="{{ if .Site.Params.footer.showScrollToTop | default true -}}
ltr:mr-14 rtl:ml-14
{{- end }} cursor-pointer text-sm text-neutral-700 hover:text-primary-600 dark:text-neutral dark:hover:text-primary-400"
>
<button id="appearance-switcher" type="button" aria-label="appearance switcher">
<button id="appearance-switcher-0" type="button" aria-label="appearance switcher">
<div
class="flex items-center justify-center w-12 h-12 dark:hidden"
title="{{ i18n "footer.dark_appearance" }}"
+2
View File
@@ -0,0 +1,2 @@
{{ $.Scratch.Set "searchCount" 0 }}
{{ $.Scratch.Set "switchCount" 0 }}
+40 -5
View File
@@ -1,4 +1,3 @@
{{ $searchCount := 0 }}
<header class="py-6 font-semibold text-neutral-900 dark:text-neutral print:hidden sm:py-10">
<nav class="flex items-start justify-between sm:items-center">
{{/* Site logo/title */}}
@@ -15,13 +14,13 @@
class="mb-1 group sm:mb-0 ltr:sm:mr-7 ltr:sm:last:mr-0 rtl:sm:ml-7 rtl:sm:last:ml-0"
>
{{ if eq .Params.action "search" }}
{{ $searchCount = add $searchCount 1 }}
{{ $.Scratch.Add "searchCount" 1 }}
{{ if $.Site.Params.enableSearch | default false }}
<button
id="search-button-m{{ $searchCount }}"
id="search-button-{{ $.Scratch.Get "searchCount" }}"
title="{{ .Title | default (i18n "search.open_button_title") }}"
>
{{ with .Params.icon }}
{{ with .Params.icon | default "search" }}
<span
class="transition-colors group-dark:hover:text-primary-400 group-hover:text-primary-600"
>
@@ -35,6 +34,42 @@
{{ end }}
</button>
{{ end }}
{{ else if eq .Params.action "appearance" }}
{{ $.Scratch.Add "switchCount" 1 }}
<button
id="appearance-switcher-{{ $.Scratch.Get "switchCount" }}"
type="button"
aria-label="appearance switcher"
>
<span
class="inline transition-colors group-dark:hover:text-primary-400 group-hover:text-primary-600 dark:hidden"
title="{{ i18n "footer.dark_appearance" }}"
>
{{ with .Params.icon | default "moon" }}
{{ partial "icon.html" . }}
{{ end }}
{{ if .Params.showName | default true }}
<span
class="decoration-primary-500 group-hover:underline group-hover:decoration-2 group-hover:underline-offset-2"
>{{ .Name | markdownify | emojify }}</span
>
{{ end }}
</span>
<span
class="hidden transition-colors group-dark:hover:text-primary-400 group-hover:text-primary-600 dark:inline"
title="{{ i18n "footer.light_appearance" }}"
>
{{ with .Params.icon | default "sun" }}
{{ partial "icon.html" . }}
{{ end }}
{{ if .Params.showName | default true }}
<span
class="decoration-primary-500 group-hover:underline group-hover:decoration-2 group-hover:underline-offset-2"
>{{ .Name | markdownify | emojify }}</span
>
{{ end }}
</span>
</button>
{{ else }}
<a
href="{{ .URL }}"
@@ -56,7 +91,7 @@
{{ end }}
</li>
{{ end }}
{{ if and ($.Site.Params.enableSearch | default false) (eq $searchCount 0) }}
{{ if and ($.Site.Params.enableSearch | default false) (eq ($.Scratch.Get "searchCount") 0) }}
<li
class="mb-1 group sm:mb-0 ltr:sm:mr-7 ltr:sm:last:mr-0 rtl:sm:ml-7 rtl:sm:last:ml-0"
>
+40 -5
View File
@@ -1,4 +1,3 @@
{{ $searchCount := 0 }}
<header class="py-6 font-semibold text-neutral-900 dark:text-neutral print:hidden sm:py-10">
<nav class="flex items-start justify-between sm:items-center">
{{/* Site logo/title */}}
@@ -29,13 +28,13 @@
{{ range .Site.Menus.main }}
<li class="mb-1 group">
{{ if eq .Params.action "search" }}
{{ $searchCount = add $searchCount 1 }}
{{ $.Scratch.Add "searchCount" 1 }}
{{ if $.Site.Params.enableSearch | default false }}
<button
id="search-button-m{{ $searchCount }}"
id="search-button-{{ $.Scratch.Get "searchCount" }}"
title="{{ .Title | default (i18n "search.open_button_title") }}"
>
{{ with .Params.icon }}
{{ with .Params.icon | default "search" }}
<span
class="transition-colors group-dark:hover:text-primary-400 group-hover:text-primary-600"
>
@@ -49,6 +48,42 @@
{{ end }}
</button>
{{ end }}
{{ else if eq .Params.action "appearance" }}
{{ $.Scratch.Add "switchCount" 1 }}
<button
id="appearance-switcher-{{ $.Scratch.Get "switchCount" }}"
type="button"
aria-label="appearance switcher"
>
<span
class="inline transition-colors group-dark:hover:text-primary-400 group-hover:text-primary-600 dark:hidden"
title="{{ i18n "footer.dark_appearance" }}"
>
{{ with .Params.icon | default "moon" }}
{{ partial "icon.html" . }}
{{ end }}
{{ if .Params.showName | default true }}
<span
class="decoration-primary-500 group-hover:underline group-hover:decoration-2 group-hover:underline-offset-2"
>{{ .Name | markdownify | emojify }}</span
>
{{ end }}
</span>
<span
class="hidden transition-colors group-dark:hover:text-primary-400 group-hover:text-primary-600 dark:inline"
title="{{ i18n "footer.light_appearance" }}"
>
{{ with .Params.icon | default "sun" }}
{{ partial "icon.html" . }}
{{ end }}
{{ if .Params.showName | default true }}
<span
class="decoration-primary-500 group-hover:underline group-hover:decoration-2 group-hover:underline-offset-2"
>{{ .Name | markdownify | emojify }}</span
>
{{ end }}
</span>
</button>
{{ else }}
<a
href="{{ .URL }}"
@@ -70,7 +105,7 @@
{{ end }}
</li>
{{ end }}
{{ if and ($.Site.Params.enableSearch | default false) (eq $searchCount 0) }}
{{ if and ($.Site.Params.enableSearch | default false) (eq ($.Scratch.Get "searchCount") 0) }}
<li class="mb-1 group">
<button id="search-button-m0" title="{{ i18n "search.open_button_title" }}">
<span
+93 -8
View File
@@ -1,4 +1,3 @@
{{ $searchCount := 0 }}
<header class="py-6 font-semibold text-neutral-900 dark:text-neutral print:hidden sm:py-10">
<nav class="flex items-start justify-between sm:items-center">
{{/* Site logo/title */}}
@@ -29,13 +28,13 @@
{{ range .Site.Menus.main }}
<li class="mb-1 group">
{{ if eq .Params.action "search" }}
{{ $searchCount = add $searchCount 1 }}
{{ $.Scratch.Add "searchCount" 1 }}
{{ if $.Site.Params.enableSearch | default false }}
<button
id="search-button-m{{ $searchCount }}"
id="search-button-{{ $.Scratch.Get "searchCount" }}"
title="{{ .Title | default (i18n "search.open_button_title") }}"
>
{{ with .Params.icon }}
{{ with .Params.icon | default "search" }}
<span
class="transition-colors group-dark:hover:text-primary-400 group-hover:text-primary-600"
>
@@ -49,6 +48,42 @@
{{ end }}
</button>
{{ end }}
{{ else if eq .Params.action "appearance" }}
{{ $.Scratch.Add "switchCount" 1 }}
<button
id="appearance-switcher-{{ $.Scratch.Get "switchCount" }}"
type="button"
aria-label="appearance switcher"
>
<span
class="inline transition-colors group-dark:hover:text-primary-400 group-hover:text-primary-600 dark:hidden"
title="{{ i18n "footer.dark_appearance" }}"
>
{{ with .Params.icon | default "moon" }}
{{ partial "icon.html" . }}
{{ end }}
{{ if .Params.showName | default true }}
<span
class="decoration-primary-500 group-hover:underline group-hover:decoration-2 group-hover:underline-offset-2"
>{{ .Name | markdownify | emojify }}</span
>
{{ end }}
</span>
<span
class="hidden transition-colors group-dark:hover:text-primary-400 group-hover:text-primary-600 dark:inline"
title="{{ i18n "footer.light_appearance" }}"
>
{{ with .Params.icon | default "sun" }}
{{ partial "icon.html" . }}
{{ end }}
{{ if .Params.showName | default true }}
<span
class="decoration-primary-500 group-hover:underline group-hover:decoration-2 group-hover:underline-offset-2"
>{{ .Name | markdownify | emojify }}</span
>
{{ end }}
</span>
</button>
{{ else }}
<a
href="{{ .URL }}"
@@ -70,7 +105,7 @@
{{ end }}
</li>
{{ end }}
{{ if and ($.Site.Params.enableSearch | default false) (eq $searchCount 0) }}
{{ if and ($.Site.Params.enableSearch | default false) (eq ($.Scratch.Get "searchCount") 0) }}
<li class="mb-1 group">
<button id="search-button-m0" title="{{ i18n "search.open_button_title" }}">
<span
@@ -93,13 +128,13 @@
class="mb-1 group sm:mb-0 ltr:sm:mr-7 ltr:sm:last:mr-0 rtl:sm:ml-7 rtl:sm:last:ml-0"
>
{{ if eq .Params.action "search" }}
{{ $searchCount = add $searchCount 1 }}
{{ $.Scratch.Add "searchCount" 1 }}
{{ if $.Site.Params.enableSearch | default false }}
<button
id="search-button-m{{ $searchCount }}"
id="search-button-{{ $.Scratch.Get "searchCount" }}"
title="{{ .Title | default (i18n "search.open_button_title") }}"
>
{{ with .Params.icon }}
{{ with .Params.icon | default "search" }}
<span
class="transition-colors group-dark:hover:text-primary-400 group-hover:text-primary-600"
>
@@ -113,6 +148,42 @@
{{ end }}
</button>
{{ end }}
{{ else if eq .Params.action "appearance" }}
{{ $.Scratch.Add "switchCount" 1 }}
<button
id="appearance-switcher-{{ $.Scratch.Get "switchCount" }}"
type="button"
aria-label="appearance switcher"
>
<span
class="inline transition-colors group-dark:hover:text-primary-400 group-hover:text-primary-600 dark:hidden"
title="{{ i18n "footer.dark_appearance" }}"
>
{{ with .Params.icon | default "moon" }}
{{ partial "icon.html" . }}
{{ end }}
{{ if .Params.showName | default true }}
<span
class="decoration-primary-500 group-hover:underline group-hover:decoration-2 group-hover:underline-offset-2"
>{{ .Name | markdownify | emojify }}</span
>
{{ end }}
</span>
<span
class="hidden transition-colors group-dark:hover:text-primary-400 group-hover:text-primary-600 dark:inline"
title="{{ i18n "footer.light_appearance" }}"
>
{{ with .Params.icon | default "sun" }}
{{ partial "icon.html" . }}
{{ end }}
{{ if .Params.showName | default true }}
<span
class="decoration-primary-500 group-hover:underline group-hover:decoration-2 group-hover:underline-offset-2"
>{{ .Name | markdownify | emojify }}</span
>
{{ end }}
</span>
</button>
{{ else }}
<a
href="{{ .URL }}"
@@ -134,6 +205,20 @@
{{ end }}
</li>
{{ end }}
{{ if and ($.Site.Params.enableSearch | default false) (eq ($.Scratch.Get "searchCount") 0) }}
<li
class="mb-1 group sm:mb-0 ltr:sm:mr-7 ltr:sm:last:mr-0 rtl:sm:ml-7 rtl:sm:last:ml-0"
>
<button id="search-button-m1" title="{{ i18n "search.open_button_title" }}">
<span
class="transition-colors group-dark:hover:text-primary-400 group-hover:text-primary-600"
>
{{ partial "icon.html" "search" }}
</span>
</button>
</li>
{{ end }}
{{ end }}
</ul>
{{ end }}