Fix email layout menu link (#848)

pure-css · Apr 11, 2021 · a36ac17 · a36ac17
1 parent 503265c
commit a36ac17
Showing 1 changed file with 52 additions and 2 deletions.
diff --git a/site/static/layouts/email/index.html b/site/static/layouts/email/index.html
@@ -12,7 +12,7 @@
 
 <div id="layout" class="content pure-g">
     <div id="nav" class="pure-u">
-        <a href="#" class="nav-menu-button">Menu</a>
+        <a href="#" id="menuLink" class="nav-menu-button">Menu</a>
 
         <div class="nav-inner">
             <button class="primary-button pure-button">Compose</button>
@@ -171,6 +171,56 @@ <h1 class="email-content-title">Hello from Toronto</h1>
         </div>
     </div>
 </div>
-
+<!-- Script to make the Menu link work -->
+<!-- Just stripped down version of the js/ui.js script for the side-menu layout -->
+<script>
+    function getElements() {
+        return {
+            menu: document.getElementById('nav'),
+            menuLink: document.getElementById('menuLink')
+        };
+    }
+
+    function toggleClass(element, className) {
+        var classes = element.className.split(/\s+/);
+        var length = classes.length;
+        var i = 0;
+
+        for (; i < length; i++) {
+            if (classes[i] === className) {
+                classes.splice(i, 1);
+                break;
+            }
+        }
+        // The className is not found
+        if (length === classes.length) {
+            classes.push(className);
+        }
+
+        element.className = classes.join(' ');
+    }
+
+    function toggleMenu() {
+        var active = 'active';
+        var elements = getElements();
+
+        toggleClass(elements.menu, active);
+    }
+
+    function handleEvent(e) {
+        var elements = getElements();
+
+        if (e.target.id === elements.menuLink.id) {
+            toggleMenu();
+            e.preventDefault();
+        } else if (elements.menu.className.indexOf('active') !== -1) {
+            toggleMenu();
+        }
+    }
+
+    document.addEventListener('DOMContentLoaded', function () {
+        document.addEventListener('click', handleEvent);
+    });
+</script>
 </body>
 </html>