Move nav links out of config

assets/less/components/nav.less

@@ -0,0 +1,49 @@
+.nav {
+    @apply .w-full;
+}
+
+.nav-item {
+    @apply .flex;
+    @apply .items-center;
+    @apply .-mx-4;
+    @apply .p-4;
+}
+
+.nav-item:first-child {
+    @apply .border-t .border-grey-lighter;
+}
+
+@screen sm {
+    .nav {
+        @apply .flex-wrap .justify-end;
+    }
+
+    .nav-item {
+        @apply .border-b-3;
+        @apply .border-transparent;
+        @apply .ml-4;
+        @apply .mr-0;
+        @apply .p-0;
+    }
+
+    .nav-item:first-child {
+        @apply .border-t-0 .border-transparent;
+    }
+
+    .nav-item--active,
+    .nav-item--active.nav-item:first-child {
+        @apply .bg-transparent .border-blue;
+    }
+}
+
+@screen md {
+    .nav {
+       @apply .w-2/3; 
+    }
+}
+
+@screen lg {
+    .nav {
+        @apply .w-3/4;
+    }
+}

assets/less/main.less

@@ -63,6 +63,7 @@ svg {
 .table-collapse { border-collapse: collapse }
 
 @import 'components/listing';
+@import 'components/nav';
 @import 'components/post';
 @import 'components/post/about-author';
 @import 'components/post/code';

source/_includes/nav.html.twig

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

source/_includes/scripts.html.twig

@@ -2,7 +2,7 @@
 
 <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>