Files
blog/templates/partials/nav.html
daudix 7ebea6c1b2 Initial navbar menus implementation (fixes #56 and #62)
I'm aware that the styles are very messy, I'm going to rewrite the whole
_nav.scss to be more DRY later.
2024-08-25 23:56:17 +03:00

133 lines
5.5 KiB
HTML

{%- set rel_attributes = macros_rel_attributes::rel_attributes() | trim -%}
<header id="site-nav">
<nav>
<a href="#main" id="main-content" tabindex="0">
{{ macros_translate::translate(key="skip_to_content", default="Skip to main content", language_strings=language_strings) }}
</a>
<ul>
<li id="home">
<a href="{{ get_url(path='/', lang=lang) }}"
{%- if current_url | default(value="/") | trim_end_matches(pat="/") | safe == get_url(path="/", lang=lang) | trim_end_matches(pat='/') | safe -%}
class="active"
{%- endif -%}>
<i class="icon"></i>
{{- config.title -}}
</a>
</li>
{%- for link in config.extra.nav.links %}
{%- if link.sublinks and link.sublinks | length > 0 -%}
<li>
<details>
<summary>
<i class="icon arrow"></i>
{{- macros_translate::translate(key=link.name, default=link.name, language_strings=language_strings) -}}
</summary>
<ul>
{%- for sublink in link.sublinks -%}
{%- if sublink.url is matching('https?://') %}
<li>
<a href="{{ sublink.url }}" rel="{{ rel_attributes }}"
{%- if current_url | default(value='/') | trim_end_matches(pat='/') | safe == sublink.url | trim_end_matches(pat='/') | safe -%}
class="active"
{%- endif -%}>
{{- macros_translate::translate(key=sublink.name, default=sublink.name, language_strings=language_strings) -}}
</a>
</li>
{%- else %}
<li>
<a href="{{ get_url(path=sublink.url, lang=lang)}}"
{%- if current_url | default(value='/') | trim_end_matches(pat='/') | safe == get_url(path=sublink.url, lang=lang) | trim_end_matches(pat='/') | safe -%}
class="active"
{%- endif -%}>
{{- macros_translate::translate(key=sublink.name, default=sublink.name, language_strings=language_strings) -}}
</a>
</li>
{%- endif %}
{%- endfor -%}
</ul>
</details>
</li>
{%- elif link.url is matching('https?://') %}
<li>
<a href="{{ link.url }}" rel="{{ rel_attributes }}"
{%- if current_url | default(value='/') | trim_end_matches(pat='/') | safe == link.url | trim_end_matches(pat='/') | safe -%}
class="active"
{%- endif -%}>
{{- macros_translate::translate(key=link.name, default=link.name, language_strings=language_strings) -}}
</a>
</li>
{%- else %}
<li>
<a href="{{ get_url(path=link.url, lang=lang)}}"
{%- if current_url | default(value='/') | trim_end_matches(pat='/') | safe == get_url(path=link.url, lang=lang) | trim_end_matches(pat='/') | safe -%}
class="active"
{%- endif -%}>
{{- macros_translate::translate(key=link.name, default=link.name, language_strings=language_strings) -}}
</a>
</li>
{%- endif %}
{%- endfor -%}
{%- if config.build_search_index %}
<li id="search" class="circle">
<button onclick="toggleSearch()" title="{{ macros_translate::translate(key='search', default='Search', language_strings=language_strings) }}">
<i class="icon"></i>
</button>
</li>
{%- endif %}
{%- if config.languages | length > 0 %}
{%- include "partials/language_switcher.html" %}
{%- endif -%}
{%- if config.extra.nav.show_theme_switcher %}
<li id="theme-switcher" class="circle">
<details>
<summary title="{{ macros_translate::translate(key='theme', default='Theme', language_strings=language_strings) }}">
<i class="icon"></i>
</summary>
<ul>
<li>
<button id="theme-light" onclick="switchTheme('light')" title="{{ macros_translate::translate(key='theme_light', default='Switch to light theme', language_strings=language_strings) }}">
<i class="icon"></i>
</button>
</li>
<li>
<button id="theme-dark" onclick="switchTheme('dark')" title="{{ macros_translate::translate(key='theme_dark', default='Switch to dark theme', language_strings=language_strings) }}">
<i class="icon"></i>
</button>
</li>
<li>
<button id="theme-system" onclick="switchTheme('system')" title="{{ macros_translate::translate(key='theme_system', default='Use system theme', language_strings=language_strings) }}">
<i class="icon"></i>
</button>
</li>
</ul>
</details>
</li>
{%- endif %}
{%- if config.generate_feeds and config.extra.nav.show_feed %}
<li id="feed" class="circle">
<a href="{{ get_url(path=config.feed_filenames[0], lang=lang) }}" title="{{ macros_translate::translate(key='feed', default='Feed', language_strings=language_strings) }}">
<i class="icon"></i>
</a>
</li>
{%- endif %}
{%- if config.extra.source_url and config.extra.nav.show_repo %}
<li id="repo" class="circle">
<a href="{{ config.extra.source_url }}" title="{{ macros_translate::translate(key='repo', default='Repository', language_strings=language_strings) }}">
<i class="icon"></i>
</a>
</li>
{%- endif %}
</ul>
</nav>
{%- if config.build_search_index %}
<div id="search-container">
<label for="search-bar" class="hidden">
{{- macros_translate::translate(key="search", default="Search", language_strings=language_strings) -}}
</label>
<input id="search-bar" placeholder="{{ macros_translate::translate(key='search_for', default='Search for', language_strings=language_strings) }}…" autocomplete="off" type="search" disabled>
<div id="search-results"></div>
</div>
{%- endif %}
</header>