left_sidebar: Auto-hide on clicking new topic or new direct message.

On smaller screens, where left_sidebar is hidden by default,
clicking the `New topic` and `New direct message` buttons did not
close the left_sidebar because these buttons are located within
the left_sidebar.
Clicking these buttons made the cursor to focus over the compose
but the compose remained half hidden by the left_sidebar.

This commit enables the left_sidebar to automatically hide
when these buttons are clicked by introducing the
auto-hide-left-sidebar-overlay class on these buttons.

web/src/sidebar_ui.ts

@@ -208,6 +208,13 @@ export function initialize(): void {
                 return;
             }
 
+            if (
+                left_sidebar_expanded_as_overlay &&
+                $elt.closest(".auto-hide-left-sidebar-overlay").length > 0
+            ) {
+                hide_streamlist_sidebar();
+            }
+
             if (
                 left_sidebar_expanded_as_overlay &&
                 $elt.closest(".no-auto-hide-left-sidebar-overlay").length === 0

web/templates/left_sidebar.hbs

@@ -153,7 +153,7 @@
             <a id="show-all-direct-messages" class="tippy-left-sidebar-tooltip-no-label-delay" href="#narrow/is/dm" data-tooltip-template-id="show-all-direct-messages-template">
                 <i class="zulip-icon zulip-icon-all-messages" aria-label="{{t 'Direct message feed' }}"></i>
             </a>
-            <span id="compose-new-direct-message" class="tippy-left-sidebar-tooltip-no-label-delay" data-tooltip-template-id="new_direct_message_button_tooltip_template">
+            <span id="compose-new-direct-message" class="tippy-left-sidebar-tooltip-no-label-delay auto-hide-left-sidebar-overlay" data-tooltip-template-id="new_direct_message_button_tooltip_template">
                 <i class="left-sidebar-new-direct-message-icon zulip-icon zulip-icon-square-plus" aria-label="{{t 'New direct message' }}"></i>
             </span>
         </div>

web/templates/stream_sidebar_row.hbs

@@ -12,7 +12,7 @@
 
             <div class="left-sidebar-controls">
                 {{#if can_post_messages}}
-                <div class="channel-new-topic-button tippy-zulip-tooltip hidden-for-spectators" data-tippy-content="{{t 'New topic'}}" data-stream-id="{{id}}">
+                <div class="channel-new-topic-button tippy-zulip-tooltip hidden-for-spectators auto-hide-left-sidebar-overlay" data-tippy-content="{{t 'New topic'}}" data-stream-id="{{id}}">
                     <i class="channel-new-topic-icon zulip-icon zulip-icon-square-plus" aria-hidden="true"></i>
                 </div>
                 {{/if}}