@fleetbase/fleetops-engine 0.6.52 → 0.6.54

package/addon/components/layout/fleet-ops-sidebar.js

@@ -2,18 +2,25 @@ import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { inject as service } from '@ember/service';
 import { action } from '@ember/object';
-import FleetListingComponent from './fleet-ops-sidebar/fleet-listing';
-import DriverListingComponent from './fleet-ops-sidebar/driver-listing';
+import isMenuItemActive from '@fleetbase/ember-ui/utils/is-menu-item-active';
+
+const SECTION_REGISTRY_KEYS = {
+    operations: 'universeOperationsMenuItems',
+    management: 'universeManagementMenuItems',
+    maintenance: 'universeMaintenanceMenuItems',
+    connectivity: 'universeConnectivityMenuItems',
+    analytics: 'universeAnalyticsMenuItems',
+    settings: 'universeSettingsMenuItems',
+};
 
 export default class LayoutFleetOpsSidebarComponent extends Component {
     @service universe;
     @service('universe/menu-service') menuService;
-    @service store;
     @service intl;
     @service abilities;
-    @service appCache;
+    @service fetch;
+
     @tracked routePrefix = 'console.fleet-ops.';
-    @tracked menuPanels = [];
     @tracked universeMenuItems = [];
     @tracked universeOperationsMenuItems = [];
     @tracked universeManagementMenuItems = [];
@@ -26,11 +33,210 @@ export default class LayoutFleetOpsSidebarComponent extends Component {
     constructor() {
         super(...arguments);
         this.createMenuItemsFromUniverseRegistry();
-        this.createMenuPanels();
+    }
+
+    get createOrderAction() {
+        return {
+            label: this.intl.t('common.create-new-resource', { resource: this.intl.t('resource.order')?.toLowerCase() }),
+            icon: 'paper-plane',
+            iconPrefix: 'fas',
+            buttonClass: 'fleet-ops-sidebar-primary-action',
+            permission: 'fleet-ops create order',
+            onClick: this.onClickCreateOrder,
+        };
+    }
+
+    get navigationItems() {
+        const coreBranches = [
+            this.createBranch({
+                id: 'operations',
+                label: this.intl.t('menu.operations'),
+                icon: 'circle-nodes',
+                route: 'operations',
+                defaultRoute: 'operations.orders',
+                keywords: ['dispatch', 'orders', 'live map', 'track vehicles', 'drivers online', 'vehicles online'],
+                children: this.operationsItems,
+            }),
+            this.createBranch({
+                id: 'resources',
+                label: this.intl.t('menu.resources'),
+                icon: 'truck',
+                route: 'management',
+                defaultRoute: 'management.index',
+                keywords: ['drivers', 'vehicles', 'fleets', 'contacts', 'places'],
+                children: this.resourcesItems,
+            }),
+            this.createBranch({
+                id: 'maintenance',
+                label: this.intl.t('menu.maintenance'),
+                icon: 'cog',
+                route: 'maintenance',
+                defaultRoute: 'maintenance.index',
+                keywords: ['work orders', 'equipment', 'parts'],
+                children: this.maintenanceItems,
+            }),
+            this.createBranch({
+                id: 'connectivity',
+                label: this.intl.t('menu.connectivity'),
+                icon: 'satellite-dish',
+                route: 'connectivity',
+                defaultRoute: 'connectivity.telematics',
+                keywords: ['telematics', 'fuel integrations', 'devices', 'sensors'],
+                children: this.connectivityItems,
+            }),
+            this.createBranch({
+                id: 'analytics',
+                label: this.intl.t('menu.analytics'),
+                icon: 'chart-line',
+                route: 'analytics',
+                defaultRoute: 'analytics.index',
+                keywords: ['reports', 'metrics'],
+                children: this.analyticsItems,
+            }),
+            this.createBranch({
+                id: 'settings',
+                label: this.intl.t('menu.settings'),
+                icon: 'gear',
+                route: 'settings',
+                defaultRoute: 'settings.index',
+                keywords: ['configuration', 'navigator', 'map', 'routing', 'notifications'],
+                children: this.settingsItems,
+            }),
+        ];
+
+        return [...coreBranches, ...this.registryRootItems, ...this.registryPanelItems].filter((item) => item.children?.length || item.route || item.url || item.onClick);
+    }
+
+    get operationsItems() {
+        return this.withRegistryItems('operations', [
+            this.createItem('menu.orders', 'map-location-dot', 'operations.orders', 'fleet-ops list order', 'fleet-ops see order', [
+                'dashboard',
+                'orders',
+                'dispatch',
+                'tracking',
+                'create order',
+                'live map',
+            ]),
+            this.createItem('menu.orchestrator', 'circle-nodes', 'operations.orchestrator', 'fleet-ops list order', 'fleet-ops see order', ['optimize', 'allocate', 'dispatch']),
+            this.createItem('menu.scheduler', 'calendar-day', 'operations.scheduler', 'fleet-ops list order', 'fleet-ops see order', ['schedule', 'calendar']),
+            this.createItem('menu.order-config', 'diagram-project', 'operations.order-config', 'fleet-ops list order-config', 'fleet-ops see order-config', [
+                'configuration',
+                'fields',
+                'entities',
+            ]),
+            this.createItem('menu.service-rates', 'file-invoice-dollar', 'operations.service-rates', 'fleet-ops list service-rate', 'fleet-ops see service-rate', ['rates', 'pricing']),
+        ]);
+    }
+
+    get resourcesItems() {
+        return this.withRegistryItems('management', [
+            this.createHubItem('Resources Hub', 'layer-group', 'management.index', 'fleet-ops list driver', 'fleet-ops see driver', [
+                'resources hub',
+                'resource dashboard',
+                'resource readiness',
+            ]),
+            this.createItem('menu.drivers', 'id-card', 'management.drivers', 'fleet-ops list driver', 'fleet-ops see driver', ['driver', 'online drivers']),
+            this.createItem('menu.vehicles', 'truck', 'management.vehicles', 'fleet-ops list vehicle', 'fleet-ops see vehicle', ['vehicle', 'track vehicles', 'online vehicles']),
+            this.createItem('menu.fleets', 'user-group', 'management.fleets', 'fleet-ops list fleet', 'fleet-ops see fleet', ['fleet', 'teams']),
+            this.createItem('menu.vendors', 'warehouse', 'management.vendors', 'fleet-ops list vendor', 'fleet-ops see vendor'),
+            this.createItem('menu.contacts', 'address-book', 'management.contacts', 'fleet-ops list contact', 'fleet-ops see contact'),
+            this.createItem('menu.places', 'location-dot', 'management.places', 'fleet-ops list place', 'fleet-ops see place'),
+            this.createItem('menu.fuel-reports', 'gas-pump', 'management.fuel-reports', 'fleet-ops list fuel-report', 'fleet-ops see fuel-report'),
+            this.createItem('menu.fuel-transactions', 'credit-card', 'management.fuel-transactions', 'fleet-ops list fuel-report', 'fleet-ops see fuel-report'),
+            this.createItem('menu.issues', 'triangle-exclamation', 'management.issues', 'fleet-ops list issue', 'fleet-ops see issue'),
+        ]);
+    }
+
+    get maintenanceItems() {
+        return this.withRegistryItems('maintenance', [
+            this.createHubItem('Maintenance Hub', 'wrench', 'maintenance.index', 'fleet-ops list maintenance-schedule', 'fleet-ops see maintenance-schedule', [
+                'maintenance hub',
+                'service readiness',
+                'maintenance control panel',
+            ]),
+            this.createItem('menu.schedules', 'calendar-alt', 'maintenance.schedules', 'fleet-ops list maintenance-schedule', 'fleet-ops see maintenance-schedule'),
+            this.createItem('menu.work-orders', 'clipboard-list', 'maintenance.work-orders', 'fleet-ops list work-order', 'fleet-ops see work-order'),
+            this.createItem('menu.maintenances', 'history', 'maintenance.maintenances', 'fleet-ops list maintenance', 'fleet-ops see maintenance'),
+            this.createItem('menu.equipment', 'trailer', 'maintenance.equipment', 'fleet-ops list equipment', 'fleet-ops see equipment'),
+            this.createItem('menu.parts', 'cog', 'maintenance.parts', 'fleet-ops list part', 'fleet-ops see part'),
+        ]);
+    }
+
+    get connectivityItems() {
+        return this.withRegistryItems('connectivity', [
+            this.createItem('menu.telematics', 'satellite-dish', 'connectivity.telematics', 'fleet-ops list telematic', 'fleet-ops see telematic', ['connectivity hub']),
+            this.createItem('menu.fuel-providers', 'gas-pump', 'connectivity.fuel-providers', 'fleet-ops list fuel-report', 'fleet-ops see fuel-report', ['fuel integrations']),
+            this.createItem('menu.devices', 'hard-drive', 'connectivity.devices', 'fleet-ops list device', 'fleet-ops see device'),
+            this.createItem('menu.sensors', 'temperature-full', 'connectivity.sensors', 'fleet-ops list sensor', 'fleet-ops see sensor'),
+            this.createItem('menu.events', 'stream', 'connectivity.events', 'fleet-ops list device-event', 'fleet-ops see device-event'),
+        ]);
+    }
+
+    get analyticsItems() {
+        return this.withRegistryItems('analytics', [
+            this.createHubItem('Dashboard', 'chart-line', 'analytics.index', 'iam list report', 'fleet-ops see report', ['dashboard', 'fleetops dashboard', 'metrics']),
+            this.createItem('menu.reports', 'file-import', 'analytics.reports', 'iam list report', 'fleet-ops see report'),
+        ]);
+    }
+
+    get settingsItems() {
+        return this.withRegistryItems('settings', [
+            this.createHubItem('Settings Hub', 'sliders', 'settings.index', 'fleet-ops view navigator-settings', 'fleet-ops see navigator-settings', [
+                'settings hub',
+                'configuration dashboard',
+                'setup focus',
+            ]),
+            this.createItem('menu.navigator-app', 'location-arrow', 'settings.navigator-app', 'fleet-ops view navigator-settings', 'fleet-ops see navigator-settings'),
+            this.createItem('menu.map', 'map', 'settings.map', 'fleet-ops view map-settings', 'fleet-ops see map-settings'),
+            this.createItem('menu.payments', 'cash-register', 'settings.payments', 'fleet-ops view payments', 'fleet-ops see payments'),
+            this.createItem('menu.notifications', 'bell', 'settings.notifications', 'fleet-ops view notification-settings', 'fleet-ops see notification-settings'),
+            this.createItem('menu.routing', 'route', 'settings.routing', 'fleet-ops view routing-settings', 'fleet-ops see routing-settings'),
+            this.createItem('menu.orchestrator', 'circle-nodes', 'settings.orchestrator', 'fleet-ops view routing-settings', 'fleet-ops see routing-settings'),
+            this.createItem('menu.scheduling', 'calendar-days', 'settings.scheduling', 'fleet-ops view scheduling-settings', 'fleet-ops see scheduling-settings'),
+            this.createItem('menu.custom-fields', 'pen-to-square', 'settings.custom-fields', 'fleet-ops view custom-field', 'fleet-ops see custom-field'),
+            this.createItem('menu.avatars', 'icons', 'settings.avatars', 'fleet-ops view avatar', 'fleet-ops see avatar'),
+        ]);
+    }
+
+    get registryRootItems() {
+        return this.sortByPriority(this.universeMenuItems.filter((item) => !item.renderComponentInPlace).map((item) => this.registryItem(item)));
+    }
+
+    get registryPanelItems() {
+        return this.sortByPriority(
+            this.universeMenuPanels.map((panel) => {
+                const children = this.sortByPriority((panel.items ?? []).filter((item) => !item.renderComponentInPlace).map((item) => this.registryItem(item)));
+
+                return {
+                    id: panel.id ?? panel.slug ?? panel.title,
+                    label: panel.intl ? this.intl.t(panel.intl) : panel.title,
+                    icon: panel.icon,
+                    visible: panel.visible,
+                    permission: panel.permission,
+                    priority: panel.priority,
+                    keywords: [panel.slug, panel.title, panel.intl].filter(Boolean),
+                    children,
+                };
+            })
+        );
+    }
+
+    get footerRegistryComponents() {
+        const sectionItems = Object.entries(SECTION_REGISTRY_KEYS).reduce((components, [section, propertyName]) => {
+            components[section] = this[propertyName].filter((item) => item.renderComponentInPlace);
+            return components;
+        }, {});
+
+        return {
+            root: this.universeMenuItems.filter((item) => item.renderComponentInPlace),
+            resources: sectionItems.management,
+            ...sectionItems,
+        };
     }
 
     createMenuItemsFromUniverseRegistry() {
         const registeredMenuItems = this.menuService.getMenuItems('engine:fleet-ops');
+
         this.universeMenuPanels = this.menuService.getMenuPanels('engine:fleet-ops');
         this.universeMenuItems = registeredMenuItems.filter((menuItem) => menuItem.section === undefined);
         this.universeOperationsMenuItems = registeredMenuItems.filter((menuItem) => menuItem.section === 'operations');
@@ -41,400 +247,163 @@ export default class LayoutFleetOpsSidebarComponent extends Component {
         this.universeSettingsMenuItems = registeredMenuItems.filter((menuItem) => menuItem.section === 'settings');
     }
 
-    /* eslint-disable no-unused-vars */
-    createMenuPanels() {
-        const operationsItems = [
-            {
-                priority: 0,
-                intl: 'menu.dashboard',
-                title: this.intl.t('menu.dashboard'),
-                icon: 'home',
-                route: 'operations.orders',
-                permission: 'fleet-ops list order',
-                visible: this.abilities.can('fleet-ops see order'),
-            },
-            {
-                priority: 1,
-                intl: 'menu.orchestrator',
-                title: this.intl.t('menu.orchestrator'),
-                icon: 'circle-nodes',
-                route: 'operations.orchestrator',
-                permission: 'fleet-ops list order',
-                visible: this.abilities.can('fleet-ops see order'),
-            },
-            {
-                priority: 2,
-                intl: 'menu.scheduler',
-                title: this.intl.t('menu.scheduler'),
-                icon: 'calendar-day',
-                route: 'operations.scheduler',
-                permission: 'fleet-ops list order',
-                visible: this.abilities.can('fleet-ops see order'),
-            },
-            {
-                priority: 3,
-                intl: 'menu.order-config',
-                title: this.intl.t('menu.order-config'),
-                icon: 'diagram-project',
-                route: 'operations.order-config',
-                permission: 'fleet-ops list order-config',
-                visible: this.abilities.can('fleet-ops see order-config'),
-            },
-            {
-                priority: 4,
-                intl: 'menu.service-rates',
-                title: this.intl.t('menu.service-rates'),
-                icon: 'file-invoice-dollar',
-                route: 'operations.service-rates',
-                permission: 'fleet-ops list service-rate',
-                visible: this.abilities.can('fleet-ops see service-rate'),
-            },
-            ...(this.universeOperationsMenuItems ?? []).map((item) => ({ ...item, _virtual: true })),
-        ].sort((a, b) => (a.priority ?? 0) - (b.priority ?? 0));
-
-        const resourcesItems = [
-            {
-                priority: 0,
-                intl: 'menu.drivers',
-                title: this.intl.t('menu.drivers'),
-                icon: 'id-card',
-                route: 'management.drivers',
-                renderComponentInPlace: true,
-                component: DriverListingComponent,
-                permission: 'fleet-ops list driver',
-                visible: this.abilities.can('fleet-ops see driver'),
-            },
-            {
-                priority: 1,
-                intl: 'menu.vehicles',
-                title: this.intl.t('menu.vehicles'),
-                icon: 'truck',
-                route: 'management.vehicles',
-                permission: 'fleet-ops list vehicle',
-                visible: this.abilities.can('fleet-ops see vehicle'),
-            },
-            {
-                priority: 2,
-                intl: 'menu.fleets',
-                title: this.intl.t('menu.fleets'),
-                icon: 'user-group',
-                route: 'management.fleets',
-                renderComponentInPlace: true,
-                component: FleetListingComponent,
-                permission: 'fleet-ops list fleet',
-                visible: this.abilities.can('fleet-ops see fleet'),
-            },
-            {
-                priority: 3,
-                intl: 'menu.vendors',
-                title: this.intl.t('menu.vendors'),
-                icon: 'warehouse',
-                route: 'management.vendors',
-                permission: 'fleet-ops list vendor',
-                visible: this.abilities.can('fleet-ops see vendor'),
-            },
-            {
-                priority: 4,
-                intl: 'menu.contacts',
-                title: this.intl.t('menu.contacts'),
-                icon: 'address-book',
-                route: 'management.contacts',
-                permission: 'fleet-ops list contact',
-                visible: this.abilities.can('fleet-ops see contact'),
-            },
-            {
-                priority: 5,
-                intl: 'menu.places',
-                title: this.intl.t('menu.places'),
-                icon: 'location-dot',
-                route: 'management.places',
-                permission: 'fleet-ops list place',
-                visible: this.abilities.can('fleet-ops see place'),
-            },
-            {
-                priority: 6,
-                intl: 'menu.fuel-reports',
-                title: this.intl.t('menu.fuel-reports'),
-                icon: 'gas-pump',
-                route: 'management.fuel-reports',
-                permission: 'fleet-ops list fuel-report',
-                visible: this.abilities.can('fleet-ops see fuel-report'),
-            },
-            {
-                priority: 7,
-                intl: 'menu.fuel-transactions',
-                title: this.intl.t('menu.fuel-transactions'),
-                icon: 'credit-card',
-                route: 'management.fuel-transactions',
-                permission: 'fleet-ops list fuel-report',
-                visible: this.abilities.can('fleet-ops see fuel-report'),
-            },
-            {
-                priority: 8,
-                intl: 'menu.issues',
-                title: this.intl.t('menu.issues'),
-                icon: 'triangle-exclamation',
-                route: 'management.issues',
-                permission: 'fleet-ops list issue',
-                visible: this.abilities.can('fleet-ops see issue'),
-            },
-            ...(this.universeManagementMenuItems ?? []).map((item) => ({ ...item, _virtual: true })),
-        ].sort((a, b) => (a.priority ?? 0) - (b.priority ?? 0));
-
-        const connectivityItems = [
-            {
-                priority: 0,
-                intl: 'menu.telematics',
-                title: this.intl.t('menu.telematics'),
-                icon: 'satellite-dish',
-                route: 'connectivity.telematics',
-                permission: 'fleet-ops list telematic',
-                visible: this.abilities.can('fleet-ops see telematic'),
-            },
-            {
-                priority: 1,
-                intl: 'menu.fuel-providers',
-                title: this.intl.t('menu.fuel-providers'),
-                icon: 'gas-pump',
-                route: 'connectivity.fuel-providers',
-                permission: 'fleet-ops list fuel-report',
-                visible: this.abilities.can('fleet-ops see fuel-report'),
-            },
-            {
-                priority: 2,
-                intl: 'menu.devices',
-                title: this.intl.t('menu.devices'),
-                icon: 'hard-drive',
-                route: 'connectivity.devices',
-                permission: 'fleet-ops list device',
-                visible: this.abilities.can('fleet-ops see device'),
-            },
-            {
-                priority: 3,
-                intl: 'menu.sensors',
-                title: this.intl.t('menu.sensors'),
-                icon: 'temperature-full',
-                route: 'connectivity.sensors',
-                permission: 'fleet-ops list sensor',
-                visible: this.abilities.can('fleet-ops see sensor'),
-            },
-            {
-                priority: 4,
-                intl: 'menu.events',
-                title: this.intl.t('menu.events'),
-                icon: 'stream',
-                route: 'connectivity.events',
-                permission: 'fleet-ops list device-event',
-                visible: this.abilities.can('fleet-ops see device-event'),
-            },
-            ...(this.universeConnectivityMenuItems ?? []).map((item) => ({ ...item, _virtual: true })),
-        ].sort((a, b) => (a.priority ?? 0) - (b.priority ?? 0));
-
-        const maintenanceItems = [
-            {
-                priority: 0,
-                intl: 'menu.schedules',
-                title: this.intl.t('menu.schedules'),
-                icon: 'calendar-alt',
-                route: 'maintenance.schedules',
-                permission: 'fleet-ops list maintenance-schedule',
-                visible: this.abilities.can('fleet-ops see maintenance-schedule'),
-            },
-            {
-                priority: 1,
-                intl: 'menu.work-orders',
-                title: this.intl.t('menu.work-orders'),
-                icon: 'clipboard-list',
-                route: 'maintenance.work-orders',
-                permission: 'fleet-ops list work-order',
-                visible: this.abilities.can('fleet-ops see work-order'),
-            },
-            {
-                priority: 2,
-                intl: 'menu.maintenances',
-                title: this.intl.t('menu.maintenances'),
-                icon: 'history',
-                route: 'maintenance.maintenances',
-                permission: 'fleet-ops list maintenance',
-                visible: this.abilities.can('fleet-ops see maintenance'),
-            },
-            {
-                priority: 3,
-                intl: 'menu.equipment',
-                title: this.intl.t('menu.equipment'),
-                icon: 'trailer',
-                route: 'maintenance.equipment',
-                permission: 'fleet-ops list equipment',
-                visible: this.abilities.can('fleet-ops see equipment'),
-            },
-            {
-                priority: 4,
-                intl: 'menu.parts',
-                title: this.intl.t('menu.parts'),
-                icon: 'cog',
-                route: 'maintenance.parts',
-                permission: 'fleet-ops list part',
-                visible: this.abilities.can('fleet-ops see part'),
-            },
-            ...(this.universeMaintenanceMenuItems ?? []).map((item) => ({ ...item, _virtual: true })),
-        ].sort((a, b) => (a.priority ?? 0) - (b.priority ?? 0));
-
-        const analyticsItems = [
-            {
-                priority: 0,
-                intl: 'menu.reports',
-                title: this.intl.t('menu.reports'),
-                icon: 'file-import',
-                route: 'analytics.reports',
-                permission: 'iam list report',
-                visible: this.abilities.can('fleet-ops see report'),
-            },
-            ...(this.universeAnalyticsMenuItems ?? []).map((item) => ({ ...item, _virtual: true })),
-        ].sort((a, b) => (a.priority ?? 0) - (b.priority ?? 0));
-
-        const settingsItems = [
-            {
-                priority: 0,
-                intl: 'menu.navigator-app',
-                title: this.intl.t('menu.navigator-app'),
-                icon: 'location-arrow',
-                route: 'settings.navigator-app',
-                permission: 'fleet-ops view navigator-settings',
-                visible: this.abilities.can('fleet-ops see navigator-settings'),
-            },
-            {
-                priority: 1,
-                intl: 'menu.payments',
-                title: this.intl.t('menu.payments'),
-                icon: 'cash-register',
-                route: 'settings.payments',
-                permission: 'fleet-ops view payments',
-                visible: this.abilities.can('fleet-ops see payments'),
-            },
-            {
-                priority: 2,
-                intl: 'menu.notifications',
-                title: this.intl.t('menu.notifications'),
-                icon: 'bell',
-                route: 'settings.notifications',
-                permission: 'fleet-ops view notification-settings',
-                visible: this.abilities.can('fleet-ops see notification-settings'),
-            },
-            {
-                priority: 3,
-                intl: 'menu.routing',
-                title: this.intl.t('menu.routing'),
-                icon: 'route',
-                route: 'settings.routing',
-                permission: 'fleet-ops view routing-settings',
-                visible: this.abilities.can('fleet-ops see routing-settings'),
-            },
-            {
-                intl: 'menu.map',
-                title: this.intl.t('menu.map'),
-                icon: 'map',
-                route: 'settings.map',
-                permission: 'fleet-ops view map-settings',
-                visible: this.abilities.can('fleet-ops see map-settings'),
-            },
-            {
-                priority: 4,
-                intl: 'menu.orchestrator',
-                title: this.intl.t('menu.orchestrator'),
-                icon: 'circle-nodes',
-                route: 'settings.orchestrator',
-                permission: 'fleet-ops view routing-settings',
-                visible: this.abilities.can('fleet-ops see routing-settings'),
-            },
-            {
-                priority: 5,
-                intl: 'menu.scheduling',
-                title: this.intl.t('menu.scheduling'),
-                icon: 'calendar-days',
-                route: 'settings.scheduling',
-                permission: 'fleet-ops view scheduling-settings',
-                visible: this.abilities.can('fleet-ops see scheduling-settings'),
-            },
-            {
-                priority: 6,
-                intl: 'menu.custom-fields',
-                title: this.intl.t('menu.custom-fields'),
-                icon: 'rectangle-list',
-                route: 'settings.custom-fields',
-                permission: 'fleet-ops view custom-field',
-                visible: this.abilities.can('fleet-ops see custom-field'),
-            },
-            {
-                priority: 7,
-                intl: 'menu.avatars',
-                title: this.intl.t('menu.avatars'),
-                icon: 'icons',
-                route: 'settings.avatars',
-                permission: 'fleet-ops view avatar',
-                visible: this.abilities.can('fleet-ops see avatar'),
-            },
-            ...(this.universeSettingsMenuItems ?? []).map((item) => ({ ...item, _virtual: true })),
-        ].sort((a, b) => (a.priority ?? 0) - (b.priority ?? 0));
-
-        const createPanel = (intl, routePrefix, items = [], options = {}) => ({
-            intl,
-            title: this.intl.t(intl),
-            routePrefix,
-            open: options.open ?? true,
-            items,
-            onToggle: options.onToggle,
-        });
-
-        this.menuPanels = this.removeEmptyMenuPanels([
-            createPanel('menu.operations', 'operations', operationsItems, {
-                open: this.appCache.get('fleet-ops:sidebar:operations:open', true),
-                onToggle: (open) => this.appCache.set('fleet-ops:sidebar:operations:open', open),
-            }),
-            createPanel('menu.resources', 'management', resourcesItems, {
-                open: this.appCache.get('fleet-ops:sidebar:management:open', true),
-                onToggle: (open) => this.appCache.set('fleet-ops:sidebar:management:open', open),
-            }),
-            createPanel('menu.maintenance', 'maintenance', maintenanceItems, {
-                open: this.appCache.get('fleet-ops:sidebar:maintenance:open', false),
-                onToggle: (open) => this.appCache.set('fleet-ops:sidebar:maintenance:open', open),
-            }),
-            createPanel('menu.connectivity', 'connectivity', connectivityItems, {
-                open: this.appCache.get('fleet-ops:sidebar:connectivity:open', false),
-                onToggle: (open) => this.appCache.set('fleet-ops:sidebar:connectivity:open', open),
-            }),
-            createPanel('menu.analytics', 'analytics', analyticsItems, {
-                open: this.appCache.get('fleet-ops:sidebar:analytics:open', false),
-                onToggle: (open) => this.appCache.set('fleet-ops:sidebar:analytics:open', open),
-            }),
-            createPanel('menu.settings', 'settings', settingsItems, {
-                open: this.appCache.get('fleet-ops:sidebar:settings:open', true),
-                onToggle: (open) => this.appCache.set('fleet-ops:sidebar:settings:open', open),
-            }),
-        ]);
+    createBranch({ id, label, icon, route, defaultRoute, children, keywords = [] }) {
+        return {
+            id,
+            label,
+            icon,
+            route: this.fullRoute(route),
+            defaultRoute: this.fullRoute(defaultRoute),
+            children: children.filter((item) => item.visible !== false),
+            keywords,
+        };
     }
 
-    /**
-     * Action handler for creating an order.
-     */
-    @action onClickCreateOrder() {
-        const { onClickCreateOrder } = this.args;
+    createItem(intl, icon, route, permission, ability, keywords = []) {
+        return {
+            priority: this.defaultPriorityForRoute(route),
+            label: this.intl.t(intl),
+            description: this.intl.t(intl),
+            icon,
+            route: this.fullRoute(route),
+            permission,
+            visible: this.abilities.can(ability),
+            keywords: [intl, route, ...keywords].filter(Boolean),
+        };
+    }
+
+    createHubItem(label, icon, route, permission, ability, keywords = []) {
+        return {
+            pinnedFirst: true,
+            priority: this.defaultPriorityForRoute(route),
+            label,
+            description: label,
+            icon,
+            route: this.fullRoute(route),
+            permission,
+            visible: this.abilities.can(ability),
+            keywords: [label, route, ...keywords].filter(Boolean),
+        };
+    }
+
+    registryItem(menuItem) {
+        const registryMenuItem = {
+            ...menuItem,
+            _virtual: true,
+            label: menuItem.intl ? this.intl.t(menuItem.intl) : (menuItem.title ?? menuItem.label),
+            description: menuItem.description,
+            icon: menuItem.icon,
+            iconPrefix: menuItem.iconPrefix,
+            permission: menuItem.permission,
+            visible: menuItem.visible,
+            keywords: [menuItem.slug, menuItem.view, menuItem.section, menuItem.title, menuItem.label, menuItem.intl, ...(menuItem.keywords ?? [])].filter(Boolean),
+            activeWhen: () => isMenuItemActive(menuItem.section, menuItem.slug, menuItem.view),
+        };
+
+        registryMenuItem.onClick = () => this.universe.transitionMenuItem(`${this.routePrefix}virtual`, registryMenuItem);
+
+        return registryMenuItem;
+    }
 
-        if (typeof onClickCreateOrder === 'function') {
-            onClickCreateOrder();
+    withRegistryItems(section, items) {
+        const registryProperty = SECTION_REGISTRY_KEYS[section];
+        const registryItems = (this[registryProperty] ?? []).filter((item) => !item.renderComponentInPlace).map((item) => this.registryItem(item));
+
+        return this.sortByPriority([...items, ...registryItems]);
+    }
+
+    sortByPriority(items = []) {
+        return [...items]
+            .map((item, index) => ({ item, index }))
+            .sort((a, b) => {
+                if (a.item.pinnedFirst !== b.item.pinnedFirst) {
+                    return a.item.pinnedFirst ? -1 : 1;
+                }
+
+                const priorityOrder = (a.item.priority ?? 0) - (b.item.priority ?? 0);
+
+                if (priorityOrder !== 0) {
+                    return priorityOrder;
+                }
+
+                return a.index - b.index;
+            })
+            .map(({ item }) => item);
+    }
+
+    defaultPriorityForRoute(route) {
+        const priorities = {
+            'operations.orders': 0,
+            'operations.orchestrator': 1,
+            'operations.scheduler': 2,
+            'operations.order-config': 3,
+            'operations.service-rates': 4,
+            'management.index': 0,
+            'management.drivers': 1,
+            'management.vehicles': 2,
+            'management.fleets': 3,
+            'management.vendors': 4,
+            'management.contacts': 5,
+            'management.places': 6,
+            'management.fuel-reports': 7,
+            'management.fuel-transactions': 8,
+            'management.issues': 9,
+            'maintenance.index': 0,
+            'maintenance.schedules': 1,
+            'maintenance.work-orders': 2,
+            'maintenance.maintenances': 3,
+            'maintenance.equipment': 4,
+            'maintenance.parts': 5,
+            'connectivity.telematics': 0,
+            'connectivity.fuel-providers': 1,
+            'connectivity.devices': 2,
+            'connectivity.sensors': 3,
+            'connectivity.events': 4,
+            'analytics.index': 0,
+            'analytics.reports': 1,
+            'settings.index': 0,
+            'settings.navigator-app': 1,
+            'settings.map': 2,
+            'settings.payments': 3,
+            'settings.notifications': 4,
+            'settings.routing': 5,
+            'settings.orchestrator': 6,
+            'settings.scheduling': 7,
+            'settings.custom-fields': 8,
+            'settings.avatars': 9,
+        };
+
+        return priorities[route] ?? 0;
+    }
+
+    fullRoute(route) {
+        if (!route || route.startsWith('console.')) {
+            return route;
+        }
+
+        return `${this.routePrefix}${route}`;
+    }
+
+    @action onClickCreateOrder() {
+        if (typeof this.args.onClickCreateOrder === 'function') {
+            this.args.onClickCreateOrder();
         }
     }
 
-    /**
-     * Filters menuPanels, leaving only menuPanels with visible items
-     *
-     * @param {Array} [menuPanels=[]]
-     * @return {Array}
-     * @memberof LayoutFleetOpsSidebarComponent
-     */
-    removeEmptyMenuPanels(menuPanels = []) {
-        return menuPanels.filter((menuPanel) => {
-            const visibleItems = menuPanel.items.filter((item) => item.visible);
-            return visibleItems.length > 0;
-        });
+    @action
+    async searchNavigation({ query, limit = 12 }) {
+        const trimmedQuery = query?.trim();
+
+        if (!trimmedQuery) {
+            return [];
+        }
+
+        try {
+            const response = await this.fetch.get('search', { query: trimmedQuery, limit }, { namespace: 'int/v1' });
+
+            return response.results ?? [];
+        } catch (_) {
+            return [];
+        }
     }
 }