Ghost-Admin/app/components/gh-nav-menu.hbs

<header class="gh-nav-menu">
    <div class="gh-nav-menu-details">
        <div class="gh-nav-menu-icon" style={{this.iconStyle}}></div>
        <div class="gh-nav-menu-details-blog">{{this.config.blogTitle}}</div>
    </div>
    <div class="gh-nav-menu-search">
        <button class="gh-nav-btn-search" {{action "toggleSearchModal"}} title="Search site (Ctrl/⌘ + K)"><span>{{svg-jar "search" class="w4 h4 fill-midgrey"}}</span></button>
    </div>
</header>

{{#if this.showSearchModal}}
    <GhFullscreenModal @modal="search"
        @close={{action "toggleSearchModal"}}
        @modifier="action wide" />
{{/if}}

<section class="gh-nav-body">
    <div class="gh-nav-top">
        <ul class="gh-nav-list gh-nav-main">
            <li class="relative">
                <span {{action "transitionToOrRefreshSite" on="click"}}>
                    <LinkTo @route="site" data-test-nav="site" @current-when={{this.isOnSite}} @preventDefault={{false}}>
                        {{svg-jar "house"}} View site
                    </LinkTo>
                </span>
                <a href="{{this.config.blogUrl}}/" class="gh-secondary-action" title="Open site in new tab" target="_blank">
                    <span>{{svg-jar "expand"}}</span>
                </a>
            </li>
        </ul>
        <ul class="gh-nav-list gh-nav-manage">
            <li class="gh-nav-list-h">Manage</li>
            <li class="gh-nav-list-new relative">
                <GhLinkToCustomViewsIndex @route="posts" @query={{reset-query-params "posts"}} data-test-nav="posts">{{svg-jar "posts"}}Posts</GhLinkToCustomViewsIndex>
                <LinkTo @route="editor.new" @model="post" @classNames="gh-secondary-action gh-nav-new-post" @alt="New post" @title="New post" data-test-nav="new-story"><span>{{svg-jar "add-stroke"}}</span></LinkTo>
                {{#if this.customViews.forPosts}}
                    <button type="button" class="absolute left-3 top-2 z-9999 flex items-center pl2 h4 gh-nav-button-expand {{if this.navigation.settings.expanded.posts "expanded"}}" {{on "click" (fn this.navigation.toggleExpansion "posts")}} aria-label="{{if this.navigation.settings.expanded.posts "Collapse custom post types" "Expand custom post types"}}">
                        {{svg-jar (if this.navigation.settings.expanded.posts "arrow-down-stroke" "arrow-right-stroke")}}
                    </button>
                    {{#liquid-if this.navigation.settings.expanded.posts}}
                        <ul class="gh-nav-view-list">
                            {{#each this.customViews.forPosts as |view|}}
                                <li>
                                    <LinkTo @route="posts" @query={{reset-query-params "posts" view.filter}} data-test-nav-custom="{{view.route}}-{{view.name}}" title="{{view.name}}">
                                        {{!-- <div class="dib w4 h4 mr2 bg-{{view.color}} br-100"></div> --}}
                                        <span class="flex items-center svg-{{view.color}}">
                                            {{#if view.icon}}
                                                {{svg-jar (or view.icon "post")}}
                                            {{else}}
                                                <span class="circle"></span>
                                            {{/if}}
                                        </span>
                                        <span class="gh-nav-viewname">{{view.name}}</span>
                                    </LinkTo>
                                </li>
                            {{/each}}
                        </ul>
                    {{/liquid-if}}
                {{/if}}
            </li>
            <li>
                {{!-- clicking the Content link whilst on the content screen should reset the filter --}}
                {{#if (eq this.router.currentRouteName "pages")}}
                    <LinkTo @route="pages" @query={{reset-query-params "pages"}} @classNames="active" data-test-nav="pages">{{svg-jar "page"}}Pages</LinkTo>
                {{else}}
                    <LinkTo @route="pages" data-test-nav="pages">{{svg-jar "page"}}Pages</LinkTo>
                {{/if}}
            </li>
            {{#if this.showTagsNavigation}}
                <li><LinkTo @route="tags" data-test-nav="tags">{{svg-jar "tag"}}Tags</LinkTo></li>
            {{/if}}
            {{#if (and this.feature.members (gh-user-can-admin this.session.user))}}
                <li>
                    {{#if (eq this.router.currentRouteName "members.index")}}
                        <LinkTo @route="members" @current-when="members member" @query={{reset-query-params "members.index"}} data-test-nav="members">{{svg-jar "members"}}Members</LinkTo>
                    {{else}}
                        <LinkTo @route="members" @current-when="members member" data-test-nav="members">{{svg-jar "members"}}Members</LinkTo>
                    {{/if}}
                </li>
            {{/if}}
            <li><LinkTo @route="staff" data-test-nav="staff">{{svg-jar "staff"}}Staff</LinkTo></li>
        </ul>
        {{#if (gh-user-can-admin this.session.user)}}
            <ul class="gh-nav-list gh-nav-settings">
                <li class="gh-nav-list-h">Settings</li>
                <li><LinkTo @route="settings.general" data-test-nav="settings">{{svg-jar "settings"}}General</LinkTo></li>
                <li><LinkTo @route="settings.design" data-test-nav="design">{{svg-jar "paintbrush"}}Design</LinkTo></li>
                <li><LinkTo @route="settings.code-injection" data-test-nav="code-injection">{{svg-jar "brackets"}}Code injection</LinkTo></li>
                <li><LinkTo @route="settings.integrations" @current-when={{this.isIntegrationRoute}} data-test-nav="integrations">{{svg-jar "modules"}}Integrations</LinkTo></li>
                <li class="relative">
                    <button class="gh-secondary-action" title="Toggle Night shift" {{action (toggle "nightShift" this.feature)}}>
                        <span>{{svg-jar "nightshift"}}</span>
                    </button>
                    <LinkTo @route="settings.labs" data-test-nav="labs">{{svg-jar "labs"}}Labs</LinkTo>
                </li>
                {{#if this.showBilling}}
                    <li class="relative">
                        <a href="javascript:void(0)" {{action "toggleBillingModal"}} data-test-nav="billing">
                            {{svg-jar "credit-card"}} View billing
                        </a>
                    </li>
                    <li class="relative gh-nav-pro">
                        <GhBillingUpdateButton />
                    </li>
                {{/if}}
            </ul>
        {{/if}}

        {{#if this.showMenuExtension}}
            <ul class="gh-nav-list gh-nav-settings">
                {{#if this.config.clientExtensions.menu.title}}
                    <li class="gh-nav-list-h">{{this.config.clientExtensions.menu.title}}</li>
                {{/if}}
                {{#each this.config.clientExtensions.menu.items as |menuItem| }}
                    <li>
                        <a href="{{menuItem.href}}" target="_blank">{{svg-jar menuItem.icon}}{{menuItem.text}}</a>
                    </li>
                {{/each}}
            </ul>
        {{/if}}

        {{#if this.showScriptExtension}}
            {{{this.config.clientExtensions.script.container}}}
            <script src="{{this.config.clientExtensions.script.src}}"></script>
        {{/if}}
    </div>
    <div class="gh-nav-bottom">
        <GhBasicDropdown @horizontalPosition="left" @verticalPosition="above" @calculatePosition={{this.userDropdownPosition}} as |dropdown|>
            <dropdown.Trigger class="flex items-center outline-0 pointer space-between pa2 pl4 pr3 mt3 mb6">
                <div class="flex-auto flex items-center">
                    <div class="gh-user-avatar relative" style={{background-image-style this.session.user.profileImageUrl}}>
                        {{#if this.whatsNew.hasNew}}<span class="absolute dib bg-blue ba b--white br-100 gh-whats-new-badge-account"></span>{{/if}}
                    </div>
                    <div class="flex flex-column items-start justify-center">
                        <span class="gh-user-name {{if this.session.user.name "mb1"}}" title="{{this.session.user.name}}">{{this.session.user.name}}</span>
                        <span class="gh-user-email" title="{{this.session.user.email}}">{{this.session.user.email}}</span>
                    </div>
                </div>
                {{svg-jar "arrow-down" class="w3 mr1 fill-darkgrey"}}
            </dropdown.Trigger>

            <dropdown.Content class="gh-nav-menu-dropdown">
                <ul class="dropdown-menu dropdown-triangle-top" role="menu" {{action dropdown.actions.close on="click" preventDefault=false}}>
                    <li role="presentation">
                        <LinkTo @route="about" @classNames="dropdown-item" @role="menuitem" @tabindex="-1" data-test-nav="about">
                            {{svg-jar "store"}} About Ghost
                        </LinkTo>
                    </li>
                    <li role="presentation">
                        <button class="dropdown-item" role="menuitem" tabindex="-1" {{on "click" this.whatsNew.showModal}}>
                            {{svg-jar "gift"}} What's new?
                            {{#if this.whatsNew.hasNew}}
                                <div class="flex-grow-1 flex justify-end"><span class="dib w2 h2 top-0 right-0 bg-blue br-100"></span></div>
                            {{/if}}
                        </button>
                    </li>
                    <li class="divider" role="separator"></li>
                    <li role="presentation">
                        <LinkTo @route="staff.user" @model={{this.session.user.slug}} @classNames="dropdown-item" @role="menuitem" @tabindex="-1" data-test-nav="user-profile">
                            {{svg-jar "user-circle"}} Your Profile
                        </LinkTo>
                    </li>
                    <li role="presentation">
                        <a class="dropdown-item" role="menuitem" tabindex="-1" href="https://ghost.org/docs/" target="_blank">
                            {{svg-jar "ambulance"}} Support Center
                        </a>
                    </li>
                    <li role="presentation">
                        <a class="dropdown-item" role="menuitem" tabindex="-1" target="_blank"
                            href="https://twitter.com/intent/tweet?text=%40Ghost+Hi%21+Can+you+help+me+with+&related=Ghost"
                            onclick="window.open(this.href, 'twitter-share', 'width=550,height=235');return false;"
                        >
                            {{svg-jar "twitter"}} Tweet @Ghost!
                        </a>
                    </li>
                    <li role="presentation">
                        <a class="dropdown-item" role="menuitem" tabindex="-1" href="https://ghost.org/help/topic/setting-up/" target="_blank">
                            {{svg-jar "book-open"}} How to Use Ghost
                        </a>
                    </li>
                    <li class="divider" role="separator"></li>

                    {{#if this.showDropdownExtension}}
                        {{#each this.config.clientExtensions.dropdown.items as |menuItem| }}
                            {{#if menuItem.divider}}
                                <li class="divider" role="separator"></li>
                            {{else}}
                                <li role="presentation">
                                    <a href="{{menuItem.href}}" target="_blank" class="dropdown-item {{menuItem.classes}}" role="menuitem" tabindex="-1">
                                        {{svg-jar menuItem.icon}} {{menuItem.text}}
                                    </a>
                                </li>
                            {{/if}}
                        {{/each}}
                    {{/if}}

                    <li role="presentation">
                        <LinkTo @route="signout" @classNames="dropdown-item user-menu-signout" @role="menuitem" @tabindex="-1">
                            {{svg-jar "signout"}} Sign Out
                        </LinkTo>
                    </li>
                </ul>
            </dropdown.Content>
        </GhBasicDropdown>
    </div>
</section>

<GhTourItem @throbberId="getting-started"
    @target=".gh-nav-main"
    @throbberAttachment="middle right"
    @popoverTriangleClass="left-top"
    @throbberOffset="0px 0px"
/>