Task 5 - Refactor menu items using a loop

config/packages/twig.yaml

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

src/Repository/MenuItemArrayRepository.php

@@ -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,
+            ],
+        ];
+    }
+}

src/Repository/MenuItemRepository.php

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

templates/includes/navbar.html.twig

@@ -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>
+                {% for menu_item in menu_items.findAll() %}
-                <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>
+                    {% set linkClasses = [
-                <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>
+                        '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',
-                <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>
+                        menu_item.is_active ? 'text-white bg-blue'
-                <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>
+                    ] %}
+                    <li>
+                        <a class="{{ linkClasses|join(' ')|trim }}" href="#0">
+                            {{ menu_item.title }}
+                        </a>
+                    </li>
+                {% endfor %}
             </ul>
         </div>
     </div>