Updated GraphAcademy links, fixes nav bug when resizing in and out of mobile view (#76)

Author: adam-cowley

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;

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)
 })()

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>