From e22bb9c0c6cfa918a5ddbb8d607235951a61d91b Mon Sep 17 00:00:00 2001
From: MDLeom <43627182+curbengh@users.noreply.github.com>
Date: Sun, 12 Apr 2020 09:48:55 +0100
Subject: [PATCH] feat: hide mobile menu when click outside

---
 layout/_partial/header.ejs |  2 +-
 source/js/typing.js        | 17 ++++++++++++++++-
 2 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/layout/_partial/header.ejs b/layout/_partial/header.ejs
index 0f64b3d..33e7229 100644
--- a/layout/_partial/header.ejs
+++ b/layout/_partial/header.ejs
@@ -2,7 +2,7 @@
   <nav class="mobile-nav">
     <h1 class="nickname"><%= theme.nickname %></h1>
     <ul class="mobile-nav-menu">
-      <label for="mobile-menu-toggle"><a>&#9776; Menu</a></label>
+      <label for="mobile-menu-toggle"><a id="menu-button">&#9776; Menu</a></label>
       <input type="checkbox" id="mobile-menu-toggle"/>
       <ul class="mobile-nav-link">
         <% for (var i in theme.menu){ %>
diff --git a/source/js/typing.js b/source/js/typing.js
index 0ec2e1f..4fa788c 100644
--- a/source/js/typing.js
+++ b/source/js/typing.js
@@ -59,6 +59,21 @@
 			  });
 			  $('#DonateText,#donateBox,#github').removeClass('blur');
 		  },600);
-    });
+		});
+
+		// Hide mobile menu when click outside of the menu
+		$(document).click(function(event) {
+			const mainNavDisplay = $('.main-nav').css('display');
+			const mobileNav = $('.mobile-nav-link');
+			const menuBtn = $('#menu-button');
+			const mobileToggle = $('#mobile-menu-toggle');
+			const isClickedOutside = !$(event.target).is(mobileNav);
+
+			if (mainNavDisplay !== 'none' || $(event.target).is(menuBtn) || $(event.target).is(mobileToggle) || mobileToggle.prop('checked') === false) return;
+
+			if (isClickedOutside) {
+				mobileToggle.prop('checked', false);
+			}
+		});
   });
 })(jQuery)