Add active menu link styling

app/config/sculpin_site.yml

@@ -1,2 +1,16 @@
 name: Oliver Davies
 locale: en-GB
+
+menus:
+  main:
+    - title: About
+      href: /
+      is_active: '^//$'
+
+    - title: Blog
+      href: /blog
+      is_active: '^/blog/?'
+
+    - title: Talks
+      href: /talks
+      is_active: '^/talks/?'

source/_partials/navbar.html.twig

@@ -19,9 +19,10 @@
 
             <div>
                 <nav class="flex flex-col items-center mt-4 md:mt-0 md:flex-row md:space-x-4">
-                    <a class="text-black" href="/">About</a>
+                    {% for item in site.menus.main %}
-                    <a class="text-black" href="/blog">Blog</a>
+                        {% set is_active = page.url matches '#' ~ item.is_active ~ '#' %}
-                    <a class="text-black" href="/talks">Talks</a>
+                        <a class="text-black border-b-3 py-2 {{ is_active ? 'border-blue-700' : 'border-transparent' }}" href="{{ item.href }}">{{ item.title }}</a>
+                    {% endfor %}
                 </nav>
             </div>
         </div>