Move menu items from settings into partial

Better ability to set active and enabled values

app/config/sculpin_site.yml

@@ -12,22 +12,6 @@ eventbrite:
 papercall:
     url: https://www.papercall.io/drupalcamp-bristol-2019
 
-main_menu:
-    - title: Tickets
-      url: '%eventbrite.url%'
-      pattern: ~
-      enabled: '%tickets.available%'
-
-    - title: Submit a session
-      url: '%papercall.url%'
-      pattern: ~
-      enabled: '%cfp.open%'
-
-    - title: Sponsor us
-      url: /sponsor-us
-      pattern: /^\/sponsor-us\/?/
-      enabled: true
-
 tickets:
     available: true
     url: '%eventbrite.url%'

source/_includes/banner.html.twig

@@ -6,20 +6,6 @@
             </a>
         </div>
 
-        <nav role="navigation" aria-labelledby="block-dcb2017-main-menu-menu" id="block-dcb2017-main-menu" class="block block-menu navigation menu--main">
+        {% include 'nav' %}
-            <h2 class="visually-hidden" id="block-dcb2017-main-menu-menu">Main navigation</h2>
-            <ul class="tw-list-reset tw-flex tw-flex-wrap tw-justify-center tw--ml-8">
-                {% for item in site.main_menu if item.enabled == true %}
-                    <li class="tw-mb-2 tw-mx-4 md:tw-m-0 md:tw-ml-8">
-                        <a
-                            class="tw-uppercase tw-no-underline hocus:tw-text-green-600 {{ item.pattern and page.url matches item.pattern ? 'tw-text-green-600' : 'tw-text-black' }}"
-                            href="{{ item.url }}"
-                        >
-                            {{ item.title }}
-                        </a>
-                    </li>
-                {% endfor %}
-            </ul>
-        </nav>
     </div>
 </header>

source/_includes/nav.html.twig

@@ -0,0 +1,36 @@
+{% set links = [
+    {
+        title: 'Tickets',
+        href: site['tickets']['url'],
+        active: false,
+        enabled: site['tickets']['available'],
+    },
+    {
+        title: 'Submit a session',
+        href: site['cfp']['url'],
+        active: false,
+        enabled: site['cfp']['open'],
+    },
+    {
+        title: 'Sponsor us',
+        href: '/sponsor-us',
+        active: page.url == '/sponsor-us',
+        enabled: true,
+    }
+] %}
+
+<nav role="navigation" aria-labelledby="block-dcb2017-main-menu-menu" id="block-dcb2017-main-menu" class="block block-menu navigation menu--main">
+    <h2 class="visually-hidden" id="block-dcb2017-main-menu-menu">Main navigation</h2>
+    <ul class="tw-list-reset tw-flex tw-flex-wrap tw-justify-center tw--ml-8">
+        {% for link in links if link.enabled %}
+            <li class="tw-mb-2 tw-mx-4 md:tw-m-0 md:tw-ml-8">
+                <a
+                    class="tw-uppercase tw-no-underline hocus:tw-text-green-600 {{ link.active ? 'tw-text-green-600' : 'tw-text-black' }}"
+                    href="{{ link.href|raw }}"
+                >
+                    {{ link.title }}
+                </a>
+            </li>
+        {% endfor %}
+    </ul>
+</nav>