42 lines
1.9 KiB
Plaintext
42 lines
1.9 KiB
Plaintext
{%- extends "base" -%}
|
|
{%- block nav -%}
|
|
<!-- Top nav bar -->
|
|
<nav class="nav-bar">
|
|
<a class="nav-item" href="{% if back %}{{ back }}{% endif %}" title="Back">
|
|
<img class="icon-medium nav-icon-left icon-active" src="/icons/back.svg" alt="Back">
|
|
</a>
|
|
<h1 class="nav-title">{{ title }}</h1>
|
|
<a class="nav-item" id="logoutButton" href="/logout" title="Logout">
|
|
<img class="icon-medium nav-icon-right icon-active" src="/icons/enter.svg" alt="Enter">
|
|
</a>
|
|
</nav>
|
|
<!-- Main content container -->
|
|
<main>
|
|
{%- block card -%}{%- endblock card %}
|
|
</main>
|
|
<!-- Bottom nav bar -->
|
|
<nav class="nav-bar">
|
|
<a class="nav-item" href="https://scuttlebutt.nz/">
|
|
<img class="icon-medium nav-icon-left" title="Scuttlebutt Website" src="/icons/hermies_hex{% if theme and theme == "dark" %}_light{% endif %}.svg" alt="Secure Scuttlebutt">
|
|
</a>
|
|
<a class="nav-item" href="/">
|
|
<img class="icon nav-icon-left" src="/icons/peach-icon.png" alt="PeachCloud" title="Home">
|
|
</a>
|
|
{# only render a theme-switcher icon if the `theme` variable has been set #}
|
|
{% if theme and theme == "light" %}
|
|
<a class="nav-item" href="/theme?theme=dark">
|
|
<img class="icon-medium nav-icon-right icon-active" title="Toggle theme" src="/icons/moon.png" alt="Moon">
|
|
</a>
|
|
{% elif theme and theme == "dark" %}
|
|
<a class="nav-item" href="/theme?theme=light">
|
|
<img class="icon-medium nav-icon-right icon-active" title="Toggle theme" src="/icons/sun.png" alt="Sun">
|
|
</a>
|
|
{% else %}
|
|
{# render hidden element to maintain correctly alignment of other bottom nav icons #}
|
|
<a class="nav-item" style="visibility: hidden;" href="/theme?theme=light">
|
|
<img class="icon-medium nav-icon-right icon-active" title="Toggle theme" src="/icons/sun.png" alt="Sun">
|
|
</a>
|
|
{% endif %}
|
|
</nav>
|
|
{%- endblock nav -%}
|