navbar: Add button to toggle left sidebar.

web/src/sidebar_ui.ts

@@ -114,6 +114,11 @@ export function initialize(): void {
         e.preventDefault();
         e.stopPropagation();
 
+        if (window.innerWidth >= media_breakpoints_num.md) {
+            $("body").toggleClass("hide-left-sidebar");
+            return;
+        }
+
         if (left_sidebar_expanded_as_overlay) {
             hide_streamlist_sidebar();
             return;

web/src/stream_list.ts

@@ -968,6 +968,8 @@ export function initiate_search(): void {
     ) {
         popovers.hide_all();
         sidebar_ui.show_streamlist_sidebar();
+    } else if (!sidebar_ui.left_sidebar_expanded_as_overlay) {
+        $("body").removeClass("hide-left-sidebar");
     }
     $filter.trigger("focus");
 

web/src/tippyjs.ts

@@ -591,6 +591,24 @@ export function initialize(): void {
         },
     });
 
+    tippy.delegate("body", {
+        target: ".header-main .column-left .left-sidebar-toggle-button",
+        delay: LONG_HOVER_DELAY,
+        placement: "bottom",
+        appendTo: () => document.body,
+        onShow(instance) {
+            let template = "show-left-sidebar-tooltip-template";
+            if ($("#left-sidebar-container").is(":visible")) {
+                template = "hide-left-sidebar-tooltip-template";
+            }
+            $(instance.reference).attr("data-tooltip-template-id", template);
+            instance.setContent(get_tooltip_content(instance.reference));
+        },
+        onHidden(instance) {
+            instance.destroy();
+        },
+    });
+
     tippy.delegate("body", {
         target: "#userlist-toggle",
         delay: LONG_HOVER_DELAY,

web/styles/zulip.css

@@ -1417,6 +1417,9 @@ nav {
     .column-left {
         text-align: left;
         margin-left: 15px;
+        display: flex;
+        justify-content: space-between;
+        gap: 10px;
 
         .nav-logo {
             display: inline-block;
@@ -1429,6 +1432,15 @@ nav {
                 height: 15px;
             }
         }
+
+        .left-sidebar-toggle-button {
+            margin-right: 5px;
+
+            .left-sidebar-toggle-unreadcount {
+                top: 10px;
+                right: 14px;
+            }
+        }
     }
 
     & a {
@@ -1946,6 +1958,41 @@ select.invite-as {
     visibility: hidden;
 }
 
+%hide-left-sidebar {
+    .app-main .column-left {
+        display: none;
+
+        &.expanded {
+            display: block;
+            position: absolute;
+            float: none;
+            left: 0;
+            top: 0;
+
+            .left-sidebar {
+                background-color: var(--color-background);
+                box-shadow: 0 2px 3px 0 hsl(0deg 0% 0% / 10%);
+                border-right: 1px solid var(--color-border-sidebar);
+                height: 100%;
+                padding-left: 10px;
+                width: var(--left-sidebar-width);
+            }
+        }
+    }
+}
+
+.hide-left-sidebar {
+    @extend %hide-left-sidebar;
+}
+
+body:not(.hide-left-sidebar) {
+    /* User can clearly see the unread count in the left sidebar. So,
+       we don't need an indicator here as it will only serve as a disctraction. */
+    #header-container .column-left .left-sidebar-toggle-unreadcount {
+        display: none !important;
+    }
+}
+
 @media (width < $xl_min) {
     .default-sidebar-behaviour {
         @extend %hide-right-sidebar;
@@ -1969,28 +2016,12 @@ select.invite-as {
 
 @media (width < $md_min) {
     .default-sidebar-behaviour {
-        .app-main .column-left,
+        @extend %hide-left-sidebar;
+
         .header-main .column-left {
             display: none;
         }
 
-        .app-main .column-left.expanded {
-            display: block;
-            position: absolute;
-            float: none;
-            left: 0;
-            top: 0;
-
-            .left-sidebar {
-                background-color: var(--color-background);
-                box-shadow: 0 2px 3px 0 hsl(0deg 0% 0% / 10%);
-                border-right: 1px solid var(--color-border-sidebar);
-                height: 100%;
-                padding-left: 10px;
-                width: var(--left-sidebar-width);
-            }
-        }
-
         .app-main .column-middle {
             margin-left: 7px;
             margin-right: 7px;

web/templates/navbar.hbs

@@ -4,12 +4,16 @@
             <a href="" class="brand no-style">
                 <img id="realm-logo" src="" alt="" class="nav-logo no-drag"/>
             </a>
+            <a class="left-sidebar-toggle-button {{#if embedded}}hide-streamlist-toggle-visibility{{/if}}" tabindex="0" role="button">
+                <i class="fa fa-reorder" aria-hidden="true"></i>
+                <span class="left-sidebar-toggle-unreadcount">0</span>
+            </a>
         </div>
         <div class="column-middle" id="navbar-middle">
             <div class="column-middle-inner">
-                <div id="streamlist-toggle" class="tippy-zulip-delayed-tooltip {{#if embedded}}hide-streamlist-toggle-visibility{{/if}}" data-tooltip-template-id="streamlist-toggle-tooltip-template">
+                <div id="streamlist-toggle" class="tippy-zulip-delayed-tooltip {{#if embedded}}hide-streamlist-toggle-visibility{{/if}}" data-tooltip-template-id="show-left-sidebar-tooltip-template">
                     <a class="left-sidebar-toggle-button" role="button" tabindex="0"><i class="fa fa-reorder" aria-hidden="true"></i>
-                        <span id="streamlist-toggle-unreadcount">0</span>
+                        <span class="left-sidebar-toggle-unreadcount">0</span>
                     </a>
                 </div>
                 <div class="top-navbar-container">

web/templates/tooltip_templates.hbs

@@ -203,10 +203,13 @@
     {{t 'Search' }}
     {{tooltip_hotkey_hints "/"}}
 </template>
-<template id="streamlist-toggle-tooltip-template" >
+<template id="show-left-sidebar-tooltip-template" >
-    {{t 'View channels' }}
+    {{t 'Show left sidebar' }}
     {{tooltip_hotkey_hints "Q"}}
 </template>
+<template id="hide-left-sidebar-tooltip-template" >
+    {{t 'Hide left sidebar' }}
+</template>
 <template id="show-userlist-tooltip-template">
     {{t 'Show user list' }}
     {{tooltip_hotkey_hints "W"}}