From 13e566815de9179b9a97c693f467e1b3127fe54a Mon Sep 17 00:00:00 2001
From: Eeshan Garg <eeshan@zulip.com>
Date: Fri, 16 Jul 2021 10:03:52 -0230
Subject: [PATCH] landing_page: Fix top navigation dropdowns for mobile
 screens.

A recent PR introduced a bug where navigation dropdowns on the
landing page would not open for tablet/mobile screens. This
commit fixes that issue by using the proper media query to
differentiate between touch and mouse-based devices.
---
 static/js/portico/header.js | 34 ++++++++++++++++------------------
 1 file changed, 16 insertions(+), 18 deletions(-)

diff --git a/static/js/portico/header.js b/static/js/portico/header.js
index ad5f99a83d..1e9bfe36d9 100644
--- a/static/js/portico/header.js
+++ b/static/js/portico/header.js
@@ -6,41 +6,39 @@ $(() => {
         return false;
     });
 
+    const is_touchscreen = window.matchMedia("(hover: none)").matches;
+
     $("body").on("click", (e) => {
         const $this = $(e.target);
+        const dropdown_is_shown = $this.closest("ul .dropdown").hasClass("show");
+        const dropdown_label_was_clicked = $this.closest(".dropdown .dropdown-label").length > 0;
+        const logged_in_pill_was_clicked = $this.closest(".dropdown .dropdown-pill").length > 0;
+        const clicked_outside_dropdown_content =
+            !$this.is(".dropdown ul") && $this.closest(".dropdown ul").length === 0;
 
-        if (
-            $this.closest(".dropdown .dropdown-label").length > 0 &&
-            !$this.closest("ul .dropdown").hasClass("show") &&
-            window.matchMedia("(max-width: 686px)").matches
-        ) {
+        if (dropdown_label_was_clicked && !dropdown_is_shown && is_touchscreen) {
             $this.closest("ul .dropdown").addClass("show");
-        } else if (
-            $this.closest(".dropdown .dropdown-pill").length > 0 &&
-            !$this.closest("ul .dropdown").hasClass("show")
-        ) {
+        } else if (logged_in_pill_was_clicked && !dropdown_is_shown) {
             $this.closest("ul .dropdown").addClass("show");
-        } else if (!$this.is(".dropdown ul") && $this.closest(".dropdown ul").length === 0) {
+        } else if (clicked_outside_dropdown_content) {
             $this.closest("ul .dropdown").removeClass("show");
         }
     });
 
     $(".nav-dropdown").on("mouseover", (e) => {
         const $this = $(e.target);
-        if (
-            !$this.closest("ul .dropdown").hasClass("show") &&
-            window.matchMedia("(min-width: 687px)").matches
-        ) {
+        const dropdown_is_shown = $this.closest("ul .dropdown").hasClass("show");
+
+        if (!dropdown_is_shown && !is_touchscreen) {
             $this.closest("ul .dropdown").addClass("show");
         }
     });
 
     $(".nav-dropdown").on("mouseout", (e) => {
         const $this = $(e.target);
-        if (
-            $this.closest("ul .dropdown").hasClass("show") &&
-            window.matchMedia("(min-width: 687px)").matches
-        ) {
+        const dropdown_is_shown = $this.closest("ul .dropdown").hasClass("show");
+
+        if (dropdown_is_shown && !is_touchscreen) {
             $this.closest("ul .dropdown").removeClass("show");
         }
     });