diff --git a/web/src/click_handlers.js b/web/src/click_handlers.js
index fba3f0193b..fdfd6be10c 100644
--- a/web/src/click_handlers.js
+++ b/web/src/click_handlers.js
@@ -35,6 +35,7 @@ import * as server_events from "./server_events";
import * as settings_display from "./settings_display";
import * as settings_panel_menu from "./settings_panel_menu";
import * as settings_toggle from "./settings_toggle";
+import * as sidebar_ui from "./sidebar_ui";
import * as spectators from "./spectators";
import * as starred_messages_ui from "./starred_messages_ui";
import * as stream_list from "./stream_list";
@@ -489,6 +490,7 @@ export function initialize() {
e.preventDefault();
e.stopPropagation();
+ sidebar_ui.hide_userlist_sidebar();
popovers.hide_all();
$(".tooltip").remove();
});
diff --git a/web/src/hashchange.js b/web/src/hashchange.js
index e6be45ee6d..e028455ad2 100644
--- a/web/src/hashchange.js
+++ b/web/src/hashchange.js
@@ -26,6 +26,7 @@ import * as scheduled_messages_overlay_ui from "./scheduled_messages_overlay_ui"
import * as settings from "./settings";
import * as settings_panel_menu from "./settings_panel_menu";
import * as settings_toggle from "./settings_toggle";
+import * as sidebar_ui from "./sidebar_ui";
import * as spectators from "./spectators";
import * as stream_settings_ui from "./stream_settings_ui";
import * as ui_report from "./ui_report";
@@ -474,6 +475,7 @@ function hashchanged(from_reload, e) {
// We are changing to a "main screen" view.
overlays.close_for_hash_change();
+ sidebar_ui.hide_all();
popovers.hide_all();
browser_history.state.changing_hash = true;
const ret = do_hashchange_normal(from_reload);
diff --git a/web/src/hotkey.js b/web/src/hotkey.js
index cc7ded6dd4..d003848c6c 100644
--- a/web/src/hotkey.js
+++ b/web/src/hotkey.js
@@ -271,6 +271,7 @@ export function process_escape_key(e) {
$("#user_card_popover .user-card-popover-manage-menu-btn").trigger("focus");
return true;
}
+ sidebar_ui.hide_all();
popovers.hide_all();
return true;
}
diff --git a/web/src/popovers.js b/web/src/popovers.js
index b7e5673414..6831341633 100644
--- a/web/src/popovers.js
+++ b/web/src/popovers.js
@@ -3,7 +3,6 @@ import {hideAll} from "tippy.js";
import * as emoji_picker from "./emoji_picker";
import * as playground_links_popover from "./playground_links_popover";
import * as popover_menus from "./popover_menus";
-import * as sidebar_ui from "./sidebar_ui";
import * as stream_popover from "./stream_popover";
import * as user_card_popover from "./user_card_popover";
import * as user_group_popover from "./user_group_popover";
@@ -41,8 +40,6 @@ export function hide_all_except_sidebars(opts) {
// This function will hide all the popovers, including the mobile web
// or narrow window sidebars.
export function hide_all(not_hide_tippy_instances) {
- sidebar_ui.hide_userlist_sidebar();
- sidebar_ui.hide_streamlist_sidebar();
hide_all_except_sidebars({
not_hide_tippy_instances,
});
diff --git a/web/src/resize.js b/web/src/resize.js
index cdc73665b6..be6c375548 100644
--- a/web/src/resize.js
+++ b/web/src/resize.js
@@ -11,6 +11,7 @@ import * as navbar_alerts from "./navbar_alerts";
import * as navigate from "./navigate";
import * as popover_menus from "./popover_menus";
import * as popovers from "./popovers";
+import * as sidebar_ui from "./sidebar_ui";
import * as util from "./util";
function get_bottom_whitespace_height() {
@@ -167,6 +168,7 @@ export function handler() {
// popping up when the user opened that very popover.
const mobile = util.is_mobile();
if (!mobile || new_width !== _old_width) {
+ sidebar_ui.hide_all();
popovers.hide_all();
}
diff --git a/web/src/sidebar_ui.js b/web/src/sidebar_ui.js
index af4e72fc5b..d2d7690029 100644
--- a/web/src/sidebar_ui.js
+++ b/web/src/sidebar_ui.js
@@ -1,6 +1,5 @@
import $ from "jquery";
-import * as popovers from "./popovers";
import * as resize from "./resize";
import * as settings_data from "./settings_data";
import * as spectators from "./spectators";
@@ -45,6 +44,11 @@ export function update_invite_user_option() {
}
}
+export function hide_all() {
+ hide_streamlist_sidebar();
+ hide_userlist_sidebar();
+}
+
export function initialize() {
$("body").on("click", ".login_button", (e) => {
e.preventDefault();
@@ -56,19 +60,69 @@ export function initialize() {
e.preventDefault();
e.stopPropagation();
- popovers.hide_all();
- if (!right_sidebar_expanded_as_overlay) {
- show_userlist_sidebar();
+ if (right_sidebar_expanded_as_overlay) {
+ hide_userlist_sidebar();
+ return;
}
+ show_userlist_sidebar();
});
$("#streamlist-toggle-button").on("click", (e) => {
e.preventDefault();
e.stopPropagation();
- popovers.hide_all();
- if (!left_sidebar_expanded_as_overlay) {
- show_streamlist_sidebar();
+ if (left_sidebar_expanded_as_overlay) {
+ hide_streamlist_sidebar();
+ return;
}
+ show_streamlist_sidebar();
});
+
+ // Hide left / right sidebar on click outside.
+ document.addEventListener(
+ "click",
+ (e) => {
+ if (!(left_sidebar_expanded_as_overlay || right_sidebar_expanded_as_overlay)) {
+ return;
+ }
+
+ const $elt = $(e.target);
+ // Since sidebar toggle buttons have their own click handlers, don't handle them here.
+ if (
+ $elt.closest("#streamlist-toggle-button").length ||
+ $elt.closest("#userlist-toggle-button").length
+ ) {
+ return;
+ }
+
+ // Overrides for certain elements that should not close the sidebars.
+ if ($elt.closest(".no-auto-hide-sidebar-overlays").length) {
+ return;
+ }
+
+ if (
+ left_sidebar_expanded_as_overlay &&
+ !$elt.closest(".no-auto-hide-left-sidebar-overlay").length
+ ) {
+ const $left_column = $(".app-main .column-left");
+ const click_outside_left_sidebar = !$elt.closest($left_column).length;
+ if (click_outside_left_sidebar) {
+ hide_streamlist_sidebar();
+ }
+ }
+
+ if (
+ right_sidebar_expanded_as_overlay &&
+ !$elt.closest(".no-auto-hide-right-sidebar-overlay").length
+ ) {
+ const $right_column = $(".app-main .column-right");
+ const click_outside_right_sidebar = !$elt.closest($right_column).length;
+
+ if (click_outside_right_sidebar) {
+ hide_userlist_sidebar();
+ }
+ }
+ },
+ {capture: true},
+ );
}
diff --git a/web/templates/navbar.hbs b/web/templates/navbar.hbs
index 4e2b1859cf..fd4da2219c 100644
--- a/web/templates/navbar.hbs
+++ b/web/templates/navbar.hbs
@@ -50,7 +50,7 @@
0
-
+
diff --git a/web/templates/stream_sidebar_actions.hbs b/web/templates/stream_sidebar_actions.hbs
index 289a87fec7..bf05cf6911 100644
--- a/web/templates/stream_sidebar_actions.hbs
+++ b/web/templates/stream_sidebar_actions.hbs
@@ -59,7 +59,7 @@
{{t "Unsubscribe" }}
-
+