@veiag/payload-enhanced-sidebar 0.2.1 → 0.3.0-beta.1

package/README.md

@@ -11,8 +11,9 @@ An enhanced sidebar plugin for [Payload CMS](https://payloadcms.com) that adds a
 - **Link Support** - Add navigation links (like Dashboard) alongside tabs
 - **Custom Items** - Add custom navigation items that can be merged into existing groups
 - **Badges** - Show notification badges on tabs and navigation items (API-based or reactive provider)
+- **Custom Components** - Replace any part of the sidebar with your own React components
 - **i18n Support** - Full localization support for labels and groups
-- **Lucide Icons** - Use any [Lucide icon](https://lucide.dev/icons) for tabs and links
+- **Lucide Icons** - Use any [Lucide icon](https://lucide.dev/icons) for tabs and links, or provide a custom icon component per tab
 
 ![Showcase](docs/showcase.gif)
 
@@ -101,6 +102,12 @@ export default buildConfig({
               label: { en: 'Analytics', uk: 'Аналітика' },
               group: 'E-commerce', // Merge into existing group
             },
+            {
+              slug: 'quick-add',
+              href: '/quick-add',
+              label: { en: 'Quick Add', uk: 'Швидке додавання' },
+              position: 'top', // Appears above all collection groups
+            },
           ],
         },
         // Settings tab with globals
@@ -150,13 +157,15 @@ Array of tabs and links to show in the sidebar.
 |----------|------|----------|-------------|
 | `id` | `string` | Yes | Unique identifier |
 | `type` | `'tab'` | Yes | Tab type |
-| `icon` | `string` | Yes | Lucide icon name |
+| `icon` | `IconName` | Yes* | Lucide icon name |
+| `iconComponent` | `SidebarComponent` | Yes* | Path to a custom icon component (string or `{ path, clientProps }`) |
 | `label` | `LocalizedString` | Yes | Tab tooltip/label |
 | `collections` | `CollectionSlug[]` | No | Collections to show in this tab |
 | `globals` | `GlobalSlug[]` | No | Globals to show in this tab |
-| `customItems` | `SidebarTabItem[]` | No | Custom navigation items |
+| `customItems` | `SidebarTabItem[]` | No | Custom navigation items (see below) |
 | `badge` | `BadgeConfig` | No | Badge configuration for the tab icon |
 
+> \* Exactly one of `icon` or `iconComponent` is required — they are mutually exclusive.
 > If neither `collections` nor `globals` are specified, the tab shows all collections and globals.
 
 
@@ -166,12 +175,15 @@ Array of tabs and links to show in the sidebar.
 |----------|------|----------|-------------|
 | `id` | `string` | Yes | Unique identifier |
 | `type` | `'link'` | Yes | Link type |
-| `icon` | `string` | Yes | Lucide icon name |
+| `icon` | `IconName` | Yes* | Lucide icon name |
+| `iconComponent` | `SidebarComponent` | Yes* | Path to a custom icon component (string or `{ path, clientProps }`) |
 | `label` | `LocalizedString` | Yes | Link tooltip/label |
 | `href` | `string` | Yes | URL |
 | `isExternal` | `boolean` | No | If true, `href` is absolute URL, if not, `href` is relative to admin route |
 | `badge` | `BadgeConfig` | No | Badge configuration for the link icon |
 
+> \* Exactly one of `icon` or `iconComponent` is required — they are mutually exclusive.
+
 
 ![Tab and Link active difference](docs/tab-link-active.png)
 
@@ -186,13 +198,19 @@ Custom items can be added to any tab:
   label: { en: 'Label' },        // Required: display label
   group: { en: 'Group Name' },   // Optional: merge into existing group or create new
   isExternal: true,              // Optional: if true, href is absolute URL
+  position: 'top',               // Optional: 'top' | 'bottom' (default: 'bottom')
 }
 ```
 
 **Group behavior:**
 - If `group` matches an existing collection group label, the item is added to that group
 - If `group` doesn't match any existing group, a new group is created
-- If `group` is not specified, the item appears at the bottom as ungrouped
+- If `group` is not specified, the item appears as ungrouped
+
+**Position behavior:**
+- `position: 'top'` — item (or new custom group) appears **above** all collection/global groups
+- `position: 'bottom'` — appears below all groups (default)
+- Has no effect on items that merge into an existing collection group via `group`
 
 
 ## Badges
@@ -362,6 +380,71 @@ Available colors: `default`, `primary`, `success`, `warning`, `error`
 - Zero or undefined values hide the badge
 - Provider values can also be React nodes for custom rendering
 
+## Access Control
+
+You can control visibility of tabs, links, and custom items using an `access` function. It runs **server-side** and receives the current `PayloadRequest`, so you have full access to `req.user`, roles, permissions, etc.
+
+### On tabs and links
+
+```typescript
+tabs: [
+  {
+    id: 'admin-panel',
+    type: 'tab',
+    icon: 'Shield',
+    label: 'Admin',
+    collections: ['users', 'tenants'],
+    access: ({ req, item }) => {
+      return req.user?.role === 'admin'
+    },
+  },
+  {
+    id: 'reports',
+    type: 'link',
+    href: '/reports',
+    icon: 'BarChart',
+    label: 'Reports',
+    access: async ({ req }) => {
+      // async is supported
+      return Boolean(req.user)
+    },
+  },
+]
+```
+
+If `access` returns `false`, the tab button is hidden from the tabs bar and its content is not rendered.
+
+### On custom items
+
+```typescript
+customItems: [
+  {
+    slug: 'admin-tools',
+    href: '/admin-tools',
+    label: 'Admin Tools',
+    access: ({ req }) => req.user?.role === 'admin',
+  },
+]
+```
+
+**Access function signatures:**
+
+```typescript
+// For tabs and links
+type TabAccessFunction = (args: {
+  item: SidebarTab       // full tab/link config
+  req: PayloadRequest
+}) => boolean | Promise<boolean>
+
+// For custom items
+type ItemAccessFunction = (args: {
+  item: SidebarTabItem   // full custom item config
+  req: PayloadRequest
+}) => boolean | Promise<boolean>
+```
+
+> Default collections and globals already respect Payload's built-in access control — they are filtered by `visibleEntities` automatically. The `access` function is only needed for tabs, links, and custom items.
+
 ### `showLogout`
 
 Show/hide the logout button at the bottom of the tabs bar.
@@ -376,6 +459,45 @@ Completely disable the plugin.
 - **Type:** `boolean`
 - **Default:** `false`
 
+## Custom Components
+
+You can replace any part of the sidebar with your own React components. The plugin registers them automatically in Payload's import map — no manual import map configuration needed.
+
+```typescript
+payloadEnhancedSidebar({
+  customComponents: {
+    // Replace individual nav items (collections, globals, custom links)
+    NavItem: './components/Sidebar#MyNavItem',
+    // Replace group headers
+    NavGroup: './components/Sidebar#MyNavGroup',
+    // Replace the entire nav scroll area
+    NavContent: './components/Sidebar#MyNavContent',
+    // Replace every button in the tabs bar (tabs and links)
+    TabButton: './components/Sidebar#MyTabButton',
+  },
+  tabs: [
+    {
+      id: 'dashboard',
+      type: 'link',
+      href: '/',
+      // Custom icon for just this tab/link (mutually exclusive with `icon`)
+      iconComponent: './components/Sidebar#DashboardIcon',
+      label: 'Dashboard',
+    },
+  ],
+})
+```
+
+All custom components are client components (`'use client'`). The plugin provides hooks to connect them to sidebar state:
+
+| Hook | Description |
+|------|-------------|
+| `useNavItemState(href)` | `{ isActive, isCurrentPage }` — for custom NavItem |
+| `useTabState(id)` | `{ isActive }` — for custom NavContent or TabButton |
+| `useEnhancedSidebar()` | `{ activeTabId, onTabChange }` — full tab context |
+
+**→ See [docs/custom-components.md](docs/custom-components.md) for full documentation, prop types, and examples for each slot.**
+
 ## Localization
 
 All labels support localized strings:

package/dist/components/EnhancedSidebar/NavContent/index.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import type { CustomNavContentProps } from '../../../types';
+export declare const NavContent: React.FC<CustomNavContentProps>;

package/dist/components/EnhancedSidebar/NavContent/index.js

@@ -0,0 +1,34 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { useTabState } from '../hooks/useTabState';
+const baseClass = 'enhanced-sidebar';
+const TabPanel = ({ children, id })=>{
+    const { isActive } = useTabState(id);
+    return /*#__PURE__*/ _jsx("div", {
+        "aria-hidden": !isActive,
+        style: {
+            display: isActive ? undefined : 'none'
+        },
+        children: children
+    });
+};
+export const NavContent = ({ afterNavLinks, allContent, beforeNavLinks, tabs, tabsContent })=>{
+    const hasTabs = tabs.length > 0;
+    return /*#__PURE__*/ _jsx("nav", {
+        className: `${baseClass}__content`,
+        children: /*#__PURE__*/ _jsxs("div", {
+            className: `${baseClass}__content-scroll`,
+            children: [
+                beforeNavLinks,
+                hasTabs ? tabs.map((tab)=>/*#__PURE__*/ _jsx(TabPanel, {
+                        id: tab.id,
+                        children: tabsContent[tab.id]
+                    }, tab.id)) : allContent,
+                afterNavLinks
+            ]
+        })
+    });
+};
+
+//# sourceMappingURL=index.js.map

package/dist/components/EnhancedSidebar/NavContent/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/EnhancedSidebar/NavContent/index.tsx"],"sourcesContent":["'use client'\n\nimport React from 'react'\n\nimport type { CustomNavContentProps } from '../../../types'\n\nimport { useTabState } from '../hooks/useTabState'\n\nconst baseClass = 'enhanced-sidebar'\n\nconst TabPanel: React.FC<{ id: string; children: React.ReactNode }> = ({ children, id }) => {\n  const { isActive } = useTabState(id)\n  return (\n    <div aria-hidden={!isActive} style={{ display: isActive ? undefined : 'none' }}>\n      {children}\n    </div>\n  )\n}\n\nexport const NavContent: React.FC<CustomNavContentProps> = ({\n  afterNavLinks,\n  allContent,\n  beforeNavLinks,\n  tabs,\n  tabsContent,\n}) => {\n  const hasTabs = tabs.length > 0\n\n  return (\n    <nav className={`${baseClass}__content`}>\n      <div className={`${baseClass}__content-scroll`}>\n        {beforeNavLinks}\n        {hasTabs\n          ? tabs.map((tab) => (\n              <TabPanel id={tab.id} key={tab.id}>\n                {tabsContent[tab.id]}\n              </TabPanel>\n            ))\n          : allContent}\n        {afterNavLinks}\n      </div>\n    </nav>\n  )\n}\n"],"names":["React","useTabState","baseClass","TabPanel","children","id","isActive","div","aria-hidden","style","display","undefined","NavContent","afterNavLinks","allContent","beforeNavLinks","tabs","tabsContent","hasTabs","length","nav","className","map","tab"],"mappings":"AAAA;;AAEA,OAAOA,WAAW,QAAO;AAIzB,SAASC,WAAW,QAAQ,uBAAsB;AAElD,MAAMC,YAAY;AAElB,MAAMC,WAAgE,CAAC,EAAEC,QAAQ,EAAEC,EAAE,EAAE;IACrF,MAAM,EAAEC,QAAQ,EAAE,GAAGL,YAAYI;IACjC,qBACE,KAACE;QAAIC,eAAa,CAACF;QAAUG,OAAO;YAAEC,SAASJ,WAAWK,YAAY;QAAO;kBAC1EP;;AAGP;AAEA,OAAO,MAAMQ,aAA8C,CAAC,EAC1DC,aAAa,EACbC,UAAU,EACVC,cAAc,EACdC,IAAI,EACJC,WAAW,EACZ;IACC,MAAMC,UAAUF,KAAKG,MAAM,GAAG;IAE9B,qBACE,KAACC;QAAIC,WAAW,GAAGnB,UAAU,SAAS,CAAC;kBACrC,cAAA,MAACK;YAAIc,WAAW,GAAGnB,UAAU,gBAAgB,CAAC;;gBAC3Ca;gBACAG,UACGF,KAAKM,GAAG,CAAC,CAACC,oBACR,KAACpB;wBAASE,IAAIkB,IAAIlB,EAAE;kCACjBY,WAAW,CAACM,IAAIlB,EAAE,CAAC;uBADKkB,IAAIlB,EAAE,KAInCS;gBACHD;;;;AAIT,EAAC"}

package/dist/components/EnhancedSidebar/NavItem/index.d.ts

@@ -5,7 +5,5 @@ export type NavItemProps = {
     entity: ExtendedEntity;
     href: string;
     id: string;
-    isActive: boolean;
-    isCurrentPage: boolean;
 };
 export declare const NavItem: React.FC<NavItemProps>;

package/dist/components/EnhancedSidebar/NavItem/index.js

@@ -5,10 +5,12 @@ import { Link, useTranslation } from '@payloadcms/ui';
 import React from 'react';
 import { Badge } from '../Badge';
 import { useBadge } from '../hooks/useBadge';
+import { useNavItemState } from '../hooks/useNavItemState';
 const baseClass = 'enhanced-sidebar';
-export const NavItem = ({ id, badgeConfig, entity, href, isActive, isCurrentPage })=>{
+export const NavItem = ({ id, badgeConfig, entity, href })=>{
     const { i18n } = useTranslation();
     const { value: badgeValue } = useBadge(badgeConfig, entity.slug);
+    const { isActive, isCurrentPage } = useNavItemState(href);
     const Label = /*#__PURE__*/ _jsxs(_Fragment, {
         children: [
             isActive && /*#__PURE__*/ _jsx("div", {

package/dist/components/EnhancedSidebar/NavItem/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/EnhancedSidebar/NavItem/index.tsx"],"sourcesContent":["'use client'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport { Link, useTranslation } from '@payloadcms/ui'\nimport React from 'react'\n\nimport type { BadgeConfig, ExtendedEntity } from '../../../types'\n\nimport { Badge } from '../Badge'\nimport { useBadge } from '../hooks/useBadge'\n\nconst baseClass = 'enhanced-sidebar'\n\nexport type NavItemProps = {\n  badgeConfig?: BadgeConfig\n  entity: ExtendedEntity\n  href: string\n  id: string\n  isActive: boolean\n  isCurrentPage: boolean\n}\n\nexport const NavItem: React.FC<NavItemProps> = ({\n  id,\n  badgeConfig,\n  entity,\n  href,\n  isActive,\n  isCurrentPage,\n}) => {\n  const { i18n } = useTranslation()\n  const { value: badgeValue } = useBadge(badgeConfig, entity.slug)\n\n  const Label = (\n    <>\n      {isActive && <div className={`${baseClass}__link-indicator`} />}\n      <span className={`${baseClass}__link-label`}>{getTranslation(entity.label, i18n)}</span>\n      {badgeValue !== undefined && (\n        <Badge color={badgeConfig?.color} position=\"inline\" value={badgeValue} />\n      )}\n    </>\n  )\n\n  if (isCurrentPage) {\n    return (\n      <div className={`${baseClass}__link`} id={id}>\n        {Label}\n      </div>\n    )\n  }\n\n  return (\n    <Link\n      className={`${baseClass}__link`}\n      href={href}\n      id={id}\n      prefetch={false}\n      rel={entity.isExternal ? 'noopener noreferrer' : undefined}\n      target={entity.isExternal ? '_blank' : undefined}\n    >\n      {Label}\n    </Link>\n  )\n}\n"],"names":["getTranslation","Link","useTranslation","React","Badge","useBadge","baseClass","NavItem","id","badgeConfig","entity","href","isActive","isCurrentPage","i18n","value","badgeValue","slug","Label","div","className","span","label","undefined","color","position","prefetch","rel","isExternal","target"],"mappings":"AAAA;;AAEA,SAASA,cAAc,QAAQ,2BAA0B;AACzD,SAASC,IAAI,EAAEC,cAAc,QAAQ,iBAAgB;AACrD,OAAOC,WAAW,QAAO;AAIzB,SAASC,KAAK,QAAQ,WAAU;AAChC,SAASC,QAAQ,QAAQ,oBAAmB;AAE5C,MAAMC,YAAY;AAWlB,OAAO,MAAMC,UAAkC,CAAC,EAC9CC,EAAE,EACFC,WAAW,EACXC,MAAM,EACNC,IAAI,EACJC,QAAQ,EACRC,aAAa,EACd;IACC,MAAM,EAAEC,IAAI,EAAE,GAAGZ;IACjB,MAAM,EAAEa,OAAOC,UAAU,EAAE,GAAGX,SAASI,aAAaC,OAAOO,IAAI;IAE/D,MAAMC,sBACJ;;YACGN,0BAAY,KAACO;gBAAIC,WAAW,GAAGd,UAAU,gBAAgB,CAAC;;0BAC3D,KAACe;gBAAKD,WAAW,GAAGd,UAAU,YAAY,CAAC;0BAAGN,eAAeU,OAAOY,KAAK,EAAER;;YAC1EE,eAAeO,2BACd,KAACnB;gBAAMoB,OAAOf,aAAae;gBAAOC,UAAS;gBAASV,OAAOC;;;;IAKjE,IAAIH,eAAe;QACjB,qBACE,KAACM;YAAIC,WAAW,GAAGd,UAAU,MAAM,CAAC;YAAEE,IAAIA;sBACvCU;;IAGP;IAEA,qBACE,KAACjB;QACCmB,WAAW,GAAGd,UAAU,MAAM,CAAC;QAC/BK,MAAMA;QACNH,IAAIA;QACJkB,UAAU;QACVC,KAAKjB,OAAOkB,UAAU,GAAG,wBAAwBL;QACjDM,QAAQnB,OAAOkB,UAAU,GAAG,WAAWL;kBAEtCL;;AAGP,EAAC"}
+{"version":3,"sources":["../../../../src/components/EnhancedSidebar/NavItem/index.tsx"],"sourcesContent":["'use client'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport { Link, useTranslation } from '@payloadcms/ui'\nimport React from 'react'\n\nimport type { BadgeConfig, ExtendedEntity } from '../../../types'\n\nimport { Badge } from '../Badge'\nimport { useBadge } from '../hooks/useBadge'\nimport { useNavItemState } from '../hooks/useNavItemState'\n\nconst baseClass = 'enhanced-sidebar'\n\nexport type NavItemProps = {\n  badgeConfig?: BadgeConfig\n  entity: ExtendedEntity\n  href: string\n  id: string\n}\n\nexport const NavItem: React.FC<NavItemProps> = ({ id, badgeConfig, entity, href }) => {\n  const { i18n } = useTranslation()\n  const { value: badgeValue } = useBadge(badgeConfig, entity.slug)\n  const { isActive, isCurrentPage } = useNavItemState(href)\n\n  const Label = (\n    <>\n      {isActive && <div className={`${baseClass}__link-indicator`} />}\n      <span className={`${baseClass}__link-label`}>{getTranslation(entity.label, i18n)}</span>\n      {badgeValue !== undefined && (\n        <Badge color={badgeConfig?.color} position=\"inline\" value={badgeValue} />\n      )}\n    </>\n  )\n\n  if (isCurrentPage) {\n    return (\n      <div className={`${baseClass}__link`} id={id}>\n        {Label}\n      </div>\n    )\n  }\n\n  return (\n    <Link\n      className={`${baseClass}__link`}\n      href={href}\n      id={id}\n      prefetch={false}\n      rel={entity.isExternal ? 'noopener noreferrer' : undefined}\n      target={entity.isExternal ? '_blank' : undefined}\n    >\n      {Label}\n    </Link>\n  )\n}\n"],"names":["getTranslation","Link","useTranslation","React","Badge","useBadge","useNavItemState","baseClass","NavItem","id","badgeConfig","entity","href","i18n","value","badgeValue","slug","isActive","isCurrentPage","Label","div","className","span","label","undefined","color","position","prefetch","rel","isExternal","target"],"mappings":"AAAA;;AAEA,SAASA,cAAc,QAAQ,2BAA0B;AACzD,SAASC,IAAI,EAAEC,cAAc,QAAQ,iBAAgB;AACrD,OAAOC,WAAW,QAAO;AAIzB,SAASC,KAAK,QAAQ,WAAU;AAChC,SAASC,QAAQ,QAAQ,oBAAmB;AAC5C,SAASC,eAAe,QAAQ,2BAA0B;AAE1D,MAAMC,YAAY;AASlB,OAAO,MAAMC,UAAkC,CAAC,EAAEC,EAAE,EAAEC,WAAW,EAAEC,MAAM,EAAEC,IAAI,EAAE;IAC/E,MAAM,EAAEC,IAAI,EAAE,GAAGX;IACjB,MAAM,EAAEY,OAAOC,UAAU,EAAE,GAAGV,SAASK,aAAaC,OAAOK,IAAI;IAC/D,MAAM,EAAEC,QAAQ,EAAEC,aAAa,EAAE,GAAGZ,gBAAgBM;IAEpD,MAAMO,sBACJ;;YACGF,0BAAY,KAACG;gBAAIC,WAAW,GAAGd,UAAU,gBAAgB,CAAC;;0BAC3D,KAACe;gBAAKD,WAAW,GAAGd,UAAU,YAAY,CAAC;0BAAGP,eAAeW,OAAOY,KAAK,EAAEV;;YAC1EE,eAAeS,2BACd,KAACpB;gBAAMqB,OAAOf,aAAae;gBAAOC,UAAS;gBAASZ,OAAOC;;;;IAKjE,IAAIG,eAAe;QACjB,qBACE,KAACE;YAAIC,WAAW,GAAGd,UAAU,MAAM,CAAC;YAAEE,IAAIA;sBACvCU;;IAGP;IAEA,qBACE,KAAClB;QACCoB,WAAW,GAAGd,UAAU,MAAM,CAAC;QAC/BK,MAAMA;QACNH,IAAIA;QACJkB,UAAU;QACVC,KAAKjB,OAAOkB,UAAU,GAAG,wBAAwBL;QACjDM,QAAQnB,OAAOkB,UAAU,GAAG,WAAWL;kBAEtCL;;AAGP,EAAC"}

package/dist/components/EnhancedSidebar/SidebarContent.d.ts

@@ -1,13 +1,15 @@
-import type { NavPreferences } from 'payload';
 import React from 'react';
-import type { EnhancedSidebarConfig, ExtendedGroup } from '../../types';
+import type { EnhancedSidebarConfig } from '../../types';
 export type SidebarContentProps = {
     afterNavLinks?: React.ReactNode;
+    allContent?: React.ReactNode;
     beforeNavLinks?: React.ReactNode;
-    groups: ExtendedGroup[];
+    customNavContent?: React.ReactNode;
     initialActiveTabId: string;
-    navPreferences: NavPreferences | null;
+    renderedTabItems?: React.ReactNode[];
     settingsMenu?: React.ReactNode[];
     sidebarConfig: EnhancedSidebarConfig;
+    tabIcons?: Record<string, React.ReactNode>;
+    tabsContent: Record<string, React.ReactNode>;
 };
 export declare const SidebarContent: React.FC<SidebarContentProps>;

package/dist/components/EnhancedSidebar/SidebarContent.js

@@ -1,9 +1,8 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useTranslation } from '@payloadcms/ui';
 import React, { useCallback, useMemo, useState } from 'react';
-import { extractLocalizedValue } from '../../utils';
-import { EnhancedSidebarClient } from './index.client';
+import { EnhancedSidebarContext } from './context';
+import { NavContent } from './NavContent';
 import { SidebarWrapper } from './SidebarWrapper';
 import { TabsBar } from './TabsBar';
 const baseClass = 'enhanced-sidebar';
@@ -11,150 +10,42 @@ const COOKIE_KEY = 'payload-enhanced-sidebar-active-tab';
 const setTabCookie = (tabId)=>{
     document.cookie = `${COOKIE_KEY}=${tabId}; path=/; max-age=31536000; SameSite=Lax`;
 };
-/**
- * Computes filtered groups for a specific tab
- */ const computeGroupsForTab = (tab, groups, currentLang)=>{
-    const { collections: tabCollections, customItems, globals: tabGlobals } = tab;
-    // If no specific collections/globals defined, show all
-    const showAll = !tabCollections && !tabGlobals;
-    const allowedSlugs = new Set([
-        ...tabCollections ?? [],
-        ...tabGlobals ?? []
-    ]);
-    let result = [];
-    if (showAll) {
-        result = groups.map((g)=>({
-                ...g,
-                entities: [
-                    ...g.entities
-                ]
-            }));
-    } else if (allowedSlugs.size > 0) {
-        result = groups.map((group)=>({
-                ...group,
-                entities: group.entities.filter((entity)=>allowedSlugs.has(entity.slug))
-            })).filter((group)=>group.entities.length > 0);
-    }
-    // Merge custom items into groups
-    if (customItems && customItems.length > 0) {
-        const ungroupedItems = [];
-        for (const item of customItems){
-            if (item.group) {
-                // Get localized group name for comparison
-                const itemGroupLabel = extractLocalizedValue(item.group, currentLang);
-                // Find existing group by comparing localized labels
-                const existingGroup = result.find((g)=>{
-                    const groupLabel = extractLocalizedValue(g.label, currentLang);
-                    return groupLabel === itemGroupLabel;
-                });
-                if (existingGroup) {
-                    existingGroup.entities.push({
-                        slug: item.slug,
-                        type: 'custom',
-                        href: item.href,
-                        isExternal: item.isExternal,
-                        label: item.label
-                    });
-                } else {
-                    // Create new group
-                    result.push({
-                        entities: [
-                            {
-                                slug: item.slug,
-                                type: 'custom',
-                                href: item.href,
-                                isExternal: item.isExternal,
-                                label: item.label
-                            }
-                        ],
-                        label: item.group
-                    });
-                }
-            } else {
-                ungroupedItems.push(item);
-            }
-        }
-        // Add ungrouped items at the end
-        if (ungroupedItems.length > 0) {
-            result.push({
-                entities: ungroupedItems.map((item)=>({
-                        slug: item.slug,
-                        type: 'custom',
-                        href: item.href,
-                        isExternal: item.isExternal,
-                        label: item.label
-                    })),
-                label: ''
-            });
-        }
-    }
-    return result;
-};
-export const SidebarContent = ({ afterNavLinks, beforeNavLinks, groups, initialActiveTabId, navPreferences, settingsMenu, sidebarConfig })=>{
-    const { i18n } = useTranslation();
-    const currentLang = i18n.language;
-    const tabs = useMemo(()=>sidebarConfig.tabs?.filter((t)=>t.type === 'tab') ?? [], [
-        sidebarConfig.tabs
-    ]);
+export const SidebarContent = ({ afterNavLinks, allContent, beforeNavLinks, customNavContent, initialActiveTabId, renderedTabItems, settingsMenu, sidebarConfig, tabIcons, tabsContent })=>{
     const [activeTabId, setActiveTabId] = useState(initialActiveTabId);
     const handleTabChange = useCallback((tabId)=>{
         setActiveTabId(tabId);
         setTabCookie(tabId);
     }, []);
-    // Build groups for all tabs at once to keep them mounted
-    const groupsPerTab = useMemo(()=>{
-        const result = {};
-        for (const tab of tabs){
-            result[tab.id] = computeGroupsForTab(tab, groups, currentLang);
-        }
-        return result;
-    }, [
-        tabs,
-        groups,
-        currentLang
+    const contextValue = useMemo(()=>({
+            activeTabId,
+            onTabChange: handleTabChange
+        }), [
+        activeTabId,
+        handleTabChange
     ]);
-    // Fallback: if no tabs defined, show all groups
-    const hasTabs = tabs.length > 0;
-    return /*#__PURE__*/ _jsxs(SidebarWrapper, {
-        baseClass: baseClass,
-        children: [
-            /*#__PURE__*/ _jsx(TabsBar, {
-                activeTabId: activeTabId,
-                onTabChange: handleTabChange,
-                settingsMenu: settingsMenu,
-                sidebarConfig: sidebarConfig
-            }),
-            /*#__PURE__*/ _jsx("nav", {
-                className: `${baseClass}__content`,
-                children: /*#__PURE__*/ _jsxs("div", {
-                    className: `${baseClass}__content-scroll`,
-                    children: [
-                        beforeNavLinks,
-                        hasTabs ? // Render all tabs but hide inactive ones to preserve NavGroup state
-                        tabs.map((tab)=>{
-                            const isActive = activeTabId === tab.id;
-                            return /*#__PURE__*/ _jsx("div", {
-                                "aria-hidden": !isActive,
-                                style: {
-                                    display: isActive ? undefined : 'none'
-                                },
-                                children: /*#__PURE__*/ _jsx(EnhancedSidebarClient, {
-                                    badges: sidebarConfig.badges,
-                                    groups: groupsPerTab[tab.id] ?? [],
-                                    navPreferences: navPreferences
-                                })
-                            }, tab.id);
-                        }) : // No tabs defined - show all groups
-                        /*#__PURE__*/ _jsx(EnhancedSidebarClient, {
-                            badges: sidebarConfig.badges,
-                            groups: groups,
-                            navPreferences: navPreferences
-                        }),
-                        afterNavLinks
-                    ]
+    const tabs = sidebarConfig.tabs?.filter((t)=>t.type === 'tab') ?? [];
+    return /*#__PURE__*/ _jsx(EnhancedSidebarContext.Provider, {
+        value: contextValue,
+        children: /*#__PURE__*/ _jsxs(SidebarWrapper, {
+            baseClass: baseClass,
+            children: [
+                /*#__PURE__*/ _jsx(TabsBar, {
+                    activeTabId: activeTabId,
+                    onTabChange: handleTabChange,
+                    renderedTabItems: renderedTabItems,
+                    settingsMenu: settingsMenu,
+                    sidebarConfig: sidebarConfig,
+                    tabIcons: tabIcons
+                }),
+                customNavContent ?? /*#__PURE__*/ _jsx(NavContent, {
+                    afterNavLinks: afterNavLinks,
+                    allContent: allContent,
+                    beforeNavLinks: beforeNavLinks,
+                    tabs: tabs,
+                    tabsContent: tabsContent
                 })
-            })
-        ]
+            ]
+        })
     });
 };
 

package/dist/components/EnhancedSidebar/SidebarContent.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/EnhancedSidebar/SidebarContent.tsx"],"sourcesContent":["'use client'\nimport type { NavPreferences } from 'payload'\n\nimport { useTranslation } from '@payloadcms/ui'\nimport React, { useCallback, useMemo, useState } from 'react'\n\nimport type {\n  EnhancedSidebarConfig,\n  ExtendedEntity,\n  ExtendedGroup,\n  SidebarTabContent as SidebarTabContentType,\n  SidebarTabItem,\n} from '../../types'\n\nimport { extractLocalizedValue } from '../../utils'\nimport { EnhancedSidebarClient } from './index.client'\nimport { SidebarWrapper } from './SidebarWrapper'\nimport { TabsBar } from './TabsBar'\n\nconst baseClass = 'enhanced-sidebar'\n\nexport type SidebarContentProps = {\n  afterNavLinks?: React.ReactNode\n  beforeNavLinks?: React.ReactNode\n  groups: ExtendedGroup[]\n  initialActiveTabId: string\n  navPreferences: NavPreferences | null\n  settingsMenu?: React.ReactNode[]\n  sidebarConfig: EnhancedSidebarConfig\n}\n\nconst COOKIE_KEY = 'payload-enhanced-sidebar-active-tab'\n\nconst setTabCookie = (tabId: string) => {\n  document.cookie = `${COOKIE_KEY}=${tabId}; path=/; max-age=31536000; SameSite=Lax`\n}\n\n/**\n * Computes filtered groups for a specific tab\n */\nconst computeGroupsForTab = (\n  tab: SidebarTabContentType,\n  groups: ExtendedGroup[],\n  currentLang: string,\n): ExtendedGroup[] => {\n  const { collections: tabCollections, customItems, globals: tabGlobals } = tab\n\n  // If no specific collections/globals defined, show all\n  const showAll = !tabCollections && !tabGlobals\n  const allowedSlugs = new Set([...(tabCollections ?? []), ...(tabGlobals ?? [])])\n\n  let result: ExtendedGroup[] = []\n\n  if (showAll) {\n    result = groups.map((g) => ({ ...g, entities: [...g.entities] }))\n  } else if (allowedSlugs.size > 0) {\n    result = groups\n      .map((group) => ({\n        ...group,\n        entities: group.entities.filter((entity) => allowedSlugs.has(entity.slug)),\n      }))\n      .filter((group) => group.entities.length > 0)\n  }\n\n  // Merge custom items into groups\n  if (customItems && customItems.length > 0) {\n    const ungroupedItems: SidebarTabItem[] = []\n\n    for (const item of customItems) {\n      if (item.group) {\n        // Get localized group name for comparison\n        const itemGroupLabel = extractLocalizedValue(item.group, currentLang)\n\n        // Find existing group by comparing localized labels\n        const existingGroup = result.find((g) => {\n          const groupLabel = extractLocalizedValue(g.label, currentLang)\n          return groupLabel === itemGroupLabel\n        })\n\n        if (existingGroup) {\n          existingGroup.entities.push({\n            slug: item.slug,\n            type: 'custom',\n            href: item.href,\n            isExternal: item.isExternal,\n            label: item.label,\n          } as ExtendedEntity)\n        } else {\n          // Create new group\n          result.push({\n            entities: [\n              {\n                slug: item.slug,\n                type: 'custom',\n                href: item.href,\n                isExternal: item.isExternal,\n                label: item.label,\n              } as ExtendedEntity,\n            ],\n            label: item.group,\n          })\n        }\n      } else {\n        ungroupedItems.push(item)\n      }\n    }\n\n    // Add ungrouped items at the end\n    if (ungroupedItems.length > 0) {\n      result.push({\n        entities: ungroupedItems.map((item) => ({\n          slug: item.slug,\n          type: 'custom',\n          href: item.href,\n          isExternal: item.isExternal,\n          label: item.label,\n        })) as ExtendedEntity[],\n        label: '',\n      })\n    }\n  }\n\n  return result\n}\n\nexport const SidebarContent: React.FC<SidebarContentProps> = ({\n  afterNavLinks,\n  beforeNavLinks,\n  groups,\n  initialActiveTabId,\n  navPreferences,\n  settingsMenu,\n  sidebarConfig,\n}) => {\n  const { i18n } = useTranslation()\n  const currentLang = i18n.language\n\n  const tabs = useMemo(\n    () => sidebarConfig.tabs?.filter((t): t is SidebarTabContentType => t.type === 'tab') ?? [],\n    [sidebarConfig.tabs],\n  )\n\n  const [activeTabId, setActiveTabId] = useState(initialActiveTabId)\n\n  const handleTabChange = useCallback((tabId: string) => {\n    setActiveTabId(tabId)\n    setTabCookie(tabId)\n  }, [])\n\n  // Build groups for all tabs at once to keep them mounted\n  const groupsPerTab = useMemo(() => {\n    const result: Record<string, ExtendedGroup[]> = {}\n    for (const tab of tabs) {\n      result[tab.id] = computeGroupsForTab(tab, groups, currentLang)\n    }\n    return result\n  }, [tabs, groups, currentLang])\n\n  // Fallback: if no tabs defined, show all groups\n  const hasTabs = tabs.length > 0\n\n  return (\n    <SidebarWrapper baseClass={baseClass}>\n      <TabsBar\n        activeTabId={activeTabId}\n        onTabChange={handleTabChange}\n        settingsMenu={settingsMenu}\n        sidebarConfig={sidebarConfig}\n      />\n      <nav className={`${baseClass}__content`}>\n        <div className={`${baseClass}__content-scroll`}>\n          {beforeNavLinks}\n          {hasTabs ? (\n            // Render all tabs but hide inactive ones to preserve NavGroup state\n            tabs.map((tab) => {\n              const isActive = activeTabId === tab.id\n              return (\n                <div\n                  aria-hidden={!isActive}\n                  key={tab.id}\n                  style={{ display: isActive ? undefined : 'none' }}\n                >\n                  <EnhancedSidebarClient\n                    badges={sidebarConfig.badges}\n                    groups={groupsPerTab[tab.id] ?? []}\n                    navPreferences={navPreferences}\n                  />\n                </div>\n              )\n            })\n          ) : (\n            // No tabs defined - show all groups\n            <EnhancedSidebarClient\n              badges={sidebarConfig.badges}\n              groups={groups}\n              navPreferences={navPreferences}\n            />\n          )}\n          {afterNavLinks}\n        </div>\n      </nav>\n    </SidebarWrapper>\n  )\n}\n"],"names":["useTranslation","React","useCallback","useMemo","useState","extractLocalizedValue","EnhancedSidebarClient","SidebarWrapper","TabsBar","baseClass","COOKIE_KEY","setTabCookie","tabId","document","cookie","computeGroupsForTab","tab","groups","currentLang","collections","tabCollections","customItems","globals","tabGlobals","showAll","allowedSlugs","Set","result","map","g","entities","size","group","filter","entity","has","slug","length","ungroupedItems","item","itemGroupLabel","existingGroup","find","groupLabel","label","push","type","href","isExternal","SidebarContent","afterNavLinks","beforeNavLinks","initialActiveTabId","navPreferences","settingsMenu","sidebarConfig","i18n","language","tabs","t","activeTabId","setActiveTabId","handleTabChange","groupsPerTab","id","hasTabs","onTabChange","nav","className","div","isActive","aria-hidden","style","display","undefined","badges"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/EnhancedSidebar/SidebarContent.tsx"],"sourcesContent":["'use client'\n\nimport React, { useCallback, useMemo, useState } from 'react'\n\nimport type { EnhancedSidebarConfig } from '../../types'\n\nimport { EnhancedSidebarContext } from './context'\nimport { NavContent } from './NavContent'\nimport { SidebarWrapper } from './SidebarWrapper'\nimport { TabsBar } from './TabsBar'\n\nconst baseClass = 'enhanced-sidebar'\n\nexport type SidebarContentProps = {\n  afterNavLinks?: React.ReactNode\n  allContent?: React.ReactNode\n  beforeNavLinks?: React.ReactNode\n  customNavContent?: React.ReactNode\n  initialActiveTabId: string\n  renderedTabItems?: React.ReactNode[]\n  settingsMenu?: React.ReactNode[]\n  sidebarConfig: EnhancedSidebarConfig\n  tabIcons?: Record<string, React.ReactNode>\n  tabsContent: Record<string, React.ReactNode>\n}\n\nconst COOKIE_KEY = 'payload-enhanced-sidebar-active-tab'\n\nconst setTabCookie = (tabId: string) => {\n  document.cookie = `${COOKIE_KEY}=${tabId}; path=/; max-age=31536000; SameSite=Lax`\n}\n\nexport const SidebarContent: React.FC<SidebarContentProps> = ({\n  afterNavLinks,\n  allContent,\n  beforeNavLinks,\n  customNavContent,\n  initialActiveTabId,\n  renderedTabItems,\n  settingsMenu,\n  sidebarConfig,\n  tabIcons,\n  tabsContent,\n}) => {\n  const [activeTabId, setActiveTabId] = useState(initialActiveTabId)\n\n  const handleTabChange = useCallback((tabId: string) => {\n    setActiveTabId(tabId)\n    setTabCookie(tabId)\n  }, [])\n\n  const contextValue = useMemo(\n    () => ({ activeTabId, onTabChange: handleTabChange }),\n    [activeTabId, handleTabChange],\n  )\n\n  const tabs = sidebarConfig.tabs?.filter((t) => t.type === 'tab') ?? []\n\n  return (\n    <EnhancedSidebarContext.Provider value={contextValue}>\n      <SidebarWrapper baseClass={baseClass}>\n        <TabsBar\n          activeTabId={activeTabId}\n          onTabChange={handleTabChange}\n          renderedTabItems={renderedTabItems}\n          settingsMenu={settingsMenu}\n          sidebarConfig={sidebarConfig}\n          tabIcons={tabIcons}\n        />\n        {customNavContent ?? (\n          <NavContent\n            afterNavLinks={afterNavLinks}\n            allContent={allContent}\n            beforeNavLinks={beforeNavLinks}\n            tabs={tabs}\n            tabsContent={tabsContent}\n          />\n        )}\n      </SidebarWrapper>\n    </EnhancedSidebarContext.Provider>\n  )\n}\n"],"names":["React","useCallback","useMemo","useState","EnhancedSidebarContext","NavContent","SidebarWrapper","TabsBar","baseClass","COOKIE_KEY","setTabCookie","tabId","document","cookie","SidebarContent","afterNavLinks","allContent","beforeNavLinks","customNavContent","initialActiveTabId","renderedTabItems","settingsMenu","sidebarConfig","tabIcons","tabsContent","activeTabId","setActiveTabId","handleTabChange","contextValue","onTabChange","tabs","filter","t","type","Provider","value"],"mappings":"AAAA;;AAEA,OAAOA,SAASC,WAAW,EAAEC,OAAO,EAAEC,QAAQ,QAAQ,QAAO;AAI7D,SAASC,sBAAsB,QAAQ,YAAW;AAClD,SAASC,UAAU,QAAQ,eAAc;AACzC,SAASC,cAAc,QAAQ,mBAAkB;AACjD,SAASC,OAAO,QAAQ,YAAW;AAEnC,MAAMC,YAAY;AAelB,MAAMC,aAAa;AAEnB,MAAMC,eAAe,CAACC;IACpBC,SAASC,MAAM,GAAG,GAAGJ,WAAW,CAAC,EAAEE,MAAM,wCAAwC,CAAC;AACpF;AAEA,OAAO,MAAMG,iBAAgD,CAAC,EAC5DC,aAAa,EACbC,UAAU,EACVC,cAAc,EACdC,gBAAgB,EAChBC,kBAAkB,EAClBC,gBAAgB,EAChBC,YAAY,EACZC,aAAa,EACbC,QAAQ,EACRC,WAAW,EACZ;IACC,MAAM,CAACC,aAAaC,eAAe,GAAGvB,SAASgB;IAE/C,MAAMQ,kBAAkB1B,YAAY,CAACU;QACnCe,eAAef;QACfD,aAAaC;IACf,GAAG,EAAE;IAEL,MAAMiB,eAAe1B,QACnB,IAAO,CAAA;YAAEuB;YAAaI,aAAaF;QAAgB,CAAA,GACnD;QAACF;QAAaE;KAAgB;IAGhC,MAAMG,OAAOR,cAAcQ,IAAI,EAAEC,OAAO,CAACC,IAAMA,EAAEC,IAAI,KAAK,UAAU,EAAE;IAEtE,qBACE,KAAC7B,uBAAuB8B,QAAQ;QAACC,OAAOP;kBACtC,cAAA,MAACtB;YAAeE,WAAWA;;8BACzB,KAACD;oBACCkB,aAAaA;oBACbI,aAAaF;oBACbP,kBAAkBA;oBAClBC,cAAcA;oBACdC,eAAeA;oBACfC,UAAUA;;gBAEXL,kCACC,KAACb;oBACCU,eAAeA;oBACfC,YAAYA;oBACZC,gBAAgBA;oBAChBa,MAAMA;oBACNN,aAAaA;;;;;AAMzB,EAAC"}

package/dist/components/EnhancedSidebar/TabsBar/TabItem.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import type { SidebarTabContent, SidebarTabLink } from '../../../types';
 type TabButtonProps = {
+    icon?: React.ReactNode;
     isActive: boolean;
     onTabChange: (tabId: string) => void;
     tab: SidebarTabContent;
@@ -8,6 +9,7 @@ type TabButtonProps = {
 export declare const TabButton: React.FC<TabButtonProps>;
 type TabLinkProps = {
     href: string;
+    icon?: React.ReactNode;
     isActive: boolean;
     link: SidebarTabLink;
 };

package/dist/components/EnhancedSidebar/TabsBar/TabItem.js

@@ -7,7 +7,7 @@ import { Badge } from '../Badge';
 import { useBadge } from '../hooks/useBadge';
 import { Icon } from '../Icon';
 const tabsBaseClass = 'tabs-bar';
-export const TabButton = ({ isActive, onTabChange, tab })=>{
+export const TabButton = ({ icon, isActive, onTabChange, tab })=>{
     const { i18n } = useTranslation();
     const label = getTranslation(tab.label, i18n);
     const { value } = useBadge(tab.badge, tab.id);
@@ -17,7 +17,7 @@ export const TabButton = ({ isActive, onTabChange, tab })=>{
         title: label,
         type: "button",
         children: [
-            /*#__PURE__*/ _jsx(Icon, {
+            icon ?? /*#__PURE__*/ _jsx(Icon, {
                 name: tab.icon,
                 size: 20
             }),
@@ -29,7 +29,7 @@ export const TabButton = ({ isActive, onTabChange, tab })=>{
         ]
     });
 };
-export const TabLink = ({ href, isActive, link })=>{
+export const TabLink = ({ href, icon, isActive, link })=>{
     const { i18n } = useTranslation();
     const label = getTranslation(link.label, i18n);
     const { value } = useBadge(link.badge, link.id);
@@ -40,7 +40,7 @@ export const TabLink = ({ href, isActive, link })=>{
         target: link.isExternal ? '_blank' : undefined,
         title: label,
         children: [
-            /*#__PURE__*/ _jsx(Icon, {
+            icon ?? /*#__PURE__*/ _jsx(Icon, {
                 name: link.icon,
                 size: 20
             }),

package/dist/components/EnhancedSidebar/TabsBar/TabItem.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/EnhancedSidebar/TabsBar/TabItem.tsx"],"sourcesContent":["'use client'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport { Link, useTranslation } from '@payloadcms/ui'\nimport React from 'react'\n\nimport type { SidebarTabContent, SidebarTabLink } from '../../../types'\n\nimport { Badge } from '../Badge'\nimport { useBadge } from '../hooks/useBadge'\nimport { Icon } from '../Icon'\n\nconst tabsBaseClass = 'tabs-bar'\n\ntype TabButtonProps = {\n  isActive: boolean\n  onTabChange: (tabId: string) => void\n  tab: SidebarTabContent\n}\n\nexport const TabButton: React.FC<TabButtonProps> = ({ isActive, onTabChange, tab }) => {\n  const { i18n } = useTranslation()\n  const label = getTranslation(tab.label, i18n)\n  const { value } = useBadge(tab.badge, tab.id)\n\n  return (\n    <button\n      className={`${tabsBaseClass}__tab ${isActive ? `${tabsBaseClass}__tab--active` : ''}`}\n      onClick={() => onTabChange(tab.id)}\n      title={label}\n      type=\"button\"\n    >\n      <Icon name={tab.icon} size={20} />\n      {value !== undefined && <Badge color={tab.badge?.color} position=\"absolute\" value={value} />}\n    </button>\n  )\n}\n\ntype TabLinkProps = {\n  href: string\n  isActive: boolean\n  link: SidebarTabLink\n}\n\nexport const TabLink: React.FC<TabLinkProps> = ({ href, isActive, link }) => {\n  const { i18n } = useTranslation()\n  const label = getTranslation(link.label, i18n)\n  const { value } = useBadge(link.badge, link.id)\n\n  return (\n    <Link\n      className={`${tabsBaseClass}__link ${isActive ? `${tabsBaseClass}__link--active` : ''}`}\n      href={href}\n      rel={link.isExternal ? 'noopener noreferrer' : undefined}\n      target={link.isExternal ? '_blank' : undefined}\n      title={label}\n    >\n      <Icon name={link.icon} size={20} />\n      {value !== undefined && <Badge color={link.badge?.color} position=\"absolute\" value={value} />}\n    </Link>\n  )\n}\n"],"names":["getTranslation","Link","useTranslation","React","Badge","useBadge","Icon","tabsBaseClass","TabButton","isActive","onTabChange","tab","i18n","label","value","badge","id","button","className","onClick","title","type","name","icon","size","undefined","color","position","TabLink","href","link","rel","isExternal","target"],"mappings":"AAAA;;AAEA,SAASA,cAAc,QAAQ,2BAA0B;AACzD,SAASC,IAAI,EAAEC,cAAc,QAAQ,iBAAgB;AACrD,OAAOC,WAAW,QAAO;AAIzB,SAASC,KAAK,QAAQ,WAAU;AAChC,SAASC,QAAQ,QAAQ,oBAAmB;AAC5C,SAASC,IAAI,QAAQ,UAAS;AAE9B,MAAMC,gBAAgB;AAQtB,OAAO,MAAMC,YAAsC,CAAC,EAAEC,QAAQ,EAAEC,WAAW,EAAEC,GAAG,EAAE;IAChF,MAAM,EAAEC,IAAI,EAAE,GAAGV;IACjB,MAAMW,QAAQb,eAAeW,IAAIE,KAAK,EAAED;IACxC,MAAM,EAAEE,KAAK,EAAE,GAAGT,SAASM,IAAII,KAAK,EAAEJ,IAAIK,EAAE;IAE5C,qBACE,MAACC;QACCC,WAAW,GAAGX,cAAc,MAAM,EAAEE,WAAW,GAAGF,cAAc,aAAa,CAAC,GAAG,IAAI;QACrFY,SAAS,IAAMT,YAAYC,IAAIK,EAAE;QACjCI,OAAOP;QACPQ,MAAK;;0BAEL,KAACf;gBAAKgB,MAAMX,IAAIY,IAAI;gBAAEC,MAAM;;YAC3BV,UAAUW,2BAAa,KAACrB;gBAAMsB,OAAOf,IAAII,KAAK,EAAEW;gBAAOC,UAAS;gBAAWb,OAAOA;;;;AAGzF,EAAC;AAQD,OAAO,MAAMc,UAAkC,CAAC,EAAEC,IAAI,EAAEpB,QAAQ,EAAEqB,IAAI,EAAE;IACtE,MAAM,EAAElB,IAAI,EAAE,GAAGV;IACjB,MAAMW,QAAQb,eAAe8B,KAAKjB,KAAK,EAAED;IACzC,MAAM,EAAEE,KAAK,EAAE,GAAGT,SAASyB,KAAKf,KAAK,EAAEe,KAAKd,EAAE;IAE9C,qBACE,MAACf;QACCiB,WAAW,GAAGX,cAAc,OAAO,EAAEE,WAAW,GAAGF,cAAc,cAAc,CAAC,GAAG,IAAI;QACvFsB,MAAMA;QACNE,KAAKD,KAAKE,UAAU,GAAG,wBAAwBP;QAC/CQ,QAAQH,KAAKE,UAAU,GAAG,WAAWP;QACrCL,OAAOP;;0BAEP,KAACP;gBAAKgB,MAAMQ,KAAKP,IAAI;gBAAEC,MAAM;;YAC5BV,UAAUW,2BAAa,KAACrB;gBAAMsB,OAAOI,KAAKf,KAAK,EAAEW;gBAAOC,UAAS;gBAAWb,OAAOA;;;;AAG1F,EAAC"}
+{"version":3,"sources":["../../../../src/components/EnhancedSidebar/TabsBar/TabItem.tsx"],"sourcesContent":["'use client'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport { Link, useTranslation } from '@payloadcms/ui'\nimport React from 'react'\n\nimport type { SidebarTabContent, SidebarTabLink } from '../../../types'\n\nimport { Badge } from '../Badge'\nimport { useBadge } from '../hooks/useBadge'\nimport { Icon } from '../Icon'\n\nconst tabsBaseClass = 'tabs-bar'\n\ntype TabButtonProps = {\n  icon?: React.ReactNode\n  isActive: boolean\n  onTabChange: (tabId: string) => void\n  tab: SidebarTabContent\n}\n\nexport const TabButton: React.FC<TabButtonProps> = ({ icon, isActive, onTabChange, tab }) => {\n  const { i18n } = useTranslation()\n  const label = getTranslation(tab.label, i18n)\n  const { value } = useBadge(tab.badge, tab.id)\n\n  return (\n    <button\n      className={`${tabsBaseClass}__tab ${isActive ? `${tabsBaseClass}__tab--active` : ''}`}\n      onClick={() => onTabChange(tab.id)}\n      title={label}\n      type=\"button\"\n    >\n      {icon ?? <Icon name={tab.icon!} size={20} />}\n      {value !== undefined && <Badge color={tab.badge?.color} position=\"absolute\" value={value} />}\n    </button>\n  )\n}\n\ntype TabLinkProps = {\n  href: string\n  icon?: React.ReactNode\n  isActive: boolean\n  link: SidebarTabLink\n}\n\nexport const TabLink: React.FC<TabLinkProps> = ({ href, icon, isActive, link }) => {\n  const { i18n } = useTranslation()\n  const label = getTranslation(link.label, i18n)\n  const { value } = useBadge(link.badge, link.id)\n\n  return (\n    <Link\n      className={`${tabsBaseClass}__link ${isActive ? `${tabsBaseClass}__link--active` : ''}`}\n      href={href}\n      rel={link.isExternal ? 'noopener noreferrer' : undefined}\n      target={link.isExternal ? '_blank' : undefined}\n      title={label}\n    >\n      {icon ?? <Icon name={link.icon!} size={20} />}\n      {value !== undefined && <Badge color={link.badge?.color} position=\"absolute\" value={value} />}\n    </Link>\n  )\n}\n"],"names":["getTranslation","Link","useTranslation","React","Badge","useBadge","Icon","tabsBaseClass","TabButton","icon","isActive","onTabChange","tab","i18n","label","value","badge","id","button","className","onClick","title","type","name","size","undefined","color","position","TabLink","href","link","rel","isExternal","target"],"mappings":"AAAA;;AAEA,SAASA,cAAc,QAAQ,2BAA0B;AACzD,SAASC,IAAI,EAAEC,cAAc,QAAQ,iBAAgB;AACrD,OAAOC,WAAW,QAAO;AAIzB,SAASC,KAAK,QAAQ,WAAU;AAChC,SAASC,QAAQ,QAAQ,oBAAmB;AAC5C,SAASC,IAAI,QAAQ,UAAS;AAE9B,MAAMC,gBAAgB;AAStB,OAAO,MAAMC,YAAsC,CAAC,EAAEC,IAAI,EAAEC,QAAQ,EAAEC,WAAW,EAAEC,GAAG,EAAE;IACtF,MAAM,EAAEC,IAAI,EAAE,GAAGX;IACjB,MAAMY,QAAQd,eAAeY,IAAIE,KAAK,EAAED;IACxC,MAAM,EAAEE,KAAK,EAAE,GAAGV,SAASO,IAAII,KAAK,EAAEJ,IAAIK,EAAE;IAE5C,qBACE,MAACC;QACCC,WAAW,GAAGZ,cAAc,MAAM,EAAEG,WAAW,GAAGH,cAAc,aAAa,CAAC,GAAG,IAAI;QACrFa,SAAS,IAAMT,YAAYC,IAAIK,EAAE;QACjCI,OAAOP;QACPQ,MAAK;;YAEJb,sBAAQ,KAACH;gBAAKiB,MAAMX,IAAIH,IAAI;gBAAGe,MAAM;;YACrCT,UAAUU,2BAAa,KAACrB;gBAAMsB,OAAOd,IAAII,KAAK,EAAEU;gBAAOC,UAAS;gBAAWZ,OAAOA;;;;AAGzF,EAAC;AASD,OAAO,MAAMa,UAAkC,CAAC,EAAEC,IAAI,EAAEpB,IAAI,EAAEC,QAAQ,EAAEoB,IAAI,EAAE;IAC5E,MAAM,EAAEjB,IAAI,EAAE,GAAGX;IACjB,MAAMY,QAAQd,eAAe8B,KAAKhB,KAAK,EAAED;IACzC,MAAM,EAAEE,KAAK,EAAE,GAAGV,SAASyB,KAAKd,KAAK,EAAEc,KAAKb,EAAE;IAE9C,qBACE,MAAChB;QACCkB,WAAW,GAAGZ,cAAc,OAAO,EAAEG,WAAW,GAAGH,cAAc,cAAc,CAAC,GAAG,IAAI;QACvFsB,MAAMA;QACNE,KAAKD,KAAKE,UAAU,GAAG,wBAAwBP;QAC/CQ,QAAQH,KAAKE,UAAU,GAAG,WAAWP;QACrCJ,OAAOP;;YAENL,sBAAQ,KAACH;gBAAKiB,MAAMO,KAAKrB,IAAI;gBAAGe,MAAM;;YACtCT,UAAUU,2BAAa,KAACrB;gBAAMsB,OAAOI,KAAKd,KAAK,EAAEU;gBAAOC,UAAS;gBAAWZ,OAAOA;;;;AAG1F,EAAC"}

package/dist/components/EnhancedSidebar/TabsBar/index.d.ts

@@ -4,7 +4,9 @@ import './index.scss';
 export type TabsBarProps = {
     activeTabId: string;
     onTabChange: (tabId: string) => void;
+    renderedTabItems?: React.ReactNode[];
     settingsMenu?: React.ReactNode[];
     sidebarConfig: EnhancedSidebarConfig;
+    tabIcons?: Record<string, React.ReactNode>;
 };
 export declare const TabsBar: React.FC<TabsBarProps>;