Started working on the mobile menu view.

Author: myles

web/static/javascript/app.js

@@ -1,41 +1,83 @@
 /*jslint browser: true */
-/*global  $,ga */
+/*global  L,jQuery,ga */
 
-function trackOutboundLinkClicks(link) {
+function trackOutboundLinkClicks(link, event) {
     'use strict';
-    
+
     var href = link.attr('href'),
         noProtocol = href.replace(/http[s]?:\/\//, '');
-    
+
     ga('send', 'event', {
         eventCategory: 'Outbound Link',
         eventAction: 'click',
         eventLabel: noProtocol
     });
 }
 
-jQuery(document).ready(function () {
+function displayMap() {
     'use strict';
 
-    var query = 'a:not([href*="' + document.domain + '"])';
-
-    jQuery(query).mousedown(function (event) {
-        trackOutboundLinkClicks(jQuery(this));
-    });
-
-    var venue_map = L.map('js-venue-map', {
+    var venueMap = L.map('js-venue-map', {
         center: [43.65534, -79.38287],
         zoom: 14,
         scrollWheelZoom: false
     });
- L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
-        attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>',
+
+    L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
+        attribution: 'Map data &copy; <a href="http://openstreetmap.org"> OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>',
         maxZoom: 18,
         id: 'myles.163k2c22',
         accessToken: 'pk.eyJ1IjoibXlsZXMiLCJhIjoiY2lzM2p0YzN2MDVjdzJzbzBsc2c1NHZ1OSJ9.k7R24jfN4E8iNh7mlJoK7w'
-    }).addTo(venue_map);
+    }).addTo(venueMap);
 
     L.Icon.Default.imagePath = "/static/images/leaflet";
 
-    var marker = L.marker([43.65534, -79.38287]).addTo(venue_map);
+    var marker = L.marker([43.65534, -79.38287]).addTo(venueMap);
+}
+
+jQuery(window).resize(function() {
+    var nav = document.getElementById("js-navigation-menu");
+
+    if (jQuery(nav).length > 0) {
+        var windowWidth = jQuery(window).width();
+        var moreLeftSideToPageLeftSide = jQuery(nav).offset().left;
+        var moreLeftSideToPageRightSide = windowWidth - moreLeftSideToPageLeftSide;
+
+        if (moreLeftSideToPageRightSide < 330) {
+            jQuery("#js-navigation-menu").removeClass("navigation__list--fly-out-right");
+            jQuery("#js-navigation-menu").addClass("navigation__list--fly-out-left");
+        }
+        
+        if (moreLeftSideToPageRightSide > 330) {
+            jQuery("#js-navigation-menu").removeClass("navigation__list--fly-out-left");
+            jQuery("#js-navigation-menu").addClass("navigation__list--fly-out-right");
+        }
+    }
+});
+
+jQuery(document).ready(function () {
+    'use strict';
+
+    var navToggle = jQuery("#js-navigation-button").unbind()
+    jQuery("#js-navigation-menu").removeClass("show");
+
+    navToggle.on("click", function (e) {
+        e.preventDefault();
+
+        jQuery("#js-navigation-menu").slideToggle(function () {
+            if (jQuery("#js-navigation-menu").is(":hidden")) {
+                jQuery("#js-navigation-menu").removeAttr("style");
+            }
+        });
+    });
+
+    var query = 'a:not([href*="' + document.domain + '"])';
+
+    jQuery(query).mousedown(function (event) {
+        trackOutboundLinkClicks(jQuery(this), event);
+    });
+
+    if (jQuery('.js-venue-map')) {
+        displayMap();
+    }
 });

web/static/scss/components/_navigation.scss

@@ -3,7 +3,7 @@
     display: block;
 
     @include media(min-width $breakpoint-mobile) {
-      display: hidden;
+      display: none;
     }
   }
 

web/templates/includes/header.html

@@ -4,9 +4,9 @@
     </a>
 
     <nav class="navigation header__navigation">
-        <a href="#" class="navigation__menu header__navigation-menu">MENU</a>
+        <a href="#" class="navigation__menu header__navigation-menu" id="js-navigation-button">MENU</a>
 
-        <ul class="navigation__list header__navigation-list">
+        <ul class="navigation__list header__navigation-list" id="js-navigation-menu">
             <li class="navigation__item"><a class="navigation__link" href="{{ url_for('pages.index') }}">{{ _('Home') }}</a></li>
 
             <li class="navigation__item"><a class="navigation__link {% if request.url_rule.endpoint == 'pages.about' %}navigation__link--active{% endif %}" href="{{ url_for('pages.about') }}">{{ _('About') }}</a></li>