@fleetbase/ember-ui 0.3.20 → 0.3.22

package/addon/components/layout/header/smart-nav-menu/customizer.hbs

@@ -0,0 +1,157 @@
+{{! Layout::Header::SmartNavMenu::Customizer
+    ─────────────────────────────────────────────────────────────────────────
+    Modal-style panel for customising which extensions are pinned to the
+    header bar.  Uses a backdrop overlay so it feels like a focused dialog.
+    ─────────────────────────────────────────────────────────────────────────
+}}
+<div class="snm-customizer-backdrop" role="presentation" {{on "click" this.cancel}}></div>
+
+<div
+    class="snm-customizer-panel"
+    role="dialog"
+    aria-modal="true"
+    aria-label="Customise navigation"
+>
+    {{! ── Header ──────────────────────────────────────────────────────────── }}
+    <div class="snm-customizer-header">
+        <div class="snm-customizer-header-left">
+            <FaIcon @icon="sliders" @size="sm" class="mr-2 text-blue-400" />
+            <h2 class="snm-customizer-title">Customise Navigation</h2>
+        </div>
+        <button
+            type="button"
+            class="snm-customizer-close"
+            aria-label="Close"
+            {{on "click" this.cancel}}
+        >
+            <FaIcon @icon="xmark" @size="sm" />
+        </button>
+    </div>
+
+    {{! ── Body ───────────────────────────────────────────────────────────── }}
+    <div class="snm-customizer-body">
+        {{! Left column – pinned items (drag-sortable) }}
+        <div class="snm-customizer-col snm-customizer-col-pinned">
+            <div class="snm-customizer-col-header">
+                <span class="snm-customizer-col-title">
+                    <FaIcon @icon="thumbtack" @size="xs" class="mr-1.5 text-blue-400" />
+                    Pinned to bar
+                </span>
+                <span class="snm-customizer-col-badge {{if this.atPinnedLimit 'at-limit'}}">
+                    {{this.workingPinned.length}} / {{@maxVisible}}
+                </span>
+            </div>
+
+            {{#if this.workingPinned.length}}
+                <DragSortList
+                    @items={{this.workingPinned}}
+                    @dragEndAction={{this.reorderPinned}}
+                    @group="snm-pinned"
+                    @dragHandle=".snm-drag-handle"
+                    class="snm-customizer-drag-list"
+                    as |item|
+                >
+                    <div class="snm-customizer-pinned-item">
+                        <span class="snm-drag-handle" title="Drag to reorder">
+                            <FaIcon @icon="grip-vertical" @size="sm" />
+                        </span>
+                        <div class="snm-customizer-item-icon">
+                            {{#if item.iconComponent}}
+                                {{component (lazy-engine-component item.iconComponent) options=item.iconComponentOptions}}
+                            {{else}}
+                                <FaIcon @icon={{or item.icon "circle-dot"}} @prefix={{item.iconPrefix}} @size="sm" />
+                            {{/if}}
+                        </div>
+                        <span class="snm-customizer-item-title truncate">{{item.title}}</span>
+                        {{#if item._parentTitle}}
+                            <span class="snm-customizer-item-parent-label">· {{item._parentTitle}}</span>
+                        {{/if}}
+                        <button
+                            type="button"
+                            class="snm-customizer-unpin-btn"
+                            title="Remove from bar"
+                            {{on "click" (fn this.togglePin item)}}
+                        >
+                            <FaIcon @icon="xmark" @size="xs" />
+                        </button>
+                    </div>
+                </DragSortList>
+            {{else}}
+                <div class="snm-customizer-empty-state">
+                    <FaIcon @icon="inbox" @size="lg" class="mb-2 text-gray-500" />
+                    <p>No extensions pinned yet.</p>
+                    <p class="text-xs">Add extensions from the list on the right.</p>
+                </div>
+            {{/if}}
+        </div>
+
+        {{! Divider }}
+        <div class="snm-customizer-divider"></div>
+
+        {{! Right column – all available extensions }}
+        <div class="snm-customizer-col snm-customizer-col-all">
+            <div class="snm-customizer-col-header">
+                <span class="snm-customizer-col-title">
+                    <FaIcon @icon="grid-2" @size="xs" class="mr-1.5 text-gray-400" />
+                    All extensions
+                </span>
+            </div>
+
+            <div class="snm-customizer-all-list">
+                {{#each @allItems as |item|}}
+                    <button
+                        type="button"
+                        class="snm-customizer-all-item {{if (this.isPinned item) 'is-pinned'}} {{if (and this.atPinnedLimit (not (this.isPinned item))) 'is-disabled'}}"
+                        title={{if (this.isPinned item) "Click to unpin" "Click to pin to bar"}}
+                        disabled={{and this.atPinnedLimit (not (this.isPinned item))}}
+                        {{on "click" (fn this.togglePin item)}}
+                    >
+                        <div class="snm-customizer-item-icon">
+                            {{#if item.iconComponent}}
+                                {{component (lazy-engine-component item.iconComponent) options=item.iconComponentOptions}}
+                            {{else}}
+                                <FaIcon @icon={{or item.icon "circle-dot"}} @prefix={{item.iconPrefix}} @size="sm" />
+                            {{/if}}
+                        </div>
+                        <span class="snm-customizer-item-title truncate">{{item.title}}</span>
+                        {{#if item._parentTitle}}
+                            <span class="snm-customizer-item-parent-label">· {{item._parentTitle}}</span>
+                        {{/if}}
+                        {{#if (this.isPinned item)}}
+                            <FaIcon @icon="check" @size="xs" class="snm-customizer-pinned-check ml-auto flex-shrink-0" />
+                        {{/if}}
+                    </button>
+                {{/each}}
+            </div>
+        </div>
+    </div>
+
+    {{! ── Footer ─────────────────────────────────────────────────────────── }}
+    <div class="snm-customizer-footer">
+        <button
+            type="button"
+            class="snm-customizer-reset-btn"
+            {{on "click" this.resetToDefault}}
+        >
+            <FaIcon @icon="rotate-left" @size="xs" class="mr-1.5" />
+            Reset to default
+        </button>
+        <div class="snm-customizer-footer-actions">
+            <button
+                type="button"
+                class="snm-btn snm-btn-secondary"
+                {{on "click" this.cancel}}
+            >
+                Cancel
+            </button>
+            <button
+                type="button"
+                class="snm-btn snm-btn-primary"
+                {{on "click" this.apply}}
+            >
+                <FaIcon @icon="check" @size="xs" class="mr-1.5" />
+                Apply
+            </button>
+        </div>
+    </div>
+</div>

package/addon/components/layout/header/smart-nav-menu/customizer.js

@@ -0,0 +1,132 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import { A } from '@ember/array';
+
+/**
+ * `Layout::Header::SmartNavMenu::Customizer`
+ *
+ * A modal-style panel that allows users to:
+ *   - Select which extensions are pinned to the header bar (up to `@maxVisible`).
+ *   - Drag-and-drop to reorder pinned extensions.
+ *   - Preview which items will appear in the bar vs. the overflow dropdown.
+ *
+ * The component is intentionally stateless with respect to persistence –
+ * it delegates saving to the parent `SmartNavMenu` via `@onApply`.
+ *
+ * @class LayoutHeaderSmartNavMenuCustomizerComponent
+ * @extends Component
+ */
+export default class LayoutHeaderSmartNavMenuCustomizerComponent extends Component {
+    /**
+     * Working copy of the pinned items list, mutated locally until the user
+     * clicks "Apply".  Initialised from `@pinnedIds` (or all items if none
+     * have been saved yet).
+     *
+     * @type {Array<Object>}
+     */
+    @tracked workingPinned = A([]);
+
+    constructor(owner, args) {
+        super(owner, args);
+        this._initWorkingState();
+    }
+
+    // ─── Computed ─────────────────────────────────────────────────────────────
+
+    /** Items that are NOT in the working pinned list. */
+    get unpinnedItems() {
+        const pinnedIds = this.workingPinned.map((i) => i.id);
+        return (this.args.allItems ?? []).filter((i) => !pinnedIds.includes(i.id));
+    }
+
+    /** True when the user has reached the maximum allowed pinned items. */
+    get atPinnedLimit() {
+        return this.workingPinned.length >= (this.args.maxVisible ?? 5);
+    }
+
+    // ─── Setup ────────────────────────────────────────────────────────────────
+
+    _initWorkingState() {
+        const { allItems = [], pinnedIds } = this.args;
+
+        if (pinnedIds && pinnedIds.length > 0) {
+            // Restore saved order.
+            const ordered = [];
+            for (const id of pinnedIds) {
+                const item = allItems.find((i) => i.id === id);
+                if (item) ordered.push(item);
+            }
+            this.workingPinned = A(ordered);
+        } else {
+            // Default: first `maxVisible` items are pinned.
+            const cap = this.args.maxVisible ?? 5;
+            this.workingPinned = A(allItems.slice(0, cap));
+        }
+    }
+
+    // ─── Actions ──────────────────────────────────────────────────────────────
+
+    /**
+     * Toggle an item's pinned state.
+     *
+     * @param {Object} item
+     */
+    @action togglePin(item) {
+        const idx = this.workingPinned.findIndex((i) => i.id === item.id);
+        if (idx >= 0) {
+            // Unpin.
+            this.workingPinned.removeAt(idx);
+            // Trigger reactivity.
+            this.workingPinned = A([...this.workingPinned]);
+        } else if (!this.atPinnedLimit) {
+            // Pin.
+            this.workingPinned = A([...this.workingPinned, item]);
+        }
+    }
+
+    /**
+     * Whether a given item is currently in the working pinned list.
+     * Decorated with @action so it can be called from the template.
+     *
+     * @param {Object} item
+     * @returns {boolean}
+     */
+    @action isPinned(item) {
+        return this.workingPinned.some((i) => i.id === item.id);
+    }
+
+    /**
+     * Drag-sort reorder handler for the pinned items list.
+     */
+    @action reorderPinned({ sourceList, sourceIndex, targetList, targetIndex }) {
+        if (sourceList === targetList && sourceIndex === targetIndex) return;
+        const item = sourceList.objectAt(sourceIndex);
+        sourceList.removeAt(sourceIndex);
+        targetList.insertAt(targetIndex, item);
+        this.workingPinned = A([...this.workingPinned]);
+    }
+
+    /**
+     * Confirm and apply the customisation.
+     */
+    @action apply() {
+        const orderedIds = this.workingPinned.map((i) => i.id);
+        if (typeof this.args.onApply === 'function') {
+            this.args.onApply(orderedIds);
+        }
+    }
+
+    /** Discard changes and close the panel. */
+    @action cancel() {
+        if (typeof this.args.onClose === 'function') {
+            this.args.onClose();
+        }
+    }
+
+    /** Reset to default (first `maxVisible` items in universe order). */
+    @action resetToDefault() {
+        const cap = this.args.maxVisible ?? 5;
+        this.workingPinned = A((this.args.allItems ?? []).slice(0, cap));
+    }
+}

package/addon/components/layout/header/smart-nav-menu/dropdown.hbs

@@ -0,0 +1,200 @@
+{{!
+    Layout::Header::SmartNavMenu::Dropdown
+    Phase 2: multi-column card grid with search filter.
+
+    Shortcuts are expanded as independent sibling items in the grid (AWS-style).
+    The JS getter `expandedItems` interleaves parent MenuItems and their
+    shortcut objects so each appears as its own flat card.
+
+    Args:
+      @items            - Array of MenuItem objects to display
+      @top              - Fixed-position top offset (px, from JS)
+      @left             - Fixed-position left offset (px, from JS)
+      @onClose          - Action to close this dropdown
+      @onOpenCustomizer - Action to open the customiser panel
+      @onQuickPin       - Action to pin an item directly from the dropdown
+      @atPinnedLimit    - Boolean: true when the bar is full (pin button hidden)
+
+    NOTE: Route-based cards use <LinkToExternal> with no click handler.
+    The dropdown is closed via the routeDidChange listener in smart-nav-menu.js
+    which sets isMoreOpen = false on every route transition.
+}}
+<div
+    class="snm-dropdown snm-dropdown--wide"
+    style={{this.positionStyle}}
+    role="dialog"
+    aria-label="More extensions"
+>
+    {{! ── Header: title + close ────────────────────────────────────────────── }}
+    <div class="snm-dropdown-header">
+        <span class="snm-dropdown-title">Extensions</span>
+        <button
+            type="button"
+            class="snm-dropdown-close"
+            aria-label="Close"
+            {{on "click" @onClose}}
+        >
+            <FaIcon @icon="xmark" @size="sm" />
+        </button>
+    </div>
+
+    {{! ── Search bar (own row) ────────────────────────────────────────────── }}
+    <div class="snm-dropdown-search-bar">
+        <span class="snm-dropdown-search-icon" aria-hidden="true">
+            <FaIcon @icon="magnifying-glass" @size="xs" />
+        </span>
+        <input
+            type="text"
+            class="snm-dropdown-search-input"
+            placeholder="Search extensions..."
+            value={{this.searchQuery}}
+            aria-label="Search extensions"
+            {{on "input" this.updateSearch}}
+        />
+        {{#if this.searchQuery}}
+            <button
+                type="button"
+                class="snm-dropdown-search-clear"
+                aria-label="Clear search"
+                {{on "click" this.clearSearch}}
+            >
+                <FaIcon @icon="xmark" @size="xs" />
+            </button>
+        {{/if}}
+    </div>
+
+    {{! ── Card grid ───────────────────────────────────────────────────────── }}
+    <div class="snm-dropdown-grid" aria-label="Extension list">
+        {{#if this.hasNoResults}}
+            <div class="snm-dropdown-empty">
+                <FaIcon @icon="magnifying-glass" @size="lg" class="snm-dropdown-empty-icon" />
+                <p class="snm-dropdown-empty-text">
+                    No extensions match
+                    <strong>{{this.searchQuery}}</strong>
+                </p>
+            </div>
+        {{else}}
+            {{#each this.filteredItems as |item|}}
+                {{#if item._isShortcut}}
+                    {{! ── Shortcut sibling card (AWS-style flat item) ─────── }}
+                    <div class="snm-dropdown-card" role="presentation">
+                        <div class="snm-dropdown-card-header">
+                            <LinkToExternal
+                                @route={{item.route}}
+                                id={{concat (dasherize (or item.route item.id "sc")) "-dropdown-card"}}
+                                class="snm-dropdown-card-link"
+                                title={{item.title}}
+                            >
+                                <span class="snm-dropdown-card-icon">
+                                    {{#if item.iconComponent}}
+                                        {{component (lazy-engine-component item.iconComponent) options=item.iconComponentOptions}}
+                                    {{else}}
+                                        <FaIcon @icon={{or item.icon "circle-dot"}} @prefix={{item.iconPrefix}} @size="sm" />
+                                    {{/if}}
+                                </span>
+                                {{! Title row: shortcut name + always-visible muted parent attribution }}
+                                <span class="snm-dropdown-card-title-group">
+                                    <span class="snm-dropdown-card-title">{{item.title}}</span>
+                                    {{#if item._parentTitle}}
+                                        <span class="snm-dropdown-card-parent-label" aria-label="from {{item._parentTitle}}">· {{item._parentTitle}}</span>
+                                    {{/if}}
+                                </span>
+                            </LinkToExternal>
+                            {{#unless @atPinnedLimit}}
+                                <button
+                                    type="button"
+                                    class="snm-dropdown-pin-btn"
+                                    title="Pin to navigation bar"
+                                    aria-label="Pin {{item.title}} to navigation bar"
+                                    {{on "click" (fn @onQuickPin item)}}
+                                >
+                                    <FaIcon @icon="thumbtack" @size="xs" />
+                                </button>
+                            {{/unless}}
+                        </div>
+                        {{#if item.description}}
+                            <p class="snm-dropdown-card-description">{{item.description}}</p>
+                        {{else if item._parentTitle}}
+                            <p class="snm-dropdown-card-description snm-dropdown-card-description--from"><em>from {{item._parentTitle}}</em></p>
+                        {{/if}}
+                    </div>
+                {{else}}
+                    {{! ── Primary extension card ──────────────────────────── }}
+                    <div class="snm-dropdown-card" role="presentation">
+                        <div class="snm-dropdown-card-header">
+                            {{#if item.onClick}}
+                                <a
+                                    href="javascript:;"
+                                    class="snm-dropdown-card-link"
+                                    title={{item.title}}
+                                    {{on "click" (fn this.handleItemClick item)}}
+                                >
+                                    <span class="snm-dropdown-card-icon">
+                                        {{#if item.iconComponent}}
+                                            {{component (lazy-engine-component item.iconComponent) options=item.iconComponentOptions}}
+                                        {{else}}
+                                            <FaIcon @icon={{or item.icon "circle-dot"}} @prefix={{item.iconPrefix}} @size="sm" />
+                                        {{/if}}
+                                    </span>
+                                    <span class="snm-dropdown-card-title-group">
+                                        <span class="snm-dropdown-card-title">{{item.title}}</span>
+                                        {{#if item._parentTitle}}
+                                            <span class="snm-dropdown-card-parent-label" aria-label="from {{item._parentTitle}}">· {{item._parentTitle}}</span>
+                                        {{/if}}
+                                    </span>
+                                </a>
+                            {{else}}
+                                <LinkToExternal
+                                    @route={{item.route}}
+                                    id={{concat (dasherize (or item.route item.id "nav")) "-dropdown-card"}}
+                                    class="snm-dropdown-card-link"
+                                    title={{item.title}}
+                                >
+                                    <span class="snm-dropdown-card-icon">
+                                        {{#if item.iconComponent}}
+                                            {{component (lazy-engine-component item.iconComponent) options=item.iconComponentOptions}}
+                                        {{else}}
+                                            <FaIcon @icon={{or item.icon "circle-dot"}} @prefix={{item.iconPrefix}} @size="sm" />
+                                        {{/if}}
+                                    </span>
+                                    <span class="snm-dropdown-card-title-group">
+                                        <span class="snm-dropdown-card-title">{{item.title}}</span>
+                                        {{#if item._parentTitle}}
+                                            <span class="snm-dropdown-card-parent-label" aria-label="from {{item._parentTitle}}">· {{item._parentTitle}}</span>
+                                        {{/if}}
+                                    </span>
+                                </LinkToExternal>
+                            {{/if}}
+                            {{#unless @atPinnedLimit}}
+                                <button
+                                    type="button"
+                                    class="snm-dropdown-pin-btn"
+                                    title="Pin to navigation bar"
+                                    aria-label="Pin {{item.title}} to navigation bar"
+                                    {{on "click" (fn @onQuickPin item)}}
+                                >
+                                    <FaIcon @icon="thumbtack" @size="xs" />
+                                </button>
+                            {{/unless}}
+                        </div>
+                        {{#if item.description}}
+                            <p class="snm-dropdown-card-description">{{item.description}}</p>
+                        {{/if}}
+                    </div>
+                {{/if}}
+            {{/each}}
+        {{/if}}
+    </div>
+
+    {{! ── Footer ──────────────────────────────────────────────────────────── }}
+    <div class="snm-dropdown-footer">
+        <button
+            type="button"
+            class="snm-dropdown-customise-link"
+            {{on "click" @onOpenCustomizer}}
+        >
+            <FaIcon @icon="sliders" @size="xs" class="mr-1.5" />
+            Customise navigation
+        </button>
+    </div>
+</div>

package/addon/components/layout/header/smart-nav-menu/dropdown.js

@@ -0,0 +1,122 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import { dasherize } from '@ember/string';
+import { isArray } from '@ember/array';
+import { htmlSafe } from '@ember/template';
+
+/**
+ * Layout::Header::SmartNavMenu::Dropdown
+ *
+ * Phase 2: multi-column card grid + search filter.
+ *
+ * Shortcuts are expanded as independent sibling items in the grid (AWS-style).
+ * Each shortcut is normalised into a flat display item with `_isShortcut: true`
+ * so the template can render it with a slightly different visual treatment
+ * (muted style, no pin button).
+ */
+export default class LayoutHeaderSmartNavMenuDropdownComponent extends Component {
+    @tracked searchQuery = '';
+
+    get positionStyle() {
+        const top = this.args.top ?? 0;
+        const left = this.args.left ?? 0;
+        return htmlSafe('top: ' + top + 'px; left: ' + left + 'px;');
+    }
+
+    /**
+     * Expand every MenuItem's shortcuts array into sibling flat items.
+     * The resulting array interleaves parent items and their shortcuts in
+     * registration order, matching the AWS Console pattern.
+     *
+     * Each shortcut is normalised to:
+     *   { title, route, icon, iconPrefix, id, _isShortcut: true, _parentTitle }
+     */
+    get expandedItems() {
+        const items = this.args.items ?? [];
+        const result = [];
+        for (const item of items) {
+            result.push(item);
+            if (isArray(item.shortcuts)) {
+                for (const sc of item.shortcuts) {
+                    const scId = sc.id ?? dasherize(item.id + '-sc-' + sc.title);
+                    result.push({
+                        // ── Identity ────────────────────────────────────────
+                        id: scId,
+                        slug: sc.slug ?? scId,
+                        title: sc.title,
+                        text: sc.text ?? sc.title,
+                        label: sc.label ?? sc.title,
+
+                        // ── Routing ──────────────────────────────────────────
+                        route: sc.route ?? item.route,
+                        queryParams: sc.queryParams ?? {},
+                        routeParams: sc.routeParams ?? [],
+
+                        // ── Icons (full surface) ─────────────────────────────
+                        icon: sc.icon ?? item.icon ?? 'arrow-right',
+                        iconPrefix: sc.iconPrefix ?? item.iconPrefix ?? null,
+                        iconSize: sc.iconSize ?? null,
+                        iconClass: sc.iconClass ?? null,
+                        iconComponent: sc.iconComponent ?? null,
+                        iconComponentOptions: sc.iconComponentOptions ?? {},
+
+                        // ── Metadata ─────────────────────────────────────────
+                        description: sc.description ?? null,
+                        tags: isArray(sc.tags) ? sc.tags : isArray(item.tags) ? item.tags : null,
+
+                        // ── Behaviour ────────────────────────────────────────
+                        onClick: sc.onClick ?? null,
+                        disabled: sc.disabled ?? false,
+
+                        // ── Styling ───────────────────────────────────────────
+                        class: sc.class ?? null,
+
+                        // ── Internal flags ────────────────────────────────────
+                        _isShortcut: true,
+                        _parentTitle: item.title,
+                        _parentId: item.id,
+                    });
+                }
+            }
+        }
+        return result;
+    }
+
+    get filteredItems() {
+        const query = (this.searchQuery || '').trim().toLowerCase();
+        if (!query) {
+            return this.expandedItems;
+        }
+        return this.expandedItems.filter((item) => {
+            if ((item.title || '').toLowerCase().includes(query)) return true;
+            if (item.description && item.description.toLowerCase().includes(query)) return true;
+            if (item._parentTitle && item._parentTitle.toLowerCase().includes(query)) return true;
+            // Match against any of the item's tags
+            if (isArray(item.tags) && item.tags.some((t) => t.toLowerCase().includes(query))) return true;
+            return false;
+        });
+    }
+
+    get hasNoResults() {
+        return this.searchQuery.trim().length > 0 && this.filteredItems.length === 0;
+    }
+
+    @action updateSearch(event) {
+        this.searchQuery = event.target.value;
+    }
+
+    @action clearSearch() {
+        this.searchQuery = '';
+    }
+
+    @action handleItemClick(menuItem, event) {
+        event?.preventDefault();
+        if (menuItem && typeof menuItem.onClick === 'function') {
+            menuItem.onClick(menuItem);
+        }
+        if (typeof this.args.onClose === 'function') {
+            this.args.onClose();
+        }
+    }
+}

package/addon/components/layout/header/smart-nav-menu/item.hbs

@@ -0,0 +1,49 @@
+{{! Layout::Header::SmartNavMenu::Item
+    ─────────────────────────────────────────────────────────────────────────
+    Renders a single extension link in the header bar.
+
+    If the item defines an `onClick` handler it is used directly (for
+    programmatic navigation or custom actions).  Otherwise the item renders
+    as a `<LinkToExternal />` route link — the standard pattern used by the
+    original next-catalog-menu-items implementation.
+
+    Supports icon components (lazy-loaded engine components) or FontAwesome
+    icons, falling back to "circle-dot" if no icon is specified.
+    ─────────────────────────────────────────────────────────────────────────
+}}
+{{#if @item.onClick}}
+    <a
+        href="javascript:;"
+        id={{concat (dasherize (or @item.route @item.id "nav")) "-header-button"}}
+        role="menuitem"
+        class="snm-item next-view-header-item truncate {{@item.class}} {{if this.isActive 'active'}}"
+        title={{@item.title}}
+        {{on "click" @item.onClick}}
+    >
+        <div class="w-6 flex-shrink-0">
+            {{#if @item.iconComponent}}
+                {{component (lazy-engine-component @item.iconComponent) options=@item.iconComponentOptions}}
+            {{else}}
+                <FaIcon @icon={{or @item.icon "circle-dot"}} @prefix={{@item.iconPrefix}} @size="sm" />
+            {{/if}}
+        </div>
+        <span class="truncate">{{@item.title}}</span>
+    </a>
+{{else}}
+    <LinkToExternal
+        @route={{@item.route}}
+        id={{concat (dasherize (or @item.route @item.id "nav")) "-header-button"}}
+        class="snm-item next-view-header-item truncate {{@item.class}} {{if this.isActive 'active'}}"
+        role="menuitem"
+        title={{@item.title}}
+    >
+        <div class="w-6 flex-shrink-0">
+            {{#if @item.iconComponent}}
+                {{component (lazy-engine-component @item.iconComponent) options=@item.iconComponentOptions}}
+            {{else}}
+                <FaIcon @icon={{or @item.icon "circle-dot"}} @prefix={{@item.iconPrefix}} @size="sm" />
+            {{/if}}
+        </div>
+        <span class="truncate">{{@item.title}}</span>
+    </LinkToExternal>
+{{/if}}