From 2416c96e05506ce4530b3ed270005bade0531259 Mon Sep 17 00:00:00 2001
From: adam-cowley <adam@adamcowley.co.uk>
Date: Tue, 11 Jan 2022 12:13:05 +0000
Subject: [PATCH] Updated GraphAcademy links, fixes nav bug when resizing in
 and out of mobile view (#76)

---
 src/css/nav.css                 |  7 +++++++
 src/js/01-nav.js                | 10 ++++++++++
 src/partials/header-content.hbs |  6 +++++-
 3 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/src/css/nav.css b/src/css/nav.css
index 3585d5e6..f5ccf746 100644
--- a/src/css/nav.css
+++ b/src/css/nav.css
@@ -62,6 +62,13 @@ html.is-clipped--nav {
   overflow-y: hidden;
 }
 
+@media screen and (max-width: 1023px) {
+  html.is-clipped--nav .toolbar {
+    position: fixed;
+    width: 100%;
+  }
+}
+
 .nav-panel-menu {
   overflow-y: scroll;
   display: flex;
diff --git a/src/js/01-nav.js b/src/js/01-nav.js
index 38d47aac..2c922f22 100644
--- a/src/js/01-nav.js
+++ b/src/js/01-nav.js
@@ -148,4 +148,14 @@
     if (!el) return
     return selector ? el[el.matches ? 'matches' : 'msMatchesSelector'](selector) && el : el
   }
+
+  // Remove clipped nav
+  function removeClippedNav () {
+    var html = document.querySelector('html')
+    if (window.innerWidth >= 1024 && html.classList.has('is-clipped--nav')) {
+      html.classList.remove('is-clipped--nav')
+    }
+  }
+
+  window.addEventListener('resize', removeClippedNav)
 })()
diff --git a/src/partials/header-content.hbs b/src/partials/header-content.hbs
index a8632654..624d78f9 100644
--- a/src/partials/header-content.hbs
+++ b/src/partials/header-content.hbs
@@ -131,7 +131,11 @@
               </ul>
             </div>
             <div class="navbar-item project">
-              <a class="project-name" href="/developer/graphacademy/">GraphAcademy</a>
+              <a class="project-name" href="https://graphacademy.neo4j.com/?ref=docs" target="_blank">GraphAcademy</a>
+              <ul class="project-links">
+                <li><a class="project-link" href="https://graphacademy.neo4j.com/?ref=docs">Self Paced Training</a></li>
+                <li><a class="project-link" href="https://graphacademy.neo4j.com/categories/certification/" target="_blank">Certification</a></li>
+              </ul>
             </div>
             <div class="navbar-item project">
               <a class="project-name" href="/graphgists/">GraphGists</a>