From 4f78ecdd47cae48c8543d807d55503e59f797cd2 Mon Sep 17 00:00:00 2001
From: Sourabh Patel <getmeapencil@gmail.com>
Date: Mon, 20 Jan 2025 16:50:00 +0530
Subject: [PATCH] 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                | 7 +++++++
 web/templates/left_sidebar.hbs       | 2 +-
 web/templates/stream_sidebar_row.hbs | 2 +-
 3 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/web/src/sidebar_ui.ts b/web/src/sidebar_ui.ts
index cd59a47535..a07e8e0458 100644
--- a/web/src/sidebar_ui.ts
+++ b/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
diff --git a/web/templates/left_sidebar.hbs b/web/templates/left_sidebar.hbs
index f311a93adc..2995858f02 100644
--- a/web/templates/left_sidebar.hbs
+++ b/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>
diff --git a/web/templates/stream_sidebar_row.hbs b/web/templates/stream_sidebar_row.hbs
index 40b09ff85a..db6ef26afe 100644
--- a/web/templates/stream_sidebar_row.hbs
+++ b/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}}