juanatsap
53 lines
2.4 KiB
HTML
53 lines
2.4 KiB
HTML
<!-- Primary response: Desktop theme toggle -->
|
|
<div class="selector-group" id="desktop-theme-toggle">
|
|
<label class="selector-label">{{if eq .Lang "es"}}Vista{{else}}View{{end}}:</label>
|
|
<label class="icon-toggle">
|
|
<input type="checkbox"
|
|
id="themeToggle"
|
|
{{if .ThemeClean}}checked{{end}}
|
|
hx-post="/toggle/theme?lang={{.Lang}}"
|
|
hx-target="#desktop-theme-toggle"
|
|
hx-swap="outerHTML"
|
|
_="on htmx:afterRequest
|
|
if my.checked
|
|
add .theme-clean to the body
|
|
set localStorage['cv-theme'] to 'clean'
|
|
else
|
|
remove .theme-clean from the body
|
|
set localStorage['cv-theme'] to 'default'
|
|
end">
|
|
<span class="icon-toggle-slider">
|
|
<iconify-icon icon="mdi:page-layout-sidebar-left" width="16" height="16" class="icon-left"></iconify-icon>
|
|
<iconify-icon icon="mdi:page-layout-body" width="16" height="16" class="icon-right"></iconify-icon>
|
|
</span>
|
|
</label>
|
|
</div>
|
|
|
|
<!-- Out-of-band swap: Mobile theme toggle -->
|
|
<div class="menu-control-item" id="mobile-theme-toggle" hx-swap-oob="true">
|
|
<label class="menu-control-label">
|
|
<iconify-icon icon="mdi:page-layout-sidebar-left" width="20" height="20"></iconify-icon>
|
|
<span>{{if eq .Lang "es"}}Vista{{else}}View{{end}}</span>
|
|
</label>
|
|
<label class="icon-toggle">
|
|
<input type="checkbox"
|
|
id="themeToggleMenu"
|
|
{{if .ThemeClean}}checked{{end}}
|
|
hx-post="/toggle/theme?lang={{.Lang}}"
|
|
hx-target="#mobile-theme-toggle"
|
|
hx-swap="outerHTML"
|
|
_="on htmx:afterRequest
|
|
if my.checked
|
|
add .theme-clean to the body
|
|
set localStorage['cv-theme'] to 'clean'
|
|
else
|
|
remove .theme-clean from the body
|
|
set localStorage['cv-theme'] to 'default'
|
|
end">
|
|
<span class="icon-toggle-slider">
|
|
<iconify-icon icon="mdi:page-layout-sidebar-left" width="16" height="16" class="icon-left"></iconify-icon>
|
|
<iconify-icon icon="mdi:page-layout-body" width="16" height="16" class="icon-right"></iconify-icon>
|
|
</span>
|
|
</label>
|
|
</div>
|