Files
sukr/docs/templates/base.html
Timothy DeHerrera d50a8c3fbe feat(nav): add context-aware expansion for nested navigation
Children are only visible when user is viewing a page within that
section. Uses Tera's starting_with test to detect ancestor relationship.
2026-02-01 09:16:47 -07:00

59 lines
2.2 KiB
HTML

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
{% if page.description %}
<meta name="description" content="{{ page.description }}" />{% endif %}
<title>{{ title }} | {{ config.title }}</title>
<link rel="canonical" href="{{ base_url }}{{ page_path }}" />
<link rel="stylesheet" href="{{ prefix }}/style.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.21/dist/katex.min.css" crossorigin="anonymous"
media="print" onload="this.media='all'" />
<noscript>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.21/dist/katex.min.css"
crossorigin="anonymous" />
</noscript>
<link rel="icon" type="image/png" href="{{ prefix }}/logo.png" />
</head>
<body>
<aside class="sidebar">
<header>
<a href="{{ prefix }}/index.html" class="logo">
<img src="{{ prefix }}/logo.png" alt="" class="logo-img" />
sukr
</a>
<span class="tagline">suckless static sites</span>
<input type="checkbox" id="nav-toggle" class="nav-toggle" />
<label for="nav-toggle" class="hamburger" aria-label="Toggle navigation">
<span></span>
<span></span>
<span></span>
</label>
</header>
<nav>
{% for item in nav %}
{% set section_prefix = item.path | replace(from="index.html", to="") %}
{% set is_current_section = page_path is starting_with(section_prefix) %}
<a href="{{ prefix }}{{ item.path }}" {% if page_path==item.path %}class="active" {% endif %}>{{ item.label }}</a>
{% if config.nested_nav and item.children %}
<div class="nav-children{% if is_current_section %} expanded{% endif %}">
{% for child in item.children %}
<a href="{{ prefix }}{{ child.path }}" {% if page_path==child.path %}class="active" {% endif %}>{{ child.label
}}</a>
{% endfor %}
</div>
{% endif %}
{% endfor %}
</nav>
<footer class="sidebar-footer">
<a href="https://github.com/nrdxp/sukr">GitHub</a>
<span>© 2024 nrdxp — MIT</span>
</footer>
</aside>
<main>{% block content %}{% endblock content %}</main>
</body>
</html>