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

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
Show stats Download patch file Download diff file Expand all files Collapse all files

2
config/packages/twig.yaml
View file

@ -1,2 +1,4 @@
twig:
default_path: '%kernel.project_dir%/templates'
globals:
menu_items: '@App\Repository\MenuItemRepository'

34
src/Repository/MenuItemArrayRepository.php Normal file
View file

@ -0,0 +1,34 @@
<?php
declare(strict_types=1);
namespace App\Repository;
final class MenuItemArrayRepository implements MenuItemRepository
{
public function findAll(): array
{
return [
[
'title' => 'Conference',
'is_active' => false,
],
[
'title' => 'Sponsors',
'is_active' => false,
],
[
'title' => 'Community',
'is_active' => false,
],
[
'title' => 'FAQ',
'is_active' => false,
],
[
'title' => 'Register',
'is_active' => true,
],
];
}
}

8
src/Repository/MenuItemRepository.php Normal file
View file

@ -0,0 +1,8 @@
<?php
namespace App\Repository;
interface MenuItemRepository
{
public function findAll(): array;
}

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>