adding js to mobile menu

_includes/bundles.js

@@ -0,0 +1 @@
+<script src="{{ base.url | prepend: site.url }}/assets/main.js"></script>

_includes/head.html

@@ -14,6 +14,8 @@
 <meta property="og:type" content="website" />
 <meta name="twitter:card" content="summary" />
 <meta property="twitter:title" content="Jennifer Houde" />
+<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
+<script src="{{ '/assets/js/main.js' | relative_url }}"></script>
 <script type="application/ld+json">
 {"@context":"https://schema.org","@type":"WebSite","description":"Portfolio","headline":"Jennifer Houde","name":"Jennifer Houde","url":"http://localhost:4000/"}</script>
 <!-- End Jekyll SEO tag -->

_includes/navbar.html

@@ -1,15 +1,21 @@
 <div class="wrapper nav-wrapper">
     <a class="site-title" rel="author" href="/">Jennifer Houde.</a>
     <nav class="site-nav">
-        <input type="checkbox" id="nav-trigger" class="nav-trigger" />
+        <input type="checkbox" id="nav-trigger" class="nav-trigger" onclick="onMobileClick()"/>
         <label class="nav-trigger-label" for="nav-trigger" aria-label="menu">
         <span class="menu-icon">
             <svg viewBox="0 0 18 15" width="18px" height="15px">
             <path d="M18,1.484c0,0.82-0.665,1.484-1.484,1.484H1.484C0.665,2.969,0,2.304,0,1.484l0,0C0,0.665,0.665,0,1.484,0 h15.032C17.335,0,18,0.665,18,1.484L18,1.484z M18,7.516C18,8.335,17.335,9,16.516,9H1.484C0.665,9,0,8.335,0,7.516l0,0 c0-0.82,0.665-1.484,1.484-1.484h15.032C17.335,6.031,18,6.696,18,7.516L18,7.516z M18,13.516C18,14.335,17.335,15,16.516,15H1.484 C0.665,15,0,14.335,0,13.516l0,0c0-0.82,0.665-1.483,1.484-1.483h15.032C17.335,12.031,18,12.695,18,13.516L18,13.516z"/>
             </svg>
         </span>
+
         </label>
-
+        <button type="button" class="btn-close" onclick="onMobileClick()" aria-label="Close"></button>
+        <script type="text/javascript">
+            document.onload = function() {
+                console.log('test');
+              }
+            </script>
         <div class="trigger">
         <a class="page-link" href="/#mywork">My Work</a>
         <a class="page-link" href="/resume.html">My Resume</a>

_sass/base.scss

@@ -41,6 +41,9 @@ header {
         background-color: #F9EFE7;
         border: none;
     }
+    .nav-trigger-label.opened {
+        display: none !important;
+    }
     .hero-cta.row {
         padding: 0;
         h1 {
@@ -86,6 +89,14 @@ header {
 
         }
     }
+    .btn-close {
+        display: none;
+        margin: 5px;
+    }
+    .btn-close.opened {
+        display: block;
+    }
+
 }
 header.resume-wrapper {
     h1{

assets/js/main.js

@@ -0,0 +1,13 @@
+function onMobileClick(e) {
+    if($(".nav-trigger-label").hasClass('opened')){
+        $(".nav-trigger").trigger('click');
+        $(".nav-trigger-label").removeClass('opened');
+        $(".btn-close").removeClass('opened');
+
+    } else {
+        $(".nav-trigger-label").addClass('opened');
+        $(".btn-close").addClass('opened');
+    }
+
+
+}