<header> {%- assign default_paths = site.pages | map: “path” -%} {%- assign page_paths = site.header_pages | default: default_paths -%} {%- assign titles_size = site.pages | map: 'title' | join: '' | size -%}
<div x-data="{ open: false }" class="relative bg-white"> <div class="max-w-screen-xl mx-auto"> <div class="relative z-20 bg-white lg:max-w-2xl lg:w-full"> <div class="relative pt-6 px-4 sm:px-6 lg:px-8"> <nav class="relative flex items-center justify-between sm:h-10 lg:justify-start"> <div class="flex items-center flex-grow flex-shrink-0 lg:flex-grow-0"> <div class="flex items-center justify-between w-full md:w-auto"> <a href="{{ "/" | relative_url }}" aria-label="Home"> <img class="h-8 w-auto sm:h-10" src="https://tailwindui.com/img/logos/workflow-mark-indigo-600.svg" alt="{{ site.title | escape }}"> </a> <div class="-mr-2 flex items-center md:hidden"> <button @click="open = true" type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out" id="main-menu" aria-label="Main menu" aria-haspopup="true" x-bind:aria-expanded="open"> <svg class="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"> </path> </svg> </button> </div> </div> </div> {%- if titles_size > 0 -%} <div class="hidden md:block md:ml-10 md:pr-4"> {%- for path in page_paths -%} {%- assign my_page = site.pages | where: "path", path | first -%} {%- if my_page.title -%} <a href="{{ my_page.url | relative_url }}" class="ml-8 font-medium text-gray-500 hover:text-gray-900 transition duration-150 ease-in-out">{{ my_page.title | escape }}</a> {%- endif -%} {%- endfor -%} </div> {%- endif -%} </nav> </div> <div x-show="open" x-description="Mobile menu, show/hide based on menu open state." x-transition:enter="duration-150 ease-out" x-transition:enter-start="opacity-0 scale-95" x-transition:enter-end="opacity-100 scale-100" x-transition:leave="duration-100 ease-in" x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-95" class="absolute top-0 inset-x-0 p-2 transition transform origin-top-right md:hidden" style="display: none;"> <div class="rounded-lg shadow-md"> <div class="rounded-lg bg-white shadow-xs overflow-hidden" role="menu" aria-orientation="vertical" aria-labelledby="main-menu"> <div class="px-5 pt-4 flex items-center justify-between"> <div> <img class="h-8 w-auto" src="https://tailwindui.com/img/logos/workflow-mark-on-white.svg" alt=""> </div> <div class="-mr-2"> <button @click="open = false" type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out" aria-label="Close menu"> <svg class="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"> </path> </svg> </button> </div> </div> {%- if titles_size > 0 -%} <div class="px-2 pt-2 pb-3"> {%- for path in page_paths -%} {%- assign my_page = site.pages | where: "path", path | first -%} {%- if my_page.title -%} <a href="{{ my_page.url | relative_url }}" class="mt-1 block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50 focus:outline-none focus:text-gray-900 focus:bg-gray-50 transition duration-150 ease-in-out" role="menuitem">{{ my_page.title | escape }}</a> {%- endif -%} {%- endfor -%} </div> {%- endif -%} </div> </div> </div> </div> </div> </div>
</header>