florida-drupalcamp-tailwindcss/templates/includes/navbar.html.twig

50 lines
29 KiB
Twig
Raw Normal View History

2020-12-26 22:40:42 +00:00
<div x-data="{ isOpen: false }">
<div class="h-16 px-3 w-full grid grid-cols-2 fixed z-20 bg-white">
<div>
<a href="/">
2020-12-27 02:52:16 +00:00
<svg class="h-20 w-auto sm:h-28" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 299 116"><defs><path d="M29.013 40.24a6.117 6.117 0 01-.98-2.785c-.365-3.681 2.687-7.524 8.383-8.657.097-8.787 1.045-14.317 2.28-17.838l-.957.12c-6.388.813-13.178-1.1-22.174.043-8.343 1.059-11.878 8.464-11.259 14.704.516 5.209 3.905 9.643 9.858 8.888 5.997-.761 7.682-5.521 7.174-10.64-.08-.808-.203-1.61-.375-2.454l3.84-1.214c.176.887.351 1.774.44 2.671.65 6.555-1.817 12.734-10.813 13.875C5.652 38.068.735 32.418.076 25.773-.681 18.14 4.236 9.15 15.36 7.738c9.387-1.192 17.222 1.496 22.654.807a23.43 23.43 0 001.903-.332c1.312-2.304 2.684-3.114 3.618-3.46l1.721 1.827c-.614 1.351-1.516 2.466-3.105 3.304-.654 2.72-1.329 7.897-1.365 18.177a15.262 15.262 0 003-1.244c.66-2.675 1.412-4.408 1.412-4.408l2.515.954c-.057 1.643-.727 3.32-2.176 4.686-.009 2.138.06 5.494.421 9.13l-3.13.398c-.28-2.829-.025-5.59.356-7.956-.716.318-1.52.648-2.419.898-.509 20.16-7.7 25.755-14.391 26.605-7.084.9-10.457-2.946-10.867-7.077-.387-3.906 1.842-8.054 6.053-8.634l.535 4.07c-1.912.242-2.933 2.372-2.719 4.528.258 2.604 2.325 5.25 6.888 4.672 4.563-.579 9.537-4.12 10.1-23.287-2.829.768-4.968 2.267-4.692 5.051.062.629.26 1.286.552 2.02l-3.212 1.774zm29.183-8.792c.217-.027 1.078.228 1.101.452l.004.046c-1.851 7.509-3.516 11.13-6.341 11.489-2.608.33-3.914-2.186-4.376-6.856-.326-3.278-.231-7.655.13-12.883.839-11.518 3.073-16.94 5.593-17.26 2.26-.287 3.099 1.516 3.326 3.806.263 2.649-.29 5.948-.587 7.394-1.199 6.108-3.674 10.878-5.194 13.299-.026 1.957.018 3.725.16 5.162.299 3.009 1.044 3.869 2.043 3.742 1.391-.176 2.766-3.17 4.14-8.39zM55.17 9.373c-1.173.149-2.775 10.173-3.207 18.684 1.767-4.361 4.24-12.268 3.74-17.752-.063-.628-.315-.96-.533-.932zm18.558 20.74c-.732 2.821-2.5 4.955-4.51 5.984-1.153 3.465-3.178 5.677-5.96 6.03-2.998.381-4.622-2.686-5.027-6.772-.25-2.514-.052-5.404.554-8.163l1.605.205c.135-3.518 1.662-6.759 4.748-7.15 2.912-.37 4.776 2.894 5.176 6.936.218 2.2-.076 4.556-.445 6.603 1.076-.681 2.007-1.936 2.58-4.146.262-.034 1.253.205 1.28.473zm-8.461 6.53c-1.896-.486-3.248-2.133-4.07-4.211-.02.685.003 1.363.061 1.948.263 2.648 1.141 4.401 2.227 4.263a.932.932 0 00.344-.088c.547-.252 1.006-.948 1.438-1.912zm-2.455-7.007c.24 2.424 1.167 4.671 3.18 5.006.72-2.5 1.06-5.727.824-8.107-.2-2.02-.83-3.485-2.046-3.33-.088.01-.214.072-.3.083-1.233.429-1.942 3.473-1.658 6.348zm16.426 6.782c.956-.122 2.24-2.695 3.64-8.101.218-.027 1.249.16 1.276.429l.004.046c-1.405 5.36-2.41 10.763-5.973 11.214-2.042.26-2.958-.988-3.158-3.008-.29-2.92 1.393-6.36 1.166-8.65-.133-1.347-.627-2.33-1.198-3.213l-1.267 4.98s-1.239-.07-1.274-.428l-.004-.045c.568-2.255.91-4.572 1.131-6.782-.532-.933-1-2.1-1.156-3.672-.143-1.437-.017-3.271.448-5.695l3.357.575c.12 2.985-.014 5.184-.478 7.608 1.586 1.345 3.632 2.903 3.886 5.463.285 2.873-1.344 6.854-1.189 8.424.067.673.354.91.789.855zm8.412-18.571c-.827 7.197-1.57 12.566-1.205 16.247.13 1.302.63 1.466 1.02 1.416 1.13-.142 2.315-2.84 3.715-8.245.218-.028 1.249.16 1.275.429l.004.045c-1.405 5.36-2.409 10.763-5.973 11.215-2.347.298-3.35-1.848-3.658-4.946-.495-4.985.71-12.366 1.128-15.693l3.694-.468zm-3.658-4.493c-.16-1.615.778-3.69 2.69-3.932 1.434-.183 2.15.818 2.274 2.075.16 1.617-.782 3.646-2.695 3.889-1.39.177-2.149-.819-2.27-2.032zm17.394-12.3l3.433-.435c.205 3.838-.447 13.241-1.577 20.931-.35 4.91-.416 7.783-.269 9.265.094.943.26 1.285.563 1.246 1-.126 2.05-2.852 3.071-6.755.261-.033 1.253.205 1.28.475-1.938 7.52-4.105 10.978-6.104 11.232-1.39.176-2.302-1.027-2.61-4.124l-.048-.495c-.728 2.866-2.013 5.44-4.49 5.753-2.13.27-3.243-2.088-3.563-5.321-.628-6.331 1.749-16.09 5.877-16.613 1.608-.204 2.619.668 3.124 2.65l1.313-17.808zm-6.71 30.86c.139 1.39.493 2.3 1.1 2.223 2-.253 3.751-7.887 3.337-12.061-.165-1.662-.672-2.78-1.627-2.659-1.869.237-3.21 8.455-2.81 12.497zm15.343 4.282c-2.13.27-3.24-2.044-3.564-5.322-.628-6.33 1.793-16.095 5.921-16.619 1.608-.204 2.619.669 3.123 2.65l.23-2.575 3.084-.392c-.8 7.012-1.625 12.892-1.145 17.74.757 7.634 5.55 10.707 11.026 10.012 7.084-.899 11.557-8.15 10.747-1
2020-12-26 22:40:42 +00:00
</a>
</div>
<div class="max-h-16 flex items-center justify-end">
2020-12-26 23:12:05 +00:00
<button type="button" @click="isOpen = !isOpen" aria-label="Toggle menu">
2020-12-26 22:40:42 +00:00
<svg class="w-10 h-10 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/></svg>
</button>
</div>
</div>
<div class="w-full h-full fixed top-16 right-0 border-l-2 bg-white sm:max-w-sm" x-cloak x-show="isOpen">
2020-12-26 22:40:42 +00:00
<ul>
{% for item in menuLinks.findAll %}
2020-12-26 23:01:55 +00:00
<li x-data="{ isOpen: false }">
<a
class="flex items-center justify-between px-5 py-5 text-2xl font-display text-blue-700 uppercase"
href="#0"
{% if item.children %}
@click.prevent="isOpen = !isOpen"
{% endif %}
>
<span>{{ item.name }}</span>
{% if item.children %}
<span>
<svg class="w-8 h-8 fill-current text-gray-600" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
</span>
{% endif %}
</a>
2020-12-26 22:40:42 +00:00
{% if item.children %}
2020-12-26 23:01:55 +00:00
<ul class="bg-gray-100" x-cloak x-show="isOpen">
2020-12-26 22:40:42 +00:00
{% for item in item.children %}
<li>
2020-12-26 23:01:55 +00:00
<a class="flex items-center justify-between px-5 py-2 text-2xl font-display text-blue-700 uppercase" href="#0">
2020-12-26 22:40:42 +00:00
{{ item.name }}
</a>
</li>
{% endfor %}
</ul>
{% endif %}
</li>
{% endfor %}
</ul>
</div>
</div>