dragon_fire/www/templates/fragments/decoration/navbar.html

96 lines
3 KiB
HTML

<div class="navbar">
<menu class="_titles">
<li>
{{ page.basename }}
</li>
</menu>
<menu class="_path" id="main_navbar_path">
<ul class="_path_list" id="main_navbar_path_list">
{% set split_post = page.path |split('/') %}
{% for i in range(0, split_post|length - 1) %}
<li>
{% if i != 0 %}
<a href="{{split_post|slice(0,i+1)|join('/')}}">
> {{ split_post[i] }}
</a>
{% else %}
<a href="/">root</a>
{% endif %}
</li>
{% endfor %}
</ul>
<form class="_search_field"
action="/search"
method="GET"
style="margin-left: auto;">
{{ fa['magnifying-glass']|raw }}
<input class="_search_input"
type="text"
id="inline_search_query" name="query"
autocomplete="off"
hx-target="#inline_search_result_list"
hx-indicator="#inline_search_result_list"
hx-sync="this:replace"
hx-trigger="keypress changed delay:0.25s, input changed delay:0.25s"
hx-get="/ajax/fragments/search/inline.html">
</input>
<ul class="_search_list htmx-indicator"
id="inline_search_result_list"
tabindex="1">
Type to search...
</ul>
</form>
<li>
<label for="navbar-expander" class="expandable"> {{ fa['bars'] | raw }} </label>
<a rel="alternate" type="application/rss+xml" target="_blank"
style="padding-left: 0.3rem;" href="/feed/rss{{page.path}}">
{{ fa['rss']|raw }}
</a>
</li>
</menu>
<input id="navbar-expander" class="expandable" type="checkbox" hx-preserve>
<div class="_details expandable">
Full path:
<ul class="_full_path">
{% set split_post = page.path |split('/') %}
{% for i in range(0, split_post|length - 1) %}
<li>
{% if i != 0 %}
<a href="{{split_post|slice(0,i+1)|join('/')}}">
/ {{ split_post[i] }}
</a>
{% else %}
<a href="/">root</a>
{% endif %}
</li>
{% endfor %}
</ul>
Dev links:
<a hx-boost="false" href="/raw{{page.path}}">raw</a>
<a hx-boost="false" href="/api/posts{{page.path}}">api</a>
<h4>Folder browser: </h4>
<ul class="_folder_list">
<li>
<span>
{{ fa['turn-up'] | raw}}
</span>
<a href={{page.parent.path}}>..</a>
</li>
{{ include('fragments/directory/compact/listing.html') }}
</ul>
</div>
</div>