opdavies/workshop-tailwind-css
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Task 5 - Refactor menu items using a loop

Browse source
This commit is contained in:
Oliver Davies 2021-02-17 23:30:58 +00:00
parent 97d4382dd3
commit b97482c642
4 changed files with 55 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

16
templates/includes/navbar.html.twig
View file

@ -7,11 +7,17 @@
</div>
<div>
<ul class="flex justify-end h-full">
<li><a class="block px-2 py-3 text-2xl uppercase duration-200 ease-out transition-color font-display text-blue-dark hover:bg-orange focus:bg-orange hover:text-gray-dark focus:text-gray-dark" href="#0">Conference</a></li>
<li><a class="block px-2 py-3 text-2xl uppercase duration-200 ease-out transition-color font-display text-blue-dark hover:bg-orange focus:bg-orange hover:text-gray-dark focus:text-gray-dark" href="#0">Sponsors</a></li>
<li><a class="block px-2 py-3 text-2xl uppercase duration-200 ease-out transition-color font-display text-blue-dark hover:bg-orange focus:bg-orange hover:text-gray-dark focus:text-gray-dark" href="#0">Community</a></li>
<li><a class="block px-2 py-3 text-2xl uppercase duration-200 ease-out transition-color font-display text-blue-dark hover:bg-orange focus:bg-orange hover:text-gray-dark focus:text-gray-dark" href="#0">FAQ</a></li>
<li><a class="block px-2 py-3 text-2xl text-white uppercase duration-200 ease-out transition-color font-display bg-blue hover:text-gray-dark focus:text-gray-dark" href="#0">Register</a></li>
{% for menu_item in menu_items.findAll() %}
{% set linkClasses = [
'block px-2 py-3 text-2xl uppercase duration-200 ease-out transition-color font-display text-blue-dark hover:bg-orange focus:bg-orange hover:text-gray-dark focus:text-gray-dark',
menu_item.is_active ? 'text-white bg-blue'
] %}
<li>
<a class="{{ linkClasses|join(' ')|trim }}" href="#0">
{{ menu_item.title }}
</a>
</li>
{% endfor %}
</ul>
</div>
</div>