@navette-js/panels 1.0.0-beta.2 → 1.0.0-beta.4

package/lib/notifications.d.ts

@@ -3,6 +3,13 @@ export type NotificationActionData = {
     label: string;
     url: string | null;
     openUrlInNewTab: boolean;
+    close?: boolean;
+    dispatch?: {
+        event: string;
+        data: Record<string, unknown>;
+    } | null;
+    color?: string | null;
+    button?: boolean;
 };
 export type NotificationData = {
     id: string;
@@ -40,11 +47,22 @@ export declare class Notification {
     iconColor(color: string): this;
     duration(ms: number): this;
     persistent(): this;
-    /** Links shown under the text. Only displayed in the database notifications panel. */
+    /**
+     * Actions under the text: links (`url`), or buttons that `close` the notification and/or `dispatch` a Livewire event
+     * (`{ event: 'undoDelete', data: { id: 5 } }`). `button: true` renders a button instead of a link. Buttons are only shown in
+     * flash notifications; the database notifications panel shows the links.
+     */
     actions(actions: {
         label: string;
         url?: string | null;
         openUrlInNewTab?: boolean;
+        close?: boolean;
+        dispatch?: {
+            event: string;
+            data?: Record<string, unknown>;
+        } | null;
+        color?: string | null;
+        button?: boolean;
     }[]): this;
     getData(): NotificationData;
     /** Stores the notification for this user (panel bell): `await Notification.make()….sendToDatabase(panel.getDatabaseNotifications(), user.id)`. Does nothing without a store. */
@@ -52,7 +70,7 @@ export declare class Notification {
     /** Queues the notification for the browser of the current request. */
     send(): this;
 }
-/** Renders a flash notification (no date, actions or inline mode). Title and body are escaped. */
+/** Renders a flash notification (no date or inline mode). Title, body and action labels are escaped. */
 export declare function renderNotification(n: NotificationData): string;
 /** Container component for flash notifications. */
 export declare class Notifications extends Component {

package/lib/notifications.js

@@ -53,8 +53,24 @@ export class Notification {
     iconColor(color) { this.data.iconColor = color; return this; }
     duration(ms) { this.data.duration = ms; return this; }
     persistent() { this.data.duration = 'persistent'; return this; }
-    /** Links shown under the text. Only displayed in the database notifications panel. */
-    actions(actions) { this.data.actions = actions.slice(0, 10).map((action) => ({ label: String(action.label), url: action.url ?? null, openUrlInNewTab: action.openUrlInNewTab === true })); return this; }
+    /**
+     * Actions under the text: links (`url`), or buttons that `close` the notification and/or `dispatch` a Livewire event
+     * (`{ event: 'undoDelete', data: { id: 5 } }`). `button: true` renders a button instead of a link. Buttons are only shown in
+     * flash notifications; the database notifications panel shows the links.
+     */
+    actions(actions) {
+        this.data.actions = actions.slice(0, 10).map((action) => {
+            const event = action.dispatch?.event;
+            if (event !== undefined && !/^[A-Za-z0-9_.:-]{1,100}$/.test(event))
+                throw new Error(`Invalid notification event name: ${event}`);
+            return {
+                label: String(action.label), url: action.url ?? null, openUrlInNewTab: action.openUrlInNewTab === true, close: action.close === true,
+                dispatch: event ? { event, data: action.dispatch?.data ?? {} } : null,
+                color: action.color && /^[a-z]+$/.test(action.color) ? action.color : null, button: action.button === true,
+            };
+        });
+        return this;
+    }
     getData() { return { ...this.data }; }
     /** Stores the notification for this user (panel bell): `await Notification.make()….sendToDatabase(panel.getDatabaseNotifications(), user.id)`. Does nothing without a store. */
     async sendToDatabase(store, user) { if (store)
@@ -68,7 +84,21 @@ export class Notification {
         return this;
     }
 }
-/** Renders a flash notification (no date, actions or inline mode). Title and body are escaped. */
+/** Actions of a notification: links (only local or http(s) URLs) and buttons closing it or dispatching a Livewire event. */
+function notificationActionsHtml(n) {
+    const safeUrl = (url) => typeof url === 'string' && /^(\/(?!\/)|https?:\/\/)/.test(url);
+    const items = (n.actions ?? []).filter((action) => action.label !== '' && (safeUrl(action.url) || action.close || action.dispatch)).map((action) => {
+        const color = action.color ?? 'primary';
+        const classes = action.button ? `fi-ac-btn-action fi-btn fi-size-sm` : `fi-ac-link-action fi-link fi-size-sm fi-color fi-color-${color} fi-text-color-600 dark:fi-text-color-400`;
+        const label = action.button ? e(action.label) : `<span class="fi-link-label">${e(action.label)}</span>`;
+        const clicks = [action.dispatch ? `Livewire.dispatch(${js(action.dispatch.event)}, ${js(action.dispatch.data)})` : null, action.close ? 'close()' : null].filter(Boolean).join('; ');
+        if (safeUrl(action.url))
+            return `<a href="${e(action.url)}"${action.openUrlInNewTab ? ' target="_blank" rel="noopener noreferrer"' : ''}${clicks ? ` x-on:click="${e(clicks)}"` : ''} class="${classes}">${label}</a>`;
+        return `<button type="button" x-on:click="${e(clicks)}" class="${classes}">${label}</button>`;
+    });
+    return items.length ? `<div class="fi-ac fi-no-notification-actions">${items.join('')}</div>` : '';
+}
+/** Renders a flash notification (no date or inline mode). Title, body and action labels are escaped. */
 export function renderNotification(n) {
     const closeLabel = t('filament-notifications::notification.actions.close.label');
     const attributes = new Attributes()
@@ -77,7 +107,7 @@ export function renderNotification(n) {
     const iconName = n.icon ?? (n.status ? STATUS_ICON[n.status] : null);
     const iconColor = n.iconColor ?? n.status;
     const iconHtml = iconName ? icon(iconName, { size: 'lg', attributes: new Attributes().class([...(iconColor && iconColor !== 'gray' ? ['fi-color', `fi-color-${iconColor}`] : []), 'fi-no-notification-icon']) }) : '';
-    return `<div x-data="notificationComponent({ notification: ${e(js({ id: n.id, duration: n.duration }))} })" x-transition:enter-start="fi-transition-enter-start" x-transition:enter-end="fi-transition-enter-end" x-transition:leave-start="fi-transition-leave-start" x-transition:leave-end="fi-transition-leave-end" x-on:mouseenter="pauseDuration('hover')" x-on:mouseleave="resumeDuration('hover')" x-on:focusin="handleFocusIn($event)" x-on:focusout="handleFocusOut($event)" x-on:keydown.escape="handleEscape($event)" ${attributes.toHtml().replace(/"if \(\$event\.detail\.id == '([^']*)'\) close\(\)"/, (_m, id) => `"if ($event.detail.id == '${id}') close()"`)}>${iconHtml}<div class="fi-no-notification-main">${n.title !== null || n.body !== null ? `<div class="fi-no-notification-text">${n.title !== null ? `<h3 class="fi-no-notification-title">${e(n.title)}</h3>` : ''}${n.body !== null ? `<div class="fi-no-notification-body">${e(n.body)}</div>` : ''}</div>` : ''}</div><button type="button" x-on:click="dismiss()" aria-label="${e(closeLabel)}" title="${e(closeLabel)}" class="fi-icon-btn fi-no-notification-close-btn">${icon('m-x-mark')}</button></div>`;
+    return `<div x-data="notificationComponent({ notification: ${e(js({ id: n.id, duration: n.duration }))} })" x-transition:enter-start="fi-transition-enter-start" x-transition:enter-end="fi-transition-enter-end" x-transition:leave-start="fi-transition-leave-start" x-transition:leave-end="fi-transition-leave-end" x-on:mouseenter="pauseDuration('hover')" x-on:mouseleave="resumeDuration('hover')" x-on:focusin="handleFocusIn($event)" x-on:focusout="handleFocusOut($event)" x-on:keydown.escape="handleEscape($event)" ${attributes.toHtml().replace(/"if \(\$event\.detail\.id == '([^']*)'\) close\(\)"/, (_m, id) => `"if ($event.detail.id == '${id}') close()"`)}>${iconHtml}<div class="fi-no-notification-main">${n.title !== null || n.body !== null ? `<div class="fi-no-notification-text">${n.title !== null ? `<h3 class="fi-no-notification-title">${e(n.title)}</h3>` : ''}${n.body !== null ? `<div class="fi-no-notification-body">${e(n.body)}</div>` : ''}</div>` : ''}${notificationActionsHtml(n)}</div><button type="button" x-on:click="dismiss()" aria-label="${e(closeLabel)}" title="${e(closeLabel)}" class="fi-icon-btn fi-no-notification-close-btn">${icon('m-x-mark')}</button></div>`;
 }
 /** Container component for flash notifications. */
 export class Notifications extends Component {

package/lib/session-store.d.ts

@@ -0,0 +1,21 @@
+/** Storage of small per-session values. Implement it to keep them in a database or a cache shared by several processes. */
+export interface SessionStore {
+    get(session: string, key: string): unknown | Promise<unknown>;
+    set(session: string, key: string, value: unknown): void | Promise<void>;
+}
+/**
+ * In-memory store: values are lost when the process restarts and are not shared between processes.
+ * Sessions idle for longer than `ttl` are dropped, and the oldest sessions go first beyond `maxSessions`.
+ */
+export declare class MemorySessionStore implements SessionStore {
+    private sessions;
+    private readonly options;
+    constructor(options?: {
+        ttl?: number;
+        maxSessions?: number;
+        maxValueLength?: number;
+    });
+    private get ttl();
+    get(session: string, key: string): unknown;
+    set(session: string, key: string, value: unknown): void;
+}

package/lib/session-store.js

@@ -0,0 +1,35 @@
+// Per-browser session data (persisted table filters, search and sort). The default store keeps it in memory.
+/**
+ * In-memory store: values are lost when the process restarts and are not shared between processes.
+ * Sessions idle for longer than `ttl` are dropped, and the oldest sessions go first beyond `maxSessions`.
+ */
+export class MemorySessionStore {
+    sessions = new Map();
+    options;
+    constructor(options = {}) { this.options = options; }
+    get ttl() { return this.options.ttl ?? 12 * 60 * 60 * 1000; }
+    get(session, key) {
+        const entry = this.sessions.get(session);
+        if (!entry || Date.now() - entry.at > this.ttl) {
+            this.sessions.delete(session);
+            return undefined;
+        }
+        const raw = entry.values.get(key);
+        return raw === undefined ? undefined : JSON.parse(raw);
+    }
+    set(session, key, value) {
+        const raw = JSON.stringify(value ?? null);
+        // Values come from the browser: an oversized one is not kept.
+        if (raw.length > (this.options.maxValueLength ?? 64 * 1024))
+            return;
+        const entry = this.sessions.get(session) ?? { at: Date.now(), values: new Map() };
+        entry.at = Date.now();
+        entry.values.set(key, raw);
+        // Most recently used last: re-inserting moves the session to the end.
+        this.sessions.delete(session);
+        this.sessions.set(session, entry);
+        const max = this.options.maxSessions ?? 10000;
+        while (this.sessions.size > max)
+            this.sessions.delete(this.sessions.keys().next().value);
+    }
+}

package/lib/xlsx.d.ts

@@ -0,0 +1,2 @@
+/** Workbook with a single sheet: the first row is bold (header). */
+export declare function buildXlsx(rows: unknown[][], sheetName?: string): Buffer;

package/lib/xlsx.js

@@ -0,0 +1,69 @@
+// Minimal XLSX writer: one worksheet of text cells (inline strings), zipped with Node's zlib. Cells are never formulas, so
+// spreadsheet software does not evaluate them; numbers stay text, as in Filament's export.
+import { crc32, deflateRawSync } from 'node:zlib';
+/** Escapes a value for XML; characters not allowed in XML 1.0 are dropped. */
+const xml = (value) => value.replace(/[^\x09\x0A\x0D\x20-퟿-�\u{10000}-\u{10FFFF}]/gu, '').replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+/** Column letters of a 0-based index: 0 → A, 26 → AA. */
+function columnName(index) {
+    let name = '';
+    for (let n = index + 1; n > 0; n = Math.floor((n - 1) / 26))
+        name = String.fromCharCode(65 + ((n - 1) % 26)) + name;
+    return name;
+}
+/** Workbook with a single sheet: the first row is bold (header). */
+export function buildXlsx(rows, sheetName = 'Sheet1') {
+    const sheetRows = rows.map((row, r) => `<row r="${r + 1}">${row.map((cell, c) => `<c r="${columnName(c)}${r + 1}" t="inlineStr"${r === 0 ? ' s="1"' : ''}><is><t xml:space="preserve">${xml(cell === null || cell === undefined ? '' : String(cell)).slice(0, 32767)}</t></is></c>`).join('')}</row>`).join('');
+    const files = [
+        ['[Content_Types].xml', '<?xml version="1.0" encoding="UTF-8" standalone="yes"?><Types xmlns="http://schemas.openxmlformats.org/package/2006/content-types"><Default Extension="rels" ContentType="application/vnd.openxmlformats-package.relationships+xml"/><Default Extension="xml" ContentType="application/xml"/><Override PartName="/xl/workbook.xml" ContentType="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet.main+xml"/><Override PartName="/xl/worksheets/sheet1.xml" ContentType="application/vnd.openxmlformats-officedocument.spreadsheetml.worksheet+xml"/><Override PartName="/xl/styles.xml" ContentType="application/vnd.openxmlformats-officedocument.spreadsheetml.styles+xml"/></Types>'],
+        ['_rels/.rels', '<?xml version="1.0" encoding="UTF-8" standalone="yes"?><Relationships xmlns="http://schemas.openxmlformats.org/package/2006/relationships"><Relationship Id="rId1" Type="http://schemas.openxmlformats.org/officeDocument/2006/relationships/officeDocument" Target="xl/workbook.xml"/></Relationships>'],
+        ['xl/workbook.xml', `<?xml version="1.0" encoding="UTF-8" standalone="yes"?><workbook xmlns="http://schemas.openxmlformats.org/spreadsheetml/2006/main" xmlns:r="http://schemas.openxmlformats.org/officeDocument/2006/relationships"><sheets><sheet name="${xml(sheetName.replace(/[\\/?*[\]:]/g, ' ').slice(0, 31)) || 'Sheet1'}" sheetId="1" r:id="rId1"/></sheets></workbook>`],
+        ['xl/_rels/workbook.xml.rels', '<?xml version="1.0" encoding="UTF-8" standalone="yes"?><Relationships xmlns="http://schemas.openxmlformats.org/package/2006/relationships"><Relationship Id="rId1" Type="http://schemas.openxmlformats.org/officeDocument/2006/relationships/worksheet" Target="worksheets/sheet1.xml"/><Relationship Id="rId2" Type="http://schemas.openxmlformats.org/officeDocument/2006/relationships/styles" Target="styles.xml"/></Relationships>'],
+        ['xl/styles.xml', '<?xml version="1.0" encoding="UTF-8" standalone="yes"?><styleSheet xmlns="http://schemas.openxmlformats.org/spreadsheetml/2006/main"><fonts count="2"><font><sz val="11"/><name val="Calibri"/></font><font><b/><sz val="11"/><name val="Calibri"/></font></fonts><fills count="2"><fill><patternFill patternType="none"/></fill><fill><patternFill patternType="gray125"/></fill></fills><borders count="1"><border><left/><right/><top/><bottom/><diagonal/></border></borders><cellStyleXfs count="1"><xf numFmtId="0" fontId="0" fillId="0" borderId="0"/></cellStyleXfs><cellXfs count="2"><xf numFmtId="0" fontId="0" fillId="0" borderId="0" xfId="0"/><xf numFmtId="0" fontId="1" fillId="0" borderId="0" xfId="0" applyFont="1"/></cellXfs></styleSheet>'],
+        ['xl/worksheets/sheet1.xml', `<?xml version="1.0" encoding="UTF-8" standalone="yes"?><worksheet xmlns="http://schemas.openxmlformats.org/spreadsheetml/2006/main"><sheetData>${sheetRows}</sheetData></worksheet>`],
+    ];
+    return zip(files.map(([name, content]) => [name, Buffer.from(content, 'utf8')]));
+}
+/** ZIP archive (deflate), as required by the XLSX format. */
+function zip(entries) {
+    const locals = [], centrals = [];
+    let offset = 0;
+    for (const [name, data] of entries) {
+        const nameBuffer = Buffer.from(name, 'utf8');
+        const compressed = deflateRawSync(data);
+        const crc = crc32(data);
+        const local = Buffer.alloc(30);
+        local.writeUInt32LE(0x04034b50, 0);
+        local.writeUInt16LE(20, 4);
+        local.writeUInt16LE(0x0800, 6);
+        local.writeUInt16LE(8, 8);
+        local.writeUInt32LE(0, 10);
+        local.writeUInt32LE(crc >>> 0, 14);
+        local.writeUInt32LE(compressed.length, 18);
+        local.writeUInt32LE(data.length, 22);
+        local.writeUInt16LE(nameBuffer.length, 26);
+        local.writeUInt16LE(0, 28);
+        const central = Buffer.alloc(46);
+        central.writeUInt32LE(0x02014b50, 0);
+        central.writeUInt16LE(20, 4);
+        central.writeUInt16LE(20, 6);
+        central.writeUInt16LE(0x0800, 8);
+        central.writeUInt16LE(8, 10);
+        central.writeUInt32LE(0, 12);
+        central.writeUInt32LE(crc >>> 0, 16);
+        central.writeUInt32LE(compressed.length, 20);
+        central.writeUInt32LE(data.length, 24);
+        central.writeUInt16LE(nameBuffer.length, 28);
+        central.writeUInt32LE(offset, 42);
+        locals.push(local, nameBuffer, compressed);
+        centrals.push(central, nameBuffer);
+        offset += local.length + nameBuffer.length + compressed.length;
+    }
+    const centralSize = centrals.reduce((size, buffer) => size + buffer.length, 0);
+    const end = Buffer.alloc(22);
+    end.writeUInt32LE(0x06054b50, 0);
+    end.writeUInt16LE(entries.length, 8);
+    end.writeUInt16LE(entries.length, 10);
+    end.writeUInt32LE(centralSize, 12);
+    end.writeUInt32LE(offset, 16);
+    return Buffer.concat([...locals, ...centrals, end]);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navette-js/panels",
-  "version": "1.0.0-beta.2",
+  "version": "1.0.0-beta.4",
   "description": "Admin panels for Node.js: resources, pages, navigation, authentication, tenancy.",
   "license": "MIT",
   "type": "module",
@@ -43,14 +43,14 @@
     "node"
   ],
   "dependencies": {
-    "@navette-js/support": "1.0.0-beta.2",
-    "@navette-js/schemas": "1.0.0-beta.2",
-    "@navette-js/forms": "1.0.0-beta.2",
-    "@navette-js/actions": "1.0.0-beta.2",
-    "@navette-js/wire": "1.0.0-beta.2",
-    "@navette-js/tables": "1.0.0-beta.2",
-    "@navette-js/infolists": "1.0.0-beta.2",
-    "@navette-js/database": "1.0.0-beta.2",
+    "@navette-js/support": "1.0.0-beta.4",
+    "@navette-js/schemas": "1.0.0-beta.4",
+    "@navette-js/forms": "1.0.0-beta.4",
+    "@navette-js/actions": "1.0.0-beta.4",
+    "@navette-js/wire": "1.0.0-beta.4",
+    "@navette-js/tables": "1.0.0-beta.4",
+    "@navette-js/infolists": "1.0.0-beta.4",
+    "@navette-js/database": "1.0.0-beta.4",
     "express": "^5.1.0"
   },
   "publishConfig": {

package/views/components/user-menu.ejs

@@ -31,13 +31,13 @@
 <% } %>
 <% if (before.length) { %>        <div class="fi-dropdown-list"><%- before.join('') %></div>
 <% } %>
-        <div class="fi-dropdown-list">
+<% if (locals.hasThemeSwitcher !== false) { %>        <div class="fi-dropdown-list">
             <div x-data="{ theme: null }" x-init="
                     $watch('theme', () => {
                         $dispatch('theme-changed', theme)
                     })
 
-                    theme = localStorage.getItem('filament:theme:mode') || 'system'    " role="group" aria-label="<%= t('filament-panels::layout.actions.theme_switcher.label') %>" class="fi-theme-switcher">
+                    theme = localStorage.getItem('filament:theme:mode') || <%- js(locals.defaultThemeMode ?? 'system') %>    " role="group" aria-label="<%= t('filament-panels::layout.actions.theme_switcher.label') %>" class="fi-theme-switcher">
                 <% for (const [theme, iconName] of [['light', 'm-sun'], ['dark', 'm-moon'], ['system', 'm-computer-desktop']]) { %>
                     <% const label = t('filament-panels::layout.actions.theme_switcher.' + theme + '.label') %>
                     <button aria-label="<%= label %>" role="menuitemradio" tabindex="-1" type="button" x-on:click="(theme = <%- js(theme) %>) && close()" x-tooltip="{
@@ -49,6 +49,7 @@
                 <% } %>
             </div>
         </div>
+<% } %>
 
         <% if (locals.themes && themes.length > 1) { %>
             <%# Choice of one of the panel's predefined themes (Panel.themes()). %>

package/views/layout/base.ejs

@@ -68,10 +68,15 @@
         </style>
 
         <%- renderHook('panels::styles.after', renderHookScopes) %>
+        <% if (locals.darkMode === false) { %><% } else if (locals.darkModeForced) { %>
+        <script>
+            document.documentElement.classList.add('dark')
+        </script>
+        <% } else { %>
         <script>
             const loadDarkMode = () => {
                 window.theme =
-                    localStorage.getItem('filament:theme:mode') ?? 'system'
+                    localStorage.getItem('filament:theme:mode') ?? <%- js(locals.defaultThemeMode ?? 'system') %>
 
                 if (
                     window.theme === 'dark' ||
@@ -87,6 +92,7 @@
 
             document.addEventListener('livewire:navigated', loadDarkMode)
         </script>
+        <% } %>
 
         <% if (locals.themeCss) { %><style data-navette-theme><%- themeCss %></style><% } %>
 

package/views/livewire/sidebar.ejs

@@ -42,19 +42,20 @@
             <%- renderHook('panels::sidebar.nav.start') %>
             <ul class="fi-sidebar-nav-groups">
                 <% for (const group of groups) { %>
-                    <li x-data="{ label: <%- js(group.label ?? '') %> }" data-group-label="<%= group.label ?? '' %>" x-bind:class="{ 'fi-collapsed': $store.sidebar.groupIsCollapsed(label) }" class="<%- cls(['fi-sidebar-group', { 'fi-active': group.isActive }, 'fi-collapsible']) %>">
+                    <li x-data="{ label: <%- js(group.label ?? '') %> }" data-group-label="<%= group.label ?? '' %>" x-bind:class="{ 'fi-collapsed': $store.sidebar.groupIsCollapsed(label) }" class="<%- cls(['fi-sidebar-group', { 'fi-active': group.isActive, 'fi-collapsible': group.collapsible !== false }]) %>">
                         <% if (group.label) { %>
-                            <div x-on:click="$store.sidebar.toggleCollapsedGroup(label)" class="fi-sidebar-group-btn">
+                            <div<% if (group.collapsible !== false) { %> x-on:click="$store.sidebar.toggleCollapsedGroup(label)"<% } %> class="fi-sidebar-group-btn">
+                                <% if (group.icon) { %><%- icon(group.icon, { size: 'lg' }) %><% } %>
                                 <span class="fi-sidebar-group-label">
                                     <%= group.label %>
                                 </span>
-                                <%- view('filament::components.icon-button', {
+                                <% if (group.collapsible !== false) { %><%- view('filament::components.icon-button', {
                                     iconName: 'm-chevron-up', label: group.label, className: 'fi-sidebar-group-collapse-btn',
                                     extra: attrs({ 'aria-controls': group.itemsId, 'x-bind:aria-expanded': '! $store.sidebar.groupIsCollapsed(label)', 'x-on:click.stop': '$store.sidebar.toggleCollapsedGroup(label)' }),
-                                }) %>
+                                }) %><% } %>
                             </div>
                         <% } %>
-                        <ul<% if (group.label) { %> id="<%= group.itemsId %>" x-show="! $store.sidebar.groupIsCollapsed(label)" x-collapse.duration.200ms<% } %> class="fi-sidebar-group-items">
+                        <ul<% if (group.label) { %> id="<%= group.itemsId %>"<% if (group.collapsible !== false) { %> x-show="! $store.sidebar.groupIsCollapsed(label)" x-collapse.duration.200ms<% } %><% } %> class="fi-sidebar-group-items">
                             <% for (const item of group.items) { %>
                                 <li class="<%- cls(['fi-sidebar-item', { 'fi-active': item.isActive }, 'fi-sidebar-item-has-url']) %>">
                                     <a href="<%= item.url %>"<% if (spa) { %> wire:navigate<% } %><% if (item.isActive) { %> aria-current="page"<% } %> x-on:click="$store.sidebar.isMobile && $store.sidebar.close()" class="fi-sidebar-item-btn">