landing-pages: Add working "×" for mobile navigation.

This adds a working "×" icon that you can click to close the nav
on the mobile product pages.

Fixes #5260.

static/js/portico/landing-page.js

@@ -150,10 +150,8 @@ var events = function () {
     $("body").click(function (e) {
         var $e = $(e.target);
 
-        var should_close = !$e.is("ul, .hamburger") && $e.closest("ul, .hamburger").length === 0;
 
-        // this means that it is in mobile sidebar mode.
+        if ($e.is("nav ul .exit")) {
-        if ($("nav ul").height() === window.innerHeight && should_close) {
             $("nav ul").removeClass("show");
         }
     });

static/styles/landing-page.css

@@ -165,6 +165,10 @@ nav ul {
     cursor: pointer;
 }
 
+nav ul .exit {
+    display: none;
+}
+
 nav ul li {
     position: relative;
     display: inline-block;
@@ -2030,6 +2034,17 @@ a:not(.no-style):hover:before {
         transform: translate(0px, 0px);
     }
 
+    nav ul .exit {
+        display: block;
+        position: absolute;
+        top: 10px;
+        right: 25px;
+
+        font-weight: 100;
+        font-size: 3em;
+        color: initial;
+    }
+
     nav ul li:first-of-type {
         margin-top: 20px;
     }

templates/zerver/landing_nav.html

@@ -14,6 +14,7 @@
             <span>Zulip</span>
         </a>
         <ul>
+            <div class="exit">&times;</div>
             <li on-page="hello">
                 <a class="no-style" href="/hello/">Home</a>
             </li>

templates/zerver/landing_nav_blue.html

@@ -10,6 +10,7 @@
             <span>Zulip</span>
         </a>
         <ul>
+            <div class="exit">&times;</div>
             <li on-page="hello">
                 <a class="no-style" href="/hello/">Home</a>
             </li>