left_sidebar: Expand and condense the VIEWS navigation.

tools/test-js-with-node

@@ -117,6 +117,7 @@ EXEMPT_FILES = make_set(
         "web/src/info_overlay.js",
         "web/src/integration_url_modal.js",
         "web/src/invite.ts",
+        "web/src/left_sidebar_navigation_area.js",
         "web/src/left_sidebar_navigation_area_popovers.js",
         "web/src/lightbox.js",
         "web/src/list_util.ts",

web/src/left_sidebar_navigation_area.js

@@ -81,6 +81,24 @@ export function handle_narrow_activated(filter) {
     }
 }
 
+function toggle_condensed_navigation_area() {
+    const $views_label_container = $("#views-label-container");
+    const $views_label_icon = $("#toggle-top-left-navigation-area-icon");
+    if ($views_label_container.hasClass("showing-expanded-navigation")) {
+        // Toggle into the condensed state
+        $views_label_container.addClass("showing-condensed-navigation");
+        $views_label_container.removeClass("showing-expanded-navigation");
+        $views_label_icon.addClass("fa-caret-right");
+        $views_label_icon.removeClass("fa-caret-down");
+    } else {
+        // Toggle into the expanded state
+        $views_label_container.addClass("showing-expanded-navigation");
+        $views_label_container.removeClass("showing-condensed-navigation");
+        $views_label_icon.addClass("fa-caret-down");
+        $views_label_icon.removeClass("fa-caret-right");
+    }
+}
+
 export function highlight_recent_view() {
     remove($(".top_left_all_messages"));
     remove($(".top_left_starred_messages"));
@@ -125,4 +143,16 @@ export function highlight_inbox_view() {
 
 export function initialize() {
     update_scheduled_messages_row();
+
+    $("body").on("click", "#views-label-container", (e) => {
+        if (
+            $(e.currentTarget).hasClass("showing-condensed-navigation") &&
+            !($(e.target).hasClass("sidebar-title") || $(e.target).hasClass("fa-caret-right"))
+        ) {
+            // Ignore clicks on condensed nav items
+            return;
+        }
+        e.stopPropagation();
+        toggle_condensed_navigation_area();
+    });
 }

web/styles/left_sidebar.css

@@ -674,6 +674,37 @@ li.top_left_scheduled_messages {
     margin-left: -3px;
     cursor: pointer;
 
+    &.showing-expanded-navigation {
+        /* When the expanded navigation is visible,
+           hide the condensed navigation's controls. */
+        #left-sidebar-navigation-list-condensed,
+        .left-sidebar-navigation-menu-icon {
+            display: none;
+        }
+        /* Give the sidebar title through the end of the markers
+           area, if needed. */
+        .sidebar-title {
+            grid-column: row-content-start / markers-and-controls-end;
+        }
+    }
+
+    /* Use a next-sibling combinator (+) to use CSS to show and hide
+       filter rows as needed, based on the narrow. */
+    &.showing-condensed-navigation {
+        + #left-sidebar-navigation-list {
+            /* When the navigation area is condensed, hide all
+               the rows in the full navigation list... */
+            & .top_left_row {
+                display: none;
+            }
+            /* ...except when there is an active filter in place:
+               that row should still be shown. */
+            & .top_left_row.active-filter {
+                display: block;
+            }
+        }
+    }
+
     #toggle-top-left-navigation-area-icon {
         grid-area: starting-anchor-element;
         /* Remove negative left margin. This should be cleaned

web/templates/left_sidebar.hbs

@@ -1,6 +1,6 @@
 <div class="left-sidebar" id="left-sidebar" role="navigation">
     <div id="left-sidebar-navigation-area" class="left-sidebar-navigation-area">
-        <div id="views-label-container" class="hidden-for-spectators">
+        <div id="views-label-container" class="showing-expanded-navigation hidden-for-spectators">
             <i id="toggle-top-left-navigation-area-icon" class="fa fa-sm fa-caret-down" aria-hidden="true"></i>
             {{~!-- squash whitespace --~}}
             <h4 class="sidebar-title">{{t 'VIEWS' }}</h4>