clientNavbar extra item

[Kharg]

Following https://docs.espocrm.com/development...client-navbar/ I am trying to add a extra navbar item but my icon always end up on the left side of the search bar instead of being with all the other icons on the right side.

I'd like to understand what I am doing wrong.

Is the icon supposed to be on the left of the search bar?



Sample code:

clientNavbar.json

{
    "items": {
        "custom": {
            "view": "custom-nav:views/site/navbar/custom-panel",
            "class": "dropdown hidden-xs custom-container",
            "order": 2
        }
    }
}​ 

custom-panel.js

define('custom-nav:views/site/navbar/custom-panel', ['view'], (Dep) => {
    return class extends Dep {
        templateContent = `
        <a
            id="custom-dropdown"
            class="dropdown-toggle"
            data-toggle="dropdown"
            role="button"
            tabindex="0"
            title="{{translate 'Custom' category="scopeNamesPlural"}}"
        ><i class="fas fa-history icon"></i></a>
        <ul class="dropdown-menu" role="menu" aria-labelledby="custom-dropdown">
            <li class="dropdown-header">{{translate 'Custom' category="scopeNamesPlural"}}
            </li>
            {{#each customList}}
                <li>
                    <a href="#{{./targetType}}/view/{{./targetId}}">
                        <span class="icon-container">{{{./icon}}}</span>
                        {{./targetName}}
                    </a>
                </li>
            {{/each}}
        </ul>
    `
        data() {
            return {
                customList: this.customList.map(item => {
                    return {
                        ...item,
                        icon: this.getHelper().getScopeColorIconHtml(item.targetType)
                    };
                }),
            };
        }
        setup() {
            this.customList= [];
            Espo.Ajax.getRequest('Custom', {maxSize: 10})
                .then(response => {
                    this.customList= response.list || [];
                    this.reRender();
                });
        }
        isAvailable() {
            return true;
        }
    };
});​ 

[Kharg]

Fixed, the issue was the order in clientNavbar.json

An order of 20 is working fine.