From 4da3a9d55f621d7395f30d8559a1cdf545ffa103 Mon Sep 17 00:00:00 2001
From: Devin Howard <devin@callysto.com>
Date: Mon, 28 Nov 2016 13:53:29 -0500
Subject: [PATCH] hide mobile menu if browser is resized to full size (#937)

---
 app/assets/stylesheets/mobile.scss.erb | 10 ++++++++++
 frontend/src/Metamaps/Mobile.js        |  2 +-
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/app/assets/stylesheets/mobile.scss.erb b/app/assets/stylesheets/mobile.scss.erb
index 64794153..01fa5f61 100644
--- a/app/assets/stylesheets/mobile.scss.erb
+++ b/app/assets/stylesheets/mobile.scss.erb
@@ -229,6 +229,16 @@
   list-style: none;
 }
 
+/*
+ * the mobile menu, even if it's been opened by a user, should
+ * not show up if they resize their browser back to full size
+ */
+@media only screen and (max-width : 504px) {
+  #mobile_menu.visible {
+    display: block;
+  }
+}
+
 li.mobileMenuUser {
   border-bottom: 1px solid #BBB;
 }
diff --git a/frontend/src/Metamaps/Mobile.js b/frontend/src/Metamaps/Mobile.js
index dc4088c0..99ccc5ee 100644
--- a/frontend/src/Metamaps/Mobile.js
+++ b/frontend/src/Metamaps/Mobile.js
@@ -22,7 +22,7 @@ const Mobile = {
     self.toggleMenu()
   },
   toggleMenu: function() {
-    $('#mobile_menu').toggle()
+    $('#mobile_menu').toggleClass('visible')
   },
   titleClick: function() {
     if (Active.Map) {