142 lines
6.5 KiB
HTML
142 lines
6.5 KiB
HTML
{% macro header(current_section) %}
|
|
<header
|
|
class=" sticky top-0 z-50 w-full border-border/40 backdrop-blur bg-background">
|
|
<div class="container relative flex h-14 md:grid md:grid-cols-[240px_minmax(0,1fr)] xl:max-w-[80rem]">
|
|
<div class="mr-4 hidden sm:flex">
|
|
<a class="flex mr-4 items-center space-x-2" href="/">
|
|
<img src="/icon.svg" width="30px" />
|
|
</a>
|
|
<nav class="flex w-full bg-transparent items-center gap-4 text-sm">
|
|
{% if lang == config.default_language %}
|
|
{% set rootsectionpath = "_index.md" %}
|
|
{% else %}
|
|
{% set rootsectionpath = "_index." ~ lang ~ ".md" %}
|
|
{% endif %}
|
|
{% set mainsec = get_section(path=rootsectionpath) %}
|
|
{% if mainsec.extra.menu.main %}
|
|
{% for val in config.extra.menu.main %}
|
|
<a class="nav-link text-black dark:text-white {% if current_section == val.section %} active{% endif %}" href="{{ get_url(path=val.url, trailing_slash=true) | safe }}">{{
|
|
val.name
|
|
}}
|
|
</a>
|
|
{% endfor %}
|
|
{% elif config.extra.menu.main %}
|
|
{% for val in config.extra.menu.main %}
|
|
<a class="nav-link text-black {% if current_section == val.section %} active{% endif %}" href="{{ get_url(path=val.url, trailing_slash=true) | safe }}">{{
|
|
val.name
|
|
}}
|
|
</a>
|
|
{% endfor %}
|
|
{% else %}
|
|
|
|
{% endif %}
|
|
</nav>
|
|
</div>
|
|
|
|
<div class="flex items-center sm:hidden">
|
|
<button onclick="toggleMenu()"
|
|
class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 hover:text-accent-foreground h-9 py-2 mr-2 px-0 text-base hover:bg-transparent focus-visible:bg-transparent focus-visible:ring-0 focus-visible:ring-offset-0 md:hidden"
|
|
type="button" aria-haspopup="dialog" aria-expanded="false" aria-controls="radix-:R15u6ja:" data-state="closed">
|
|
<svg stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5">
|
|
<path d="M3 5H11" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
|
</path>
|
|
<path d="M3 12H16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
|
</path>
|
|
<path d="M3 19H21" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
|
</path>
|
|
</svg>
|
|
<span class="sr-only">Toggle Menu</span>
|
|
</button>
|
|
|
|
<div class="absolute mt-[106px] left-0 right-0">
|
|
<nav id="menu-toggle" class="flex hidden bg-background items-center gap-4 text-sm py-[15px] px-2 w-full">
|
|
<a class="flex items-center" href="/">
|
|
<img src="/icon.svg" width="30px" />
|
|
</a>
|
|
{% if lang == config.default_language %}
|
|
{% set rootsectionpath = "_index.md" %}
|
|
{% else %}
|
|
{% set rootsectionpath = "_index." ~ lang ~ ".md" %}
|
|
{% endif %}
|
|
{% set mainsec = get_section(path=rootsectionpath) %}
|
|
{% if mainsec.extra.menu.main %}
|
|
{% for val in config.extra.menu.main %}
|
|
<a class="nav-link text-black dark:text-white {% if current_section == val.section %} active{% endif %}" href="{{ get_url(path=val.url, trailing_slash=true) | safe }}">{{
|
|
val.name
|
|
}}
|
|
</a>
|
|
{% endfor %}
|
|
{% elif config.extra.menu.main %}
|
|
{% for val in config.extra.menu.main %}
|
|
<a class="nav-link text-black {% if current_section == val.section %} active{% endif %}" href="{{ get_url(path=val.url, trailing_slash=true) | safe }}">{{
|
|
val.name
|
|
}}
|
|
</a>
|
|
{% endfor %}
|
|
{% else %}
|
|
|
|
{% endif %}
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex flex-1 items-center justify-between space-x-2">
|
|
|
|
{% if config.build_search_index %}
|
|
<div class="flex-1 lg:flex lg:justify-end">
|
|
<form class="navbar-form flex-grow-1 order-7 order-md-3">
|
|
<input id="userinput"
|
|
class="placeholder-black dark:placeholder-white bg-transparent inline-flex items-center whitespace-nowrap transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 border border-input hover:bg-accent hover:text-accent-foreground px-4 py-2 relative h-8 w-full justify-start rounded-[0.5rem] bg-muted/50 text-sm font-normal shadow-none sm:pr-12 lg:max-w-64"
|
|
type="search" placeholder="Search docs..." aria-label="Search docs..." autocomplete="off">
|
|
|
|
<div id="suggestions" class="shadow rounded"></div>
|
|
</form>
|
|
</div>
|
|
{% endif %}
|
|
|
|
|
|
|
|
<nav class="flex items-center">
|
|
<button id="mode" class="btn btn-link order-2 order-md-4" type="button" aria-label="Toggle mode">
|
|
<span class="toggle-dark hidden"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"
|
|
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
|
|
class="feather feather-moon">
|
|
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
|
|
</svg></span>
|
|
<span class="toggle-light"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"
|
|
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
|
|
class="feather feather-sun">
|
|
<circle cx="12" cy="12" r="5"></circle>
|
|
<line x1="12" y1="1" x2="12" y2="3"></line>
|
|
<line x1="12" y1="21" x2="12" y2="23"></line>
|
|
<line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
|
|
<line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
|
|
<line x1="1" y1="12" x2="3" y2="12"></line>
|
|
<line x1="21" y1="12" x2="23" y2="12"></line>
|
|
<line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
|
|
<line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
|
|
</svg></span>
|
|
</button>
|
|
{% if config.extra.menu.social %}
|
|
{% for val in config.extra.menu.social %}
|
|
<div
|
|
class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 hover:bg-accent hover:text-accent-foreground py-2 h-8 w-8 px-0">
|
|
<a class="nav-link" href="{{ val.url | safe }}">{{ val.pre | safe }}<span class="sr-only">{{
|
|
val.name}}</span></a>
|
|
</div>
|
|
{% endfor %}
|
|
{% else %}
|
|
{% endif %}
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
<!-- JavaScript to toggle menu visibility -->
|
|
<script>
|
|
function toggleMenu() {
|
|
var menu = document.getElementById('menu-toggle');
|
|
menu.classList.toggle('hidden');
|
|
}
|
|
</script>
|
|
{% endmacro %}
|