From 5fb86fae205953c9038d75e00b8c19ce2221fa12 Mon Sep 17 00:00:00 2001
From: Oliver Davies <opdavies@gmail.com>
Date: Thu, 1 Feb 2018 13:34:50 +0000
Subject: [PATCH] Move nav links out of config

---
 assets/less/components/nav.less    | 49 ++++++++++++++++++++++++++++++
 assets/less/main.less              |  1 +
 source/_includes/nav.html.twig     | 12 ++++----
 source/_includes/scripts.html.twig |  2 +-
 4 files changed, 57 insertions(+), 7 deletions(-)
 create mode 100644 assets/less/components/nav.less

diff --git a/assets/less/components/nav.less b/assets/less/components/nav.less
new file mode 100644
index 00000000..d70fc42a
--- /dev/null
+++ b/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;
+    }
+}
diff --git a/assets/less/main.less b/assets/less/main.less
index 53204099..54272ad5 100644
--- a/assets/less/main.less
+++ b/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';
diff --git a/source/_includes/nav.html.twig b/source/_includes/nav.html.twig
index 90fd70f7..aca3dcba 100644
--- a/source/_includes/nav.html.twig
+++ b/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">
-                {% for link in site.nav_links %}
-                    <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' }}">
-                        {{- link.title -}}
-                    </a>
-                {% endfor %}
+            <nav class="nav hidden sm:flex">
+                <a href="/" class="nav-item {{ page.url == '/.' ? 'nav-item--active' }}">About</a>
+                <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="/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>
         </div>
     </header>
diff --git a/source/_includes/scripts.html.twig b/source/_includes/scripts.html.twig
index 4ec7dcaf..2d34ffad 100644
--- a/source/_includes/scripts.html.twig
+++ b/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>