mirror of https://github.com/acid-info/vac.dev.git
41 lines
2.1 KiB
HTML
41 lines
2.1 KiB
HTML
<header class="sm:sticky sm:top-0 bg-white z-50">
|
|
<div class="container max-w-screen-xl sm:border-b">
|
|
<div class="nav-section flex justify-between items-center py-3 md:py-5 lg:py-10">
|
|
<div class="logo md:pr-8 l:p-0">
|
|
<a href="/"><img src="{{ '/assets/img/logo.png' | relative_url }}" alt="Vac logo" class="w-9 h-11" /></a>
|
|
</div>
|
|
<div class="flex justify-between items-center w-9/12">
|
|
<div class="burger block sm:hidden z-50">
|
|
<button class="burger__button burger__button--open fixed top-2 right-5 w-12 h-12" type="button" aria-label="Mobile menu button">
|
|
<img class="burger__icon" src="{{ '/assets/img/burger.svg' | relative_url }}" alt="Open menu button" />
|
|
</button>
|
|
<button class="burger__button burger__button--close hidden fixed top-2 right-5 w-12 h-12" type="button" aria-label="Close mobile menu button">
|
|
<img class="burger__icon burger__icon--close" src="{{ '/assets/img/close.svg' | relative_url }}" alt="Close menu button" />
|
|
</button>
|
|
</div>
|
|
|
|
<nav class="nav max-w-screen-xm md:max-w-screen-sl container">
|
|
<ul class="nav__list hidden sm:flex justify-between container text-xs font-semibold md:pr-8 l:p-0">
|
|
{% for nav in site.data.navigation %} {% include nav-item.html %} {% endfor %}
|
|
</ul>
|
|
</nav>
|
|
|
|
<ul class="social items-center hidden md:flex">
|
|
{% include social.html %}
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="overlay container max-w-screen-sm w-full hidden sm:hidden fixed top-0 right-0 h-screen bg-black bg-opacity-40 z-30">
|
|
<nav class="nav-mobile hidden fixed top-0 right-0 flex flex-col justify-between items-center pt-14 px-12 pb-5 bg-white w-9/12 h-3/4 z-40">
|
|
<ul class="nav__list flex flex-col flex-1 justify-between items-center container box-content w-32 h-auto max-h-nav text-xs font-normal">
|
|
{% for nav in site.data.navigation %} {% include nav-item.html %} {% endfor %}
|
|
</ul>
|
|
<ul class="social items-center flex mt-8">
|
|
{% include social.html %}
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|