Use a loop

source/_includes/nav.html.twig

@@ -15,30 +15,52 @@
                 </div>
             </div>
 
-            <nav class="nav hidden sm:flex">
-                <a href="/" class="nav-item {{ page.url == '/.' ? 'nav-item--active' }}">
-                    About
-                </a>
+            {% set links = [
+                {
+                    title: 'About',
+                    href: '/',
+                    pattern: '^/.$'
+                },
+                {
+                    title: 'Experience',
+                    href: '/experience',
+                    pattern: '^/experience/?$'
+                },
+                {
+                    title: 'Talks',
+                    href: '/talks',
+                    pattern: '^/talks/?'
+                },
+                {
+                    title: 'Open Source',
+                    href: '/opensource',
+                    pattern: '^/opensource/?$'
+                },
+                {
+                    title: 'Blog',
+                    href: '/blog',
+                    pattern: '^/blog/?'
+                },
+                {
+                    title: 'Contact',
+                    href: '/contact',
+                    pattern: '^/contact/?'
+                }
+            ] %}
 
-                <a href="/experience" class="nav-item {{ page.url matches '#^/experience/?#' ? 'nav-item--active' }}">
-                    Experience
-                </a>
-
-                <a href="/talks" class="nav-item {{ page.url matches '#^/talks/?#' ? 'nav-item--active' }}">
-                    Talks
-                </a>
-
-                <a href="/opensource" class="nav-item {{ page.url matches '#^/opensource/?#' ? 'nav-item--active' }}">
-                    Open Source
-                </a>
-
-                <a href="/blog" class="nav-item {{ page.url matches '#^/blog/?#' ? 'nav-item--active' }}">
-                    Blog
-                </a>
-
-                <a href="/contact" class="nav-item {{ page.url matches '#^/contact/?#' ? 'nav-item--active' }}">
-                    Contact
-                </a>
+            <nav class="hidden w-full md:w-2/3 lg:w-3/4 sm:flex sm:flex-wrap sm:justify-end">
+                {% for link in links %}
+                    <a
+                        href="{{ link.href }}"
+                        class="
+                            flex items-center -mx-4 p-4 sm:border-b-3 sm:border-transparent sm:ml-4 sm:mr-0 sm:p-0
+                            {{ loop.first ? 'border-t border-grey-lighter sm:border-t-0 sm:border-transparent' }}
+                            {{ page.url matches '#' ~ link.pattern ~ '#' ? 'sm:bg-transparent sm:border-blue' }}
+                        "
+                    >
+                        {{ link.title }}
+                    </a>
+                {% endfor %}
             </nav>
         </div>
     </header>

source/_includes/scripts.html.twig

@@ -1,6 +1,6 @@
 <script>
     document.querySelector('.nav-toggle').onclick = function() {
-        document.querySelector('.navbar .nav').classList.toggle('hidden').toggle('block');
+        document.querySelector('.navbar nav').classList.toggle('hidden').toggle('block');
         return false;
     };
 </script>