Change text colour for active item

app/config/sculpin_site.yml

@@ -9,9 +9,12 @@ papercall:
 main_menu:
     - title: Tickets
       url: '%eventbrite.url%'
+      pattern: ~
 
     - title: Submit a session
       url: '%papercall.url%'
+      pattern: ~
 
     - title: Sponsor us
       url: /sponsor-us
+      pattern: /^\/sponsor-us\/?/

source/_includes/banner.html.twig

@@ -11,7 +11,10 @@
             <ul class="tw-list-reset tw-flex tw-flex-wrap tw-justify-center tw--ml-8">
                 {% for item in site.main_menu %}
                     <li class="tw-mb-2 tw-mx-4 md:tw-m-0 md:tw-ml-8">
-                        <a class="tw-uppercase tw-text-black tw-no-underline hocus:tw-text-green-600" href="{{ item.url }}">
+                        <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>