@pagamio/frontend-commons-lib 0.8.212 → 0.8.213

package/lib/components/layout/Sidebar.js

@@ -13,7 +13,7 @@ const AppSidebarMenu = () => {
     // Default behavior all items in one ItemGroup
     return (_jsx(Sidebar.Items, { children: _jsx(Sidebar.ItemGroup, { children: pages.map((item) => (_jsx(AppSidebarItem, { ...item }, item.label))) }) }));
 };
-const AppSidebarItem = ({ href, target, icon, label, items, badge, forceDropdown }) => {
+const AppSidebarItem = ({ href, target, icon, label, items, badge, forceDropdown, collapsible = true, showSeparator = false, }) => {
     const { pathname, linkComponent: Link } = useAppSidebarContext();
     const { t } = useTranslation();
     // Check if current path matches this item or any of its descendants
@@ -38,6 +38,17 @@ const AppSidebarItem = ({ href, target, icon, label, items, badge, forceDropdown
         return (_jsx(Sidebar.Item, { as: Link, href: singleItem.href, target: target, icon: icon, label: badge && t(badge), className: twMerge('text-gray-600 hover:text-primary-700 hover:bg-primary-50/70', 'dark:text-gray-400 dark:hover:text-primary-300 dark:hover:bg-primary-900/30', pathname === singleItem.href &&
                 'text-primary-700 bg-primary-100/80 hover:bg-primary-100/80 dark:text-primary-300 dark:bg-primary-900/40 dark:hover:bg-primary-900/40'), children: t(label) }));
     }
+    // Handle non-collapsible sections - render as section header with always-visible links
+    if (items?.length && collapsible === false) {
+        return (_jsxs("div", { className: "space-y-1", children: [showSeparator && _jsx("hr", { className: "my-3 border-t border-gray-200 dark:border-gray-700" }), _jsxs("div", { className: twMerge('flex items-center gap-3 px-3 py-2 text-sm font-semibold uppercase tracking-wider', 'text-gray-500 dark:text-gray-400'), children: [icon && React.createElement(icon, { className: 'h-5 w-5' }), _jsx("span", { children: t(label) })] }), _jsx("div", { className: "space-y-1 pl-2", children: items.map((child) => (_jsx(React.Fragment, { children: child.items?.length ? (
+                        // Recursively render nested items
+                        _jsx("div", { className: "pl-3", children: _jsx(AppSidebarItem, { ...child }) })) : child.href ? (
+                        // Render leaf item with link
+                        _jsx(Sidebar.Item, { as: Link, href: child.href, target: child.target, icon: child.icon, className: twMerge('justify-center [&>*]:font-normal', 'text-gray-600 hover:text-primary-700 hover:bg-primary-50/70', 'dark:text-gray-400 dark:hover:text-primary-300 dark:hover:bg-primary-900/30', pathname === child.href &&
+                                'text-primary-700 bg-primary-100/80 hover:bg-primary-100/80 dark:text-primary-300 dark:bg-primary-900/40 dark:hover:bg-primary-900/40'), children: t(child.label) })) : (
+                        // Render leaf item without link
+                        _jsx(Sidebar.Item, { icon: child.icon, className: twMerge('justify-center [&>*]:font-normal', 'text-gray-600 cursor-default', 'dark:text-gray-400'), children: t(child.label) })) }, child.label))) })] }));
+    }
     if (items?.length) {
         const isOpen = isParentActive || hasActiveChild(items);
         return (_jsx(Sidebar.Collapse, { icon: icon, label: t(label), open: isOpen, className: twMerge('text-gray-600 hover:text-primary-700 hover:bg-primary-50/70', 'dark:text-gray-400 dark:hover:text-primary-300 dark:hover:bg-primary-900/30', 

package/lib/context/SidebarContext.d.ts

@@ -9,6 +9,16 @@ interface AppSidebarPageItem {
     badge?: string;
     roles?: string[];
     forceDropdown?: boolean;
+    /**
+     * When false, the section will not be collapsible - it will display as a
+     * section header with always-visible links below it. Defaults to true.
+     */
+    collapsible?: boolean;
+    /**
+     * When true, displays a horizontal separator line above the section.
+     * Useful for visually separating non-collapsible sections. Defaults to false.
+     */
+    showSeparator?: boolean;
 }
 /**
  * Props for the AppSidebarContext

package/lib/styles.css

@@ -978,6 +978,9 @@ input[type="range"]::-ms-fill-lower {
 .pointer-events-none {
   pointer-events: none;
 }
+.visible {
+  visibility: visible;
+}
 .invisible {
   visibility: hidden;
 }
@@ -1237,6 +1240,10 @@ input[type="range"]::-ms-fill-lower {
   margin-top: 0.25rem;
   margin-bottom: 0.25rem;
 }
+.my-3 {
+  margin-top: 0.75rem;
+  margin-bottom: 0.75rem;
+}
 .my-4 {
   margin-top: 1rem;
   margin-bottom: 1rem;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pagamio/frontend-commons-lib",
   "description": "Pagamio library for Frontend reusable components like the form engine and table container",
-  "version": "0.8.212",
+  "version": "0.8.213",
   "publishConfig": {
     "access": "public",
     "provenance": false