Pull the updated nav into the non-vue version of the site

gulpfile.js

@@ -36,6 +36,7 @@ const vuePublic = "resources/assets/js/app-vue.js";
 // Javascript files for the public site
 const jsPublic = [
     "resources/assets/js/site-vars.js",
+    "resources/assets/js/nav.js",
     "resources/assets/js/contact.js",
     "resources/assets/js/subscription.js",
     "resources/assets/js/app.js"

resources/assets/js/app.js

@@ -1,5 +1,7 @@
 // run once the document is ready
 $(document).ready(function() {
+    navInit();
+
     switch (SiteVars.page) {
         case "":
             subscriptionFormInit();

resources/assets/js/nav.js

@@ -0,0 +1,6 @@
+// nav functionality
+function navInit() {
+    $(".nav-section-component-mobile-header-toggle").on("click", function() {
+        $(".nav-section-component-mobile-header-toggle, .nav-section-component-links").toggleClass("open");
+    });
+}

resources/views/sections/nav.blade.php

@@ -1,21 +1,21 @@
-<nav class="nav-section-component navbar navbar-default navbar-fixed-top">
-    <div class="container-fluid">
-        <div class="navbar-header">
-            <button type="button" id="navbar-toggle" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false" aria-controls="navbar">
-                <span class="sr-only">Toggle Navigation</span>
+<nav class="nav-section-component">
+    <div class="nav-section-component-mobile-header">
+        <button class="nav-section-component-mobile-header-toggle">
             <span class="icon-bar"></span>
             <span class="icon-bar"></span>
             <span class="icon-bar"></span>
+            <span class="sr-only">Toggle navigation</span>
         </button>
-
-            <a class="navbar-logo" href="/"></a>
     </div>
 
-        <div id="navbar-collapse" class="navbar-collapse collapse">
-            <ul class="nav navbar-nav navbar-right">
-                <li class="navlink"><a href="/" title="Home">Home</a></li>
-                <li class="navlink"><a href="/contact" title="Contact">Contact</a></li>
-            </ul>
+    <div class="nav-section-component-links" :class="{ open: openNav }">
+        <div class="nav-section-component-links-wrapper">
+            <a class="navlink" href="/"><span>Home</span></a>
+            <a class="navlink" href="/contact"><span>Contact</span></a>
         </div>
     </div>
+
+    <a class="nav-section-component-logo" href="/">
+        <img src="/img/logo.png" />
+    </a>
 </nav>