@fleetbase/ember-ui 0.3.21 → 0.3.22

package/addon/components/layout/header.hbs

@@ -7,27 +7,22 @@
             <Layout::Header::SidebarToggle class="mr-2" @onToggle={{@onSidebarToggle}} @disabled={{not @sidebarToggleEnabled}} />
         {{/if}}
         {{#unless (media "isMobile")}}
-            <div role="menu" class="next-catalog-menu-items flex mr-4">
-                {{#each this.menuItems as |menuItem|}}
-                    <LinkToExternal
-                        @route={{menuItem.route}}
-                        id={{concat (dasherize menuItem.route) "-header-button"}}
-                        class="next-view-header-item truncate {{menuItem.class}}"
-                        role="menuitem"
-                    >
-                        <div class="w-6">
-                            {{#if menuItem.iconComponent}}
-                                {{component (lazy-engine-component menuItem.iconComponent) options=menuItem.iconComponentOptions}}
-                            {{else}}
-                                <FaIcon @icon={{menuItem.icon}} @prefix={{menuItem.iconPrefix}} @size="sm" />
-                            {{/if}}
-                        </div>
-                        <div>
-                            <span>{{menuItem.title}}</span>
-                        </div>
-                    </LinkToExternal>
-                {{/each}}
-            </div>
+            {{!--
+                SmartNavMenu replaces the static `next-catalog-menu-items` div.
+                It implements the Priority+ overflow pattern: up to `@maxVisible`
+                (default 5) extensions are shown inline; the rest collapse into a
+                "More" dropdown.  A gear icon opens the customiser panel where
+                users can pin and reorder their favourite extensions.
+
+                Pass `@maxVisible={{n}}` to override the default cap of 5.
+                Pass `@mutateMenuItems={{fn}}` to mutate items before rendering
+                (same contract as the previous static implementation).
+            --}}
+            <Layout::Header::SmartNavMenu
+                class="next-catalog-menu-items mr-4"
+                @maxVisible={{or @maxVisibleNavItems 5}}
+                @mutateMenuItems={{@mutateMenuItems}}
+            />
         {{/unless}}
         <div id="view-header-left-content-a"></div>
         {{yield}}

package/addon/components/layout/header.js

@@ -22,41 +22,18 @@ export default class LayoutHeaderComponent extends Component {
     @service abilities;
     @service fetch;
     @tracked company;
-    @tracked menuItems = [];
     @tracked organizationMenuItems = [];
     @tracked userMenuItems = [];
     @tracked extensions = [];
 
-    constructor(owner, { menuItems = [], organizationMenuItems = [], userMenuItems = [] }) {
+    constructor(owner, { organizationMenuItems = [], userMenuItems = [] }) {
         super(...arguments);
         this.extensions = getOwner(this).application.extensions ?? [];
         this.company = this.currentUser.getCompany();
-        this.menuItems = this.mergeMenuItems(menuItems);
         this.organizationMenuItems = this.mergeOrganizationMenuItems(organizationMenuItems);
         this.userMenuItems = this.mergeUserMenuItems(userMenuItems);
     }
 
-    mergeMenuItems(menuItems = []) {
-        const headerMenuItems = this.universe.headerMenuItems;
-        const visibleMenuItems = [];
-        for (let i = 0; i < headerMenuItems.length; i++) {
-            const menuItem = headerMenuItems[i];
-            if (this.abilities.can(`${menuItem.id} see extension`)) {
-                visibleMenuItems.pushObject(menuItem);
-            }
-        }
-
-        // Merge additionals
-        visibleMenuItems.pushObjects(menuItems);
-
-        // Callback to allow mutation of menu items
-        if (typeof this.args.mutateMenuItems === 'function') {
-            this.args.mutateMenuItems(menuItems);
-        }
-
-        return visibleMenuItems;
-    }
-
     mergeOrganizationMenuItems(organizationMenuItems = []) {
         // Prepare menuItems
         const menuItems = [

package/addon/styles/addon.css

@@ -52,6 +52,7 @@
 @import 'components/report-builder.css';
 @import 'components/query-builder.css';
 @import 'components/activity-log.css';
+@import 'components/smart-nav-menu.css';
 
 /** Third party */
 @import "ember-basic-dropdown/vendor/ember-basic-dropdown.css";