zulip/web/templates/left_sidebar.hbs

<div class="left-sidebar" id="left-sidebar" role="navigation">
    <div class="narrows_panel">
        <ul id="global_filters" class="filters">
            {{!-- Special-case this link so we don't actually go to page top. --}}
            <li class="top_left_all_messages top_left_row" title="{{t 'All messages' }} (a)">
                <a href="#all_messages" class="home-link">
                    <span class="filter-icon">
                        <i class="fa fa-align-left" aria-hidden="true"></i>
                    </span>
                    {{~!-- squash whitespace --~}}
                    <span>{{t 'All messages' }}</span>
                    <span class="unread_count"></span>
                </a>
                <span class="arrow all-messages-sidebar-menu-icon hidden-for-spectators"><i class="zulip-icon zulip-icon-ellipsis-v-solid" aria-hidden="true"></i></span>
            </li>
            <li class="top_left_recent_topics top_left_row" title="{{t 'Recent conversations' }} (t)">
                <a href="#recent">
                    <span class="filter-icon">
                        <i class="fa fa-clock-o" aria-hidden="true"></i>
                    </span>
                    {{~!-- squash whitespace --~}}
                    <span>{{t 'Recent conversations' }}</span>
                </a>
            </li>
            <li class="top_left_mentions top_left_row hidden-for-spectators" title="{{t 'Mentions' }}">
                <a href="#narrow/is/mentioned">
                    <span class="filter-icon">
                        <i class="fa fa-at" aria-hidden="true"></i>
                    </span>
                    {{~!-- squash whitespace --~}}
                    <span>{{t 'Mentions' }}</span>
                    <span class="unread_count"></span>
                </a>
            </li>
            <li class="top_left_starred_messages top_left_row hidden-for-spectators" title="{{t 'Starred messages' }}">
                <a href="#narrow/is/starred">
                    <span class="filter-icon">
                        <i class="fa fa-star" aria-hidden="true"></i>
                    </span>
                    {{~!-- squash whitespace --~}}
                    <span>{{t 'Starred messages' }}</span>
                    <span class="unread_count"></span>
                </a>
                <span class="arrow starred-messages-sidebar-menu-icon"><i class="zulip-icon zulip-icon-ellipsis-v-solid" aria-hidden="true"></i></span>
            </li>
            <li class="top_left_drafts top_left_row hidden-for-spectators" title="{{t 'Drafts' }} (d)">
                <a href="#drafts">
                    <span class="filter-icon">
                        <i class="fa fa-pencil" aria-hidden="true"></i>
                    </span>
                    {{~!-- squash whitespace --~}}
                    <span>{{t 'Drafts' }}</span>
                    <span class="unread_count"></span>
                </a>
                <span class="arrow drafts-sidebar-menu-icon"><i class="zulip-icon zulip-icon-ellipsis-v-solid" aria-hidden="true"></i></span>
            </li>
        </ul>
    </div>

    <div id="private_messages_sticky_header" class="private_messages_container zoom-out hidden-for-spectators">
        <div id="private_messages_section">
            <div id="private_messages_section_header" class="zoom-out zoom-in-sticky">
                <span id="pm_tooltip_container">
                    <i id="toggle_private_messages_section_icon" class="fa fa-sm fa-caret-down toggle_private_messages_section zoom-in-hide" aria-hidden="true"></i>
                    <h4 class="sidebar-title toggle_private_messages_section">{{t 'DIRECT MESSAGES' }}</h4>
                </span>
                <span class="unread_count"></span>
                <a id="show_all_private_messages" href="#narrow/is/private">
                    <i class="fa fa-align-right" aria-label="{{t 'All direct messages' }}"></i>
                </a>
            </div>
        </div>
        <a class="zoom-out-hide" id="hide_more_private_messages">
            <span> {{t 'back to streams' }}</span>
        </a>
    </div>
    {{~!-- squash whitespace --~}}
    <div id="left_sidebar_scroll_container" class="scrolling_list" data-simplebar>
        <div class="private_messages_container zoom-out hidden-for-spectators">
            <div id="private_messages_list"></div>
        </div>

        <div id="streams_list" class="zoom-out">
            <div id="streams_header" class="zoom-in-hide"><h4 class="sidebar-title" data-tooltip-template-id="filter-streams-tooltip-template">{{t 'STREAMS' }}</h4>
                <span class="tippy-zulip-tooltip streams_inline_icon_wrapper hidden-for-spectators" data-tippy-content="{{t 'Add streams' }}">
                    <i id="streams_inline_icon" class='fa fa-plus' aria-hidden="true" ></i>
                </span>
                <i class="streams_filter_icon fa fa-filter tippy-zulip-tooltip" aria-hidden="true" data-tooltip-template-id="filter-streams-tooltip-template"></i>
                <div class="input-append notdisplayed stream_search_section">
                    <input class="stream-list-filter home-page-input" type="text" autocomplete="off" placeholder="{{t 'Filter streams' }}" />
                    <button type="button" class="btn clear_search_button" id="clear_search_stream_button">
                        <i class="fa fa-remove" aria-hidden="true"></i>
                    </button>
                </div>
                <template id="filter-streams-tooltip-template">
                    {{t 'Filter streams' }}
                    {{tooltip_hotkey_hints "Q"}}
                </template>
            </div>
            <div id="topics_header">
                <a class="show-all-streams" tabindex="0">{{t 'Back to streams' }}</a>
            </div>
            <div id="stream-filters-container">
                <ul id="stream_filters" class="filters"></ul>
                {{#unless is_guest }}
                    <div id="subscribe-to-more-streams"></div>
                {{/unless}}
                <div id="login-link-container" class="only-visible-for-spectators">
                    <a class="login_button">
                        <i class="fa fa-sign-in" aria-hidden="true"></i>
                        {{~!-- squash whitespace --~}}
                        {{t 'Log in to browse more streams'}}
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>