34 lines
1.4 KiB
Twig
34 lines
1.4 KiB
Twig
<header class="p-3 bg-blue-100 lg:p-4">
|
|
<div class="flex justify-between mx-auto xl:max-w-[1020px]" x-data="{ isOpen: false }">
|
|
<a href="#0">
|
|
<img class="h-18 w-auto sm:h-24 lg:h-32" src="https://talkingdrupal.com/sites/default/files/talking_drupal_logo.png" alt="Home">
|
|
</a>
|
|
|
|
<div class="lg:flex lg:flex-col lg:justify-between lg:items-end">
|
|
<div class="flex justify-end lg:hidden">
|
|
<button type="button" @click="isOpen = !isOpen">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 border-[3px] rounded-md text-blue-200 border-blue-800 bg-white" viewBox="0 0 20 20" fill="currentColor">
|
|
<path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<section class="hidden md:mt-4 md:block">
|
|
<h2 class="sr-only">Search form</h2>
|
|
|
|
{% include "includes/search-form.html.twig" %}
|
|
</section>
|
|
|
|
<div class="lg:block" :class="isOpen ? 'block' : 'hidden'">
|
|
{% include "includes/main-menu.html.twig" with { main_menu } only %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<section class="mt-4 md:hidden">
|
|
<h2 class="sr-only">Search form</h2>
|
|
|
|
{% include "includes/search-form.html.twig" %}
|
|
</section>
|
|
</header>
|