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

Because Global Search is an item itself and has order 5, as such anything greater than 5 should be fine to display the item on the right side.