2023-09-09 18:20:39 +01:00
|
|
|
{% if config.extra.header_nav %}
|
|
|
|
<nav class="navBar">
|
|
|
|
{% for nav_item in config.extra.header_nav %}
|
|
|
|
{% set current_nav_item = nav_item[lang] %}
|
|
|
|
{% if current_nav_item and current_nav_item.name %}
|
2023-09-29 04:22:02 +01:00
|
|
|
<a href="{{ get_url(path=current_nav_item.url) }}" {% if current_nav_item.new_tab %}target="_blank"
|
|
|
|
rel="noreferrer noopener" {% endif %}>{{ current_nav_item.name }}</a>
|
2023-09-09 18:20:39 +01:00
|
|
|
{% endif %}
|
|
|
|
{% endfor %}
|
|
|
|
<div class="themeSwitch">
|
2023-09-29 04:22:02 +01:00
|
|
|
{% if not config.extra.default_mode %}
|
|
|
|
<button class="themeButton light" onclick="setTheme('light')" title="Light mode"><svg
|
|
|
|
class="icons icons__background">
|
|
|
|
<use href="{{ get_url(path='icons.svg#lightMode', trailing_slash=false) | safe }}"></use>
|
|
|
|
</svg></button>
|
|
|
|
<button class="themeButton dark" onclick="setTheme('dark')" title="Dark mode"><svg class="icons icons__background">
|
|
|
|
<use href="{{ get_url(path='icons.svg#darkMode', trailing_slash=false) | safe }}"></use>
|
|
|
|
</svg></button>
|
|
|
|
{% elif config.extra.default_mode and config.extra.default_mode == "light" %}
|
|
|
|
<button class="themeButton light" onclick="setTheme('light')" title="Light mode"><svg
|
|
|
|
class="icons icons__background">
|
|
|
|
<use href="{{ get_url(path='icons.svg#lightMode', trailing_slash=false) | safe }}"></use>
|
|
|
|
</svg></button>
|
|
|
|
<button class="themeButton dark" onclick="setTheme('dark')" title="Dark mode"><svg class="icons icons__background">
|
|
|
|
<use href="{{ get_url(path='icons.svg#darkMode', trailing_slash=false) | safe }}"></use>
|
|
|
|
</svg></button>
|
|
|
|
{% elif config.extra.default_mode and config.extra.default_mode == "dark" %}
|
|
|
|
<button class="themeButton dark" onclick="setTheme('dark')" title="Dark mode"><svg class="icons icons__background">
|
|
|
|
<use href="{{ get_url(path='icons.svg#darkMode', trailing_slash=false) | safe }}"></use>
|
|
|
|
</svg></button>
|
|
|
|
<button class="themeButton light" onclick="setTheme('light')" title="Light mode"><svg
|
|
|
|
class="icons icons__background">
|
|
|
|
<use href="{{ get_url(path='icons.svg#lightMode', trailing_slash=false) | safe }}"></use>
|
|
|
|
</svg></button>
|
|
|
|
{% endif %}
|
2023-09-09 18:20:39 +01:00
|
|
|
</div>
|
|
|
|
</nav>
|
|
|
|
{% endif %}
|
|
|
|
<script>
|
|
|
|
const setTheme = (theme) => {
|
2023-09-29 04:22:02 +01:00
|
|
|
document.documentElement.className = theme;
|
|
|
|
localStorage.setItem('theme', theme);
|
2023-09-09 18:20:39 +01:00
|
|
|
}
|
|
|
|
const getTheme = () => {
|
2023-09-29 04:22:02 +01:00
|
|
|
const theme = localStorage.getItem('theme');
|
|
|
|
theme && setTheme(theme);
|
2023-09-09 18:20:39 +01:00
|
|
|
}
|
|
|
|
getTheme()
|
2023-09-29 04:22:02 +01:00
|
|
|
{% if config.extra.default_mode %}
|
|
|
|
setTheme("{{ config.extra.default_mode }}")
|
|
|
|
{% endif %}
|
2023-09-09 18:20:39 +01:00
|
|
|
</script>
|