Make /help/ sidebar more discoverable on mobile/narrow.

This makes the /help/ sidebar more discoverable at windows less
than 1000px in width because it makes it stick out a bit when it
is closed with the hamburger menu at the top.

Fixes: #6038.

static/js/portico/help.js

@@ -69,4 +69,10 @@ const Ps = require('perfect-scrollbar');
     $(".hamburger").click(function () {
         $(".sidebar").toggleClass("show");
     });
+
+    $(".markdown").click(function () {
+        if ($(".sidebar.show").length) {
+            $(".sidebar.show").toggleClass("show");
+        }
+    });
 }());

static/styles/portico.css

@@ -102,6 +102,8 @@ body {
     color: #dae0df;
 
     overflow: auto;
+
+    -webkit-overflow-scrolling: touch;
 }
 
 .help .sidebar h2 {
@@ -1317,9 +1319,9 @@ input.new-organization-button {
 
 @media (max-width: 1000px) {
     .app.help .markdown {
-        width: calc(100vw);
+        width: calc(100vw - 50px);
         height: calc(100vh - 64px);
-        left: 0;
+        left: 50px;
     }
 
     .app.help .markdown .content {
@@ -1328,23 +1330,38 @@ input.new-organization-button {
 
     .app.help .hamburger {
         display: block;
-        position: absolute;
-        top: 20px;
-        right: 20px;
-        fill: hsl(0, 0%, 40%);
-        z-index: 1;
+        position: fixed;
+        top: 70px;
+        left: 9px;
+        fill: #fff;
+        z-index: 2;
 
+
+        transition: all 0.3s ease;
         cursor: pointer;
     }
 
     .app.help .sidebar {
-        right: 100vw;
+        right: calc(100vw - 50px);
+        padding-right: 80px;
         transform: translateX(0);
         transition: all 0.3s ease;
+
+        overflow: hidden;
+        height: 100vh;
     }
 
     .app.help .sidebar.show {
-        transform: translateX(340px);
+        padding-right: 20px;
+        transform: translateX(280px);
+    }
+
+    .app.help .sidebar.show + .hamburger {
+        transform: translateX(280px);
+    }
+
+    .app.help .sidebar.show ~ .markdown {
+        -webkit-filter: brightness(0.7);
     }
 
     .contributors .person {
@@ -1404,6 +1421,10 @@ input.new-organization-button {
 }
 
 @media (max-width: 500px) {
+    .markdown .content {
+        padding: 30px 10px 80px 10px;
+    }
+
     .brand.logo .light {
         display: none;
     }
@@ -1419,11 +1440,19 @@ input.new-organization-button {
 
     .app.help .sidebar {
         width: calc(100% - 40px);
-        height: calc(100vh - 40px - 10px - 10px);
+        height: calc(100vh - 40px - 10px - 9px);
     }
 
     .app.help .sidebar.show {
-        transform: translateX(100%);
+        transform: translateX(calc(100% - 50px));
+    }
+
+    .app.help .sidebar.show + .hamburger {
+        transform: translateX(calc(100vw - 50px));
+    }
+
+    .app.help .hamburger {
+        top: 50px;
     }
 
     .app.help .markdown {

templates/zerver/help/main.html

@@ -7,9 +7,11 @@
     <div class="sidebar">
         {{ render_markdown_path("zerver/help/sidebar.md") }}
     </div>
+
     <svg height="32px" class="hamburger" style="enable-background:new 0 0 32 32;" version="1.1" viewBox="0 0 32 32" width="32px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
         <path d="M4,10h24c1.104,0,2-0.896,2-2s-0.896-2-2-2H4C2.896,6,2,6.896,2,8S2.896,10,4,10z M28,14H4c-1.104,0-2,0.896-2,2  s0.896,2,2,2h24c1.104,0,2-0.896,2-2S29.104,14,28,14z M28,22H4c-1.104,0-2,0.896-2,2s0.896,2,2,2h24c1.104,0,2-0.896,2-2  S29.104,22,28,22z"></path>
     </svg>
+
     <div class="markdown">
         <div class="content">
             {{ render_markdown_path(article) }}