<div class="flex flex-column h-100" {{css-transition (unless @firstRender "gh-nav-main" )}} data-test-nav-menu="main"
    ...attributes>

    <div class="gh-toggle-nav-menu">
        <button type="button" class="gh-btn-toggle-menu" {{on "click" (fn this.navigation.toggleMenu)}} title="Toggle sidebar">
            <div class="segment-1"></div>
            <div class="segment-2"></div>
        </button>
    </div>

    {{#unless this.session.user.isContributor}}
    <header class="gh-nav-menu">
        <div class="gh-nav-menu-details">
            <div class="gh-nav-menu-icon {{this.iconClass}}" style={{this.iconStyle}}></div>
            <div class="gh-nav-menu-details-sitetitle">{{this.config.blogTitle}}</div>
        </div>
        <div class="gh-nav-menu-search">
            <button class="gh-nav-btn-search" title="Search site (Ctrl/⌘ + K)" type="button" {{on "click"
                (action "openSearchModal" )}} data-test-button="search"><span>{{svg-jar "search"}}</span></button>
        </div>
    </header>
    {{/unless}}

    <section class="gh-nav-body">

        {{#unless this.session.user.isContributor}}
        <div class="gh-nav-top">

            {{#if this.session.user.isAdmin}}
                <ul class="gh-nav-list gh-nav-main">
                    {{#if (and (gh-user-can-admin this.session.user))}}
                        <li class="relative">
                            <LinkTo @route="stats-x">{{svg-jar "graph-chart-up-arrow"}}Analytics</LinkTo>
                        </li>
                    {{/if}}
                    {{#if (and this.settings.socialWebEnabled this.session.user.isAdmin)}}
                        <li class="relative gh-nav-list-ap">
                            <LinkTo @route="activitypub-x">{{svg-jar "ap-network"}}Network
                                {{#unless this.notificationsCount.isLoading}}
                                    {{#if (gt this.notificationsCount.count 0)}}
                                        <span class="gh-nav-member-count">{{format-number this.notificationsCount.count}}</span>
                                    {{/if}}
                                {{/unless}}
                            </LinkTo>
                        </li>
                    {{/if}}
                    <li class="relative">
                        <span {{action "transitionToOrRefreshSite" on="click" }} class="{{if this.isOnSite "active"}}">
                            <LinkTo @route="site" data-test-nav="site">
                                {{svg-jar "view-site"}} View site
                            </LinkTo>
                        </span>
                        <a href="{{this.config.blogUrl}}/" class="gh-secondary-action" title="Open site in new tab"
                            target="_blank" rel="noopener noreferrer" aria-label="View site in new tab">
                            <span>{{svg-jar "external"}}</span>
                        </a>
                    </li>
                </ul>
            {{/if}}
            <ul class="gh-nav-list gh-nav-manage">
                <li class="gh-nav-list-new gh-nav-list-posts relative">
                    <GhLinkToCustomViewsIndex @route="posts" @query={{reset-query-params "posts" }}
                        data-test-nav="posts" aria-current={{unless this.customViews.activeView "page"}}>{{svg-jar "posts" class="gh-nav-posts-icon"}}Posts</GhLinkToCustomViewsIndex>
                    <LinkTo @route="lexical-editor.new" @model="post" class="gh-secondary-action gh-nav-new-post"
                        @alt="New post" title="New post" data-test-nav="new-story"><span>{{svg-jar "plus"}}</span>
                    </LinkTo>
                    {{#if this.session.user.isAuthorOrContributor}}
                    {{#if this.customViews.forPosts}}
                    <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}}"
                                @activeClass="active"
                                aria-current={{if (and this.customViews.activeView (eq view.name this.customViews.activeView.name)) "page"}}>
                                <span class="gh-nav-viewname">{{view.name}}</span>
                                <span class="flex items-center svg-{{view.color}}" data-color="{{view.color}}" aria-hidden="true">
                                    {{#unless view.icon}}
                                    <span class="absolute circle"></span>
                                    {{/unless}}
                                </span>
                            </LinkTo>
                        </li>
                        {{/each}}
                    </ul>
                    {{/if}}
                    {{else}}
                    {{#if this.customViews.forPosts}}
                    <button type="button" class="gh-nav-button-expand {{if this.navigation.settings.expanded.posts "
                        expanded"}}" {{on "click" (fn this.navigation.toggleExpansion "posts" )}}
                        aria-label="Toggle post views"
                        aria-expanded="{{if this.navigation.settings.expanded.posts "true" "false"}}">
                        {{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}}"
                                @activeClass="active"
                                aria-current={{if (and this.customViews.activeView (eq view.name this.customViews.activeView.name)) "page"}}>
                                <span class="gh-nav-viewname">{{view.name}}</span>
                                <span class="flex items-center svg-{{view.color}}" data-color="{{view.color}}" aria-hidden="true">
                                    {{#unless view.icon}}
                                    <span class="absolute circle"></span>
                                    {{/unless}}
                                </span>
                            </LinkTo>
                        </li>
                        {{/each}}
                    </ul>
                    {{/liquid-if}}
                    {{/if}}
                    {{/if}}
                </li>
                <li>
                    {{!-- clicking the Content link whilst on the content screen should reset the filter --}}
                    <LinkTo @route="pages" @query={{if (eq this.router.currentRouteName "pages") (reset-query-params "pages")}} data-test-nav="pages">{{svg-jar "page"}}Pages</LinkTo>
                </li>
                {{#if this.showTagsNavigation}}
                <li>
                    <LinkTo @route="tags" @current-when="tags tag tag.new" data-test-nav="tags">{{svg-jar "tag"}}Tags</LinkTo>
                </li>
                {{/if}}
                {{#if (gh-user-can-manage-members this.session.user)}}
                <li class="relative">
                    <LinkTo @route="members" @current-when="members member member.new"
                        @query={{if (eq this.router.currentRouteName "members.index") (reset-query-params "members.index")}} data-test-nav="members">{{svg-jar
                        "members"}}Members
                        {{#let (members-count-fetcher) as |count|}}
                        {{#unless count.isLoading}}
                        <span class="gh-nav-member-count">{{format-number count.count}}</span>
                        {{/unless}}
                        {{/let}}
                    </LinkTo>
                </li>
                {{/if}}
            </ul>

            {{#if this.session.user.isOwnerOnly}}
            <ul class="gh-nav-list">
                {{#if this.showBilling}}
                <li class="relative">
                    <a href="javascript:void(0)" class={{if this.billing.billingWindowOpen "active" }}
                        {{action "toggleBillingModal" }} data-test-nav="billing">
                        {{svg-jar "credit-card"}} Ghost(Pro)
                    </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" rel="noopener noreferrer">{{svg-jar
                        menuItem.icon}}{{menuItem.text}}</a>
                </li>
                {{/each}}
            </ul>
            {{/if}}
        </div>
        {{/unless}}

        <GhNavMenu::Footer />

    </section>
</div>
