@veiag/payload-enhanced-sidebar 0.2.0 → 0.3.0-beta.0

package/dist/types.d.ts

@@ -84,10 +84,48 @@ export type BadgeConfig = BadgeConfigApi | BadgeConfigCollectionCount | BadgeCon
  * Badge values provided via BadgeProvider context
  */
 export type BadgeValues = Record<string, number | ReactNode>;
+/**
+ * Path to a component, either as a plain string or as an object with a path and
+ * additional client props to forward to the component. Follows Payload's component format.
+ *
+ * @example
+ * ```typescript
+ * // Simple path
+ * iconComponent: './components/Icons#TabIcon'
+ *
+ * // With client props — useful for a single component shared across all tabs
+ * iconComponent: {
+ *   path: './components/Icons#TabIcon',
+ *   clientProps: { icon: 'house' },
+ * }
+ * ```
+ */
+export type SidebarComponent = {
+    /** Additional props forwarded to the component on the client */
+    clientProps?: Record<string, unknown>;
+    /** Component path in Payload's format: `'./path/to/file#ExportName'` */
+    path: string;
+} | string;
+/**
+ * Mutually exclusive icon config: either a Lucide icon name OR a custom icon component path.
+ */
+type TabIconConfig = {
+    /** Icon name from lucide-react */
+    icon: IconName;
+    iconComponent?: never;
+} | {
+    icon?: never;
+    /**
+     * Path to a custom icon component. Receives `CustomTabIconProps`.
+     * Supports a plain string path or `{ path, clientProps }` to forward extra props.
+     * Registered automatically in the import map.
+     */
+    iconComponent: SidebarComponent;
+};
 /**
  * Sidebar tab that shows content when selected
  */
-export interface SidebarTabContent {
+export type SidebarTabContent = {
     /**
      * Badge configuration for this tab.
      * Shows a badge on the tab icon in the tabs bar.
@@ -111,38 +149,34 @@ export interface SidebarTabContent {
      * Use global slugs.
      */
     globals?: GlobalSlug[];
-    /** Icon name from lucide-react */
-    icon: IconName;
     /** Unique identifier for the tab */
     id: string;
     /** Tooltip/label for the tab */
     label: LocalizedString;
     type: 'tab';
-}
-interface SidebarTabLinkBase {
+} & TabIconConfig;
+type SidebarTabLinkBase = {
     /**
      * Badge configuration for this link.
      * Shows a badge on the link icon in the tabs bar.
      */
     badge?: BadgeConfig;
-    /** Icon name from lucide-react */
-    icon: IconName;
     /** Unique identifier */
     id: string;
     /** Tooltip/label */
     label: LocalizedString;
     type: 'link';
-}
-interface SidebarTabLinkExternal extends SidebarTabLinkBase {
+} & TabIconConfig;
+type SidebarTabLinkExternal = {
     /** Link href (absolute URL) */
     href: string;
     isExternal: true;
-}
-interface SidebarTabLinkInternal extends SidebarTabLinkBase {
+} & SidebarTabLinkBase;
+type SidebarTabLinkInternal = {
     /** Link href (relative to admin route) */
     href: '' | `/${string}`;
     isExternal?: false;
-}
+} & SidebarTabLinkBase;
 /**
  * Sidebar link that navigates to a URL (not a tab)
  */
@@ -155,12 +189,24 @@ interface BaseSidebarTabItem {
     /**
      * Group to add this item to.
      * If matches an existing collection group label, item will be merged into that group.
-     * If no match found, a new group will be created.
-     * If not specified, item will be shown at the bottom as ungrouped.
+     * If no match found, a new group will be created with this label.
+     * If not specified, item will be shown as ungrouped (position controlled by `position`).
      */
     group?: LocalizedString;
     /** Display label */
     label: LocalizedString;
+    /**
+     * Where to place this item relative to collection groups in the tab.
+     * - `'top'` — appears above all collection/global groups
+     * - `'bottom'` — appears below all groups (default)
+     *
+     * Has no effect on items that are merged into an existing collection group via `group`.
+     * For new custom groups (unmatched `group` label), controls whether the group appears
+     * at the top or bottom of the nav.
+     *
+     * @default 'bottom'
+     */
+    position?: 'bottom' | 'top';
     /** Unique slug for the item */
     slug: string;
 }
@@ -180,6 +226,158 @@ interface InternalHrefItem extends BaseSidebarTabItem {
  * Custom item inside a sidebar tab
  */
 export type SidebarTabItem = ExternalHrefItem | InternalHrefItem;
+/**
+ * Props received by a custom NavItem component registered via `customComponents.NavItem`.
+ *
+ * Use the `useNavItemState(href)` hook to get reactive `isActive` / `isCurrentPage` values.
+ *
+ * @example
+ * ```tsx
+ * 'use client'
+ * import { useNavItemState } from '@veiag/payload-enhanced-sidebar'
+ * import type { CustomNavItemProps } from '@veiag/payload-enhanced-sidebar'
+ *
+ * export const MyNavItem: React.FC<CustomNavItemProps> = ({ entity, href, id, label, badgeConfig }) => {
+ *   const { isActive, isCurrentPage } = useNavItemState(href)
+ *   return <a href={href}>{label}</a>
+ * }
+ * ```
+ */
+export type CustomNavItemProps = {
+    /** Badge configuration as defined in the plugin config */
+    badgeConfig?: BadgeConfig;
+    /** The entity (collection, global, or custom item) */
+    entity: ExtendedEntity;
+    /** Computed href with admin route prefix applied */
+    href: string;
+    /** DOM element id */
+    id: string;
+    /** Pre-translated label string */
+    label: string;
+};
+/**
+ * Props received by a custom NavGroup component registered via `customComponents.NavGroup`.
+ *
+ * @example
+ * ```tsx
+ * 'use client'
+ * import type { CustomNavGroupProps } from '@veiag/payload-enhanced-sidebar'
+ *
+ * export const MyNavGroup: React.FC<CustomNavGroupProps> = ({ label, isOpen, children }) => {
+ *   return <div><strong>{label}</strong>{children}</div>
+ * }
+ * ```
+ */
+export type CustomNavGroupProps = {
+    /** Nav items inside the group */
+    children: ReactNode;
+    /** Initial open state from nav preferences */
+    isOpen?: boolean;
+    /** Translated group label */
+    label: string;
+};
+/**
+ * Props received by a custom tab icon component set via `iconComponent` on a tab or link.
+ *
+ * @example
+ * ```tsx
+ * 'use client'
+ * import type { CustomTabIconProps } from '@veiag/payload-enhanced-sidebar'
+ *
+ * export const MyIcon: React.FC<CustomTabIconProps> = ({ id, label }) => (
+ *   <img alt={label} src={`/icons/${id}.svg`} width={20} height={20} />
+ * )
+ * ```
+ */
+export type CustomTabIconProps = {
+    /** Tab/link id */
+    id: string;
+    /** Pre-translated label */
+    label: string;
+    /** Whether this item is a tab or a link */
+    type: 'link' | 'tab';
+};
+/**
+ * Props received by a custom TabButton component registered via `customComponents.TabButton`.
+ * Used for both `tab` and `link` type items in the tabs bar.
+ *
+ * Use `useTabState(id)` for tab active state, or `usePathname()` for link active state.
+ * Use `useEnhancedSidebar().onTabChange` to trigger tab switches.
+ *
+ * @example
+ * ```tsx
+ * 'use client'
+ * import type { CustomTabButtonProps } from '@veiag/payload-enhanced-sidebar'
+ * import { useTabState, useEnhancedSidebar } from '@veiag/payload-enhanced-sidebar'
+ *
+ * export const MyTabButton: React.FC<CustomTabButtonProps> = ({ id, type, icon, label, href }) => {
+ *   const { isActive } = useTabState(id)
+ *   const { onTabChange } = useEnhancedSidebar()
+ *   if (type === 'link') return <a href={href}>{icon}{label}</a>
+ *   return <button onClick={() => onTabChange(id)}>{icon}{label}</button>
+ * }
+ * ```
+ */
+export type CustomTabButtonProps = {
+    /** Badge configuration as defined in the plugin config */
+    badge?: BadgeConfig;
+    /** Computed href (for link type, with admin route prefix applied) */
+    href?: string;
+    /** Pre-rendered icon — either from `iconComponent` or the default Lucide icon */
+    icon: ReactNode;
+    /** Tab/link id */
+    id: string;
+    /** Whether the link is external (only set for link type) */
+    isExternal?: boolean;
+    /** Pre-translated label */
+    label: string;
+    /** Item type — use to differentiate rendering */
+    type: 'link' | 'tab';
+};
+/**
+ * Props received by a custom NavContent component registered via `customComponents.NavContent`.
+ *
+ * Renders in place of the default `<nav>` content area. Use the `useTabState(id)` hook
+ * to determine which tab is active and show/hide content accordingly.
+ *
+ * @example
+ * ```tsx
+ * 'use client'
+ * import type { CustomNavContentProps } from '@veiag/payload-enhanced-sidebar'
+ * import { useTabState } from '@veiag/payload-enhanced-sidebar'
+ *
+ * const TabPanel = ({ id, content }: { id: string; content: React.ReactNode }) => {
+ *   const { isActive } = useTabState(id)
+ *   return <div style={{ display: isActive ? undefined : 'none' }}>{content}</div>
+ * }
+ *
+ * export const MyNavContent: React.FC<CustomNavContentProps> = ({
+ *   tabs, tabsContent, beforeNavLinks, afterNavLinks,
+ * }) => {
+ *   return (
+ *     <nav>
+ *       {beforeNavLinks}
+ *       {tabs.map(tab => <TabPanel key={tab.id} id={tab.id} content={tabsContent[tab.id]} />)}
+ *       {afterNavLinks}
+ *     </nav>
+ *   )
+ * }
+ * ```
+ */
+export type CustomNavContentProps = {
+    /** Rendered afterNavLinks from payload config */
+    afterNavLinks?: ReactNode;
+    /** Content to show when no tabs are defined */
+    allContent?: ReactNode;
+    /** Rendered beforeNavLinks from payload config */
+    beforeNavLinks?: ReactNode;
+    /** Tab definitions (id only) for mapping over */
+    tabs: Array<{
+        id: string;
+    }>;
+    /** Pre-rendered content per tab id */
+    tabsContent: Record<string, ReactNode>;
+};
 /**
  * Configuration for the enhanced sidebar
  */
@@ -198,6 +396,37 @@ export interface EnhancedSidebarConfig {
      * ```
      */
     badges?: Record<string, BadgeConfig>;
+    /**
+     * Custom components to replace the default NavItem, NavGroup, and/or NavContent rendering.
+     * Each field accepts a plain path string or a `SidebarComponent` object `{ path, clientProps }`
+     * to forward additional props. The plugin registers them in the import map automatically.
+     *
+     * @example
+     * ```typescript
+     * customComponents: {
+     *   // Plain path
+     *   NavItem: './components/MySidebar#MyNavItem',
+     *   // With extra client props forwarded to the component
+     *   NavGroup: { path: './components/MySidebar#MyNavGroup', clientProps: { collapsible: true } },
+     * }
+     * ```
+     */
+    customComponents?: {
+        /**
+         * Custom NavContent component. Replaces the default `<nav>` content area.
+         * Receives `CustomNavContentProps`. Use `useTabState(id)` to check if a tab is active.
+         */
+        NavContent?: SidebarComponent;
+        /** Custom NavGroup component. Receives `CustomNavGroupProps`. */
+        NavGroup?: SidebarComponent;
+        /** Custom NavItem component. Receives `CustomNavItemProps`. */
+        NavItem?: SidebarComponent;
+        /**
+         * Custom tab button component. Used for both `tab` and `link` items in the tabs bar.
+         * Receives `CustomTabButtonProps`. Use `useTabState(id)` and `useEnhancedSidebar()` for state.
+         */
+        TabButton?: SidebarComponent;
+    };
     /**
      * Disable the plugin
      * @default false

package/dist/types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/types.ts"],"sourcesContent":["import type { icons, LucideIcon } from 'lucide-react'\nimport type { CollectionSlug, GlobalSlug, Where } from 'payload'\nimport type { ReactNode } from 'react'\n\nexport type IconName = keyof typeof icons\n\nexport type LocalizedString = { [locale: string]: string } | string\n\nexport type InternalIcon = IconName | LucideIcon\n\n// ============================================\n// Badge Types\n// ============================================\n\n/**\n * Available badge color variants\n */\nexport type BadgeColor = 'default' | 'error' | 'primary' | 'success' | 'warning'\n\n/**\n * Badge configuration Trr API-based fetching\n */\nexport interface BadgeConfigApi {\n  /**\n   * Badge color variant\n   * @default 'default'\n   */\n  color?: BadgeColor\n  /**\n   * API endpoint to fetch badge data from.\n   * Can be relative (to current origin) or absolute URL.\n   */\n  endpoint: string\n  /**\n   * HTTP method for the request\n   * @default 'GET'\n   */\n  method?: 'GET' | 'POST'\n  /**\n   * Key in the response object to extract the count from\n   * @default 'count'\n   */\n  responseKey?: string\n  type: 'api'\n}\n\n/**\n * Badge configuration for provider-based values.\n * Values are provided via BadgeProvider context.\n */\nexport interface BadgeConfigProvider {\n  /**\n   * Badge color variant\n   * @default 'default'\n   */\n  color?: BadgeColor\n  /**\n   * Slug to look up in the BadgeProvider values.\n   * If not specified, defaults to the item's id/slug.\n   */\n  slug?: string\n  type: 'provider'\n}\n\n/**\n * Badge configuration for automatic collection document count.\n * Fetches from /api/{collectionSlug}?limit=0 and uses totalDocs.\n */\nexport interface BadgeConfigCollectionCount {\n  /**\n   * Collection slug to count documents from.\n   * If not specified, defaults to the item's slug.\n   */\n  collectionSlug?: CollectionSlug\n  /**\n   * Badge color variant\n   * @default 'default'\n   */\n  color?: BadgeColor\n  type: 'collection-count'\n  /**\n   * Optional where query to filter documents.\n   * Will be serialized as query string.\n   * @example { status: { equals: 'draft' } }\n   */\n  where?: Where\n}\n\n/**\n * Badge configuration - union of all badge types\n */\nexport type BadgeConfig = BadgeConfigApi | BadgeConfigCollectionCount | BadgeConfigProvider\n\n/**\n * Badge values provided via BadgeProvider context\n */\nexport type BadgeValues = Record<string, number | ReactNode>\n\n// ============================================\n// Enhanced Sidebar Types\n// ============================================\n\n/**\n * Sidebar tab that shows content when selected\n */\nexport interface SidebarTabContent {\n  /**\n   * Badge configuration for this tab.\n   * Shows a badge on the tab icon in the tabs bar.\n   */\n  badge?: BadgeConfig\n  /**\n   * Collections to show in this tab.\n   * If not specified, no collections are shown (unless items are specified).\n   * Use collection slugs.\n   */\n  collections?: CollectionSlug[]\n  /**\n   * Custom items to add to this tab.\n   * Items with `group` will be merged into matching collection groups.\n   * Items without `group` will be shown at the bottom as a flat list.\n   */\n  customItems?: SidebarTabItem[]\n  /**\n   * Globals to show in this tab.\n   * If not specified, no globals are shown.\n   * Use global slugs.\n   */\n  globals?: GlobalSlug[]\n  /** Icon name from lucide-react */\n  icon: IconName\n  /** Unique identifier for the tab */\n  id: string\n  /** Tooltip/label for the tab */\n  label: LocalizedString\n  type: 'tab'\n}\n\ninterface SidebarTabLinkBase {\n  /**\n   * Badge configuration for this link.\n   * Shows a badge on the link icon in the tabs bar.\n   */\n  badge?: BadgeConfig\n  /** Icon name from lucide-react */\n  icon: IconName\n  /** Unique identifier */\n  id: string\n  /** Tooltip/label */\n  label: LocalizedString\n  type: 'link'\n}\ninterface SidebarTabLinkExternal extends SidebarTabLinkBase {\n  /** Link href (absolute URL) */\n  href: string\n  isExternal: true\n}\ninterface SidebarTabLinkInternal extends SidebarTabLinkBase {\n  /** Link href (relative to admin route) */\n  href: '' | `/${string}`\n  isExternal?: false\n}\n/**\n * Sidebar link that navigates to a URL (not a tab)\n */\nexport type SidebarTabLink = SidebarTabLinkExternal | SidebarTabLinkInternal\n/**\n * A tab or link in the sidebar tabs bar\n */\nexport type SidebarTab = SidebarTabContent | SidebarTabLink\n\ninterface BaseSidebarTabItem {\n  /**\n   * Group to add this item to.\n   * If matches an existing collection group label, item will be merged into that group.\n   * If no match found, a new group will be created.\n   * If not specified, item will be shown at the bottom as ungrouped.\n   */\n  group?: LocalizedString\n  /** Display label */\n  label: LocalizedString\n  /** Unique slug for the item */\n  slug: string\n}\ninterface ExternalHrefItem extends BaseSidebarTabItem {\n  /** Link href (absolute URL or relative to root) */\n  href: string\n  /** Whether the link is external, without admin route prefix. */\n  isExternal: true\n}\n\ninterface InternalHrefItem extends BaseSidebarTabItem {\n  /** Link href (relative to admin route) */\n  href: '' | `/${string}`\n  /** Whether the link is external, without admin route prefix. */\n  isExternal?: false\n}\n/**\n * Custom item inside a sidebar tab\n */\nexport type SidebarTabItem = ExternalHrefItem | InternalHrefItem\n\n/**\n * Configuration for the enhanced sidebar\n */\nexport interface EnhancedSidebarConfig {\n  /**\n   * Badge configurations for sidebar items (collections, globals, custom items).\n   * Key is the slug of the item.\n   *\n   * @example\n   * ```typescript\n   * badges: {\n   *   'posts': { type: 'collection-count', color: 'primary' },\n   *   'orders': { type: 'api', endpoint: '/api/orders/pending', responseKey: 'count' },\n   *   'notifications': { type: 'provider', color: 'error' },\n   * }\n   * ```\n   */\n  badges?: Record<string, BadgeConfig>\n\n  /**\n   * Disable the plugin\n   * @default false\n   */\n  disabled?: boolean\n\n  /**\n   * Custom icons for collections and globals in the default tab.\n   */\n  icons?: {\n    collections?: Partial<Record<CollectionSlug, IconName>>\n    globals?: Partial<Record<GlobalSlug, IconName>>\n  }\n\n  /**\n   * Show logout button at the bottom of the tabs bar.\n   * @default true\n   */\n  showLogout?: boolean\n\n  /**\n   * Tabs and links to show in the sidebar tabs bar.\n   * Order matters - items are rendered top to bottom.\n   *\n   * @default [{ type: 'tab', id: 'default', icon: 'LayoutGrid', label: 'Collections' }]\n   */\n  tabs?: SidebarTab[]\n}\n\n/**\n * Generic document type for collections, with dynamic keys.\n * We assume values are either string or number for simplicity, useAsTitle is making sure of that.\n */\nexport type GenericCollectionDocument = {\n  [key: string]: number | string\n  id: string\n}\n\ninterface BaseExtendedEntity {\n  label: Record<string, string> | string\n  slug: string\n  type: 'collection' | 'custom' | 'global'\n}\n\ninterface InternalExtendedEntity extends BaseExtendedEntity {\n  href?: '' | `/${string}`\n  isExternal?: false\n}\n\ninterface ExternalExtendedEntity extends BaseExtendedEntity {\n  href: string\n  isExternal: true\n}\n\nexport type ExtendedEntity = ExternalExtendedEntity | InternalExtendedEntity\n\nexport type ExtendedGroup = {\n  entities: ExtendedEntity[]\n  label: Record<string, string> | string\n}\n"],"names":[],"mappings":"AAqRA,WAGC"}
+{"version":3,"sources":["../src/types.ts"],"sourcesContent":["import type { icons, LucideIcon } from 'lucide-react'\nimport type { CollectionSlug, GlobalSlug, Where } from 'payload'\nimport type { ReactNode } from 'react'\n\nexport type IconName = keyof typeof icons\n\nexport type LocalizedString = { [locale: string]: string } | string\n\nexport type InternalIcon = IconName | LucideIcon\n\n// ============================================\n// Badge Types\n// ============================================\n\n/**\n * Available badge color variants\n */\nexport type BadgeColor = 'default' | 'error' | 'primary' | 'success' | 'warning'\n\n/**\n * Badge configuration Trr API-based fetching\n */\nexport interface BadgeConfigApi {\n  /**\n   * Badge color variant\n   * @default 'default'\n   */\n  color?: BadgeColor\n  /**\n   * API endpoint to fetch badge data from.\n   * Can be relative (to current origin) or absolute URL.\n   */\n  endpoint: string\n  /**\n   * HTTP method for the request\n   * @default 'GET'\n   */\n  method?: 'GET' | 'POST'\n  /**\n   * Key in the response object to extract the count from\n   * @default 'count'\n   */\n  responseKey?: string\n  type: 'api'\n}\n\n/**\n * Badge configuration for provider-based values.\n * Values are provided via BadgeProvider context.\n */\nexport interface BadgeConfigProvider {\n  /**\n   * Badge color variant\n   * @default 'default'\n   */\n  color?: BadgeColor\n  /**\n   * Slug to look up in the BadgeProvider values.\n   * If not specified, defaults to the item's id/slug.\n   */\n  slug?: string\n  type: 'provider'\n}\n\n/**\n * Badge configuration for automatic collection document count.\n * Fetches from /api/{collectionSlug}?limit=0 and uses totalDocs.\n */\nexport interface BadgeConfigCollectionCount {\n  /**\n   * Collection slug to count documents from.\n   * If not specified, defaults to the item's slug.\n   */\n  collectionSlug?: CollectionSlug\n  /**\n   * Badge color variant\n   * @default 'default'\n   */\n  color?: BadgeColor\n  type: 'collection-count'\n  /**\n   * Optional where query to filter documents.\n   * Will be serialized as query string.\n   * @example { status: { equals: 'draft' } }\n   */\n  where?: Where\n}\n\n/**\n * Badge configuration - union of all badge types\n */\nexport type BadgeConfig = BadgeConfigApi | BadgeConfigCollectionCount | BadgeConfigProvider\n\n/**\n * Badge values provided via BadgeProvider context\n */\nexport type BadgeValues = Record<string, number | ReactNode>\n\n// ============================================\n// Enhanced Sidebar Types\n// ============================================\n\n/**\n * Path to a component, either as a plain string or as an object with a path and\n * additional client props to forward to the component. Follows Payload's component format.\n *\n * @example\n * ```typescript\n * // Simple path\n * iconComponent: './components/Icons#TabIcon'\n *\n * // With client props — useful for a single component shared across all tabs\n * iconComponent: {\n *   path: './components/Icons#TabIcon',\n *   clientProps: { icon: 'house' },\n * }\n * ```\n */\nexport type SidebarComponent =\n  | {\n      /** Additional props forwarded to the component on the client */\n      clientProps?: Record<string, unknown>\n      /** Component path in Payload's format: `'./path/to/file#ExportName'` */\n      path: string\n    }\n  | string\n\n/**\n * Mutually exclusive icon config: either a Lucide icon name OR a custom icon component path.\n */\ntype TabIconConfig =\n  | {\n      /** Icon name from lucide-react */\n      icon: IconName\n      iconComponent?: never\n    }\n  | {\n      icon?: never\n      /**\n       * Path to a custom icon component. Receives `CustomTabIconProps`.\n       * Supports a plain string path or `{ path, clientProps }` to forward extra props.\n       * Registered automatically in the import map.\n       */\n      iconComponent: SidebarComponent\n    }\n\n/**\n * Sidebar tab that shows content when selected\n */\nexport type SidebarTabContent = {\n  /**\n   * Badge configuration for this tab.\n   * Shows a badge on the tab icon in the tabs bar.\n   */\n  badge?: BadgeConfig\n  /**\n   * Collections to show in this tab.\n   * If not specified, no collections are shown (unless items are specified).\n   * Use collection slugs.\n   */\n  collections?: CollectionSlug[]\n  /**\n   * Custom items to add to this tab.\n   * Items with `group` will be merged into matching collection groups.\n   * Items without `group` will be shown at the bottom as a flat list.\n   */\n  customItems?: SidebarTabItem[]\n  /**\n   * Globals to show in this tab.\n   * If not specified, no globals are shown.\n   * Use global slugs.\n   */\n  globals?: GlobalSlug[]\n  /** Unique identifier for the tab */\n  id: string\n  /** Tooltip/label for the tab */\n  label: LocalizedString\n  type: 'tab'\n} & TabIconConfig\n\ntype SidebarTabLinkBase = {\n  /**\n   * Badge configuration for this link.\n   * Shows a badge on the link icon in the tabs bar.\n   */\n  badge?: BadgeConfig\n  /** Unique identifier */\n  id: string\n  /** Tooltip/label */\n  label: LocalizedString\n  type: 'link'\n} & TabIconConfig\ntype SidebarTabLinkExternal = {\n  /** Link href (absolute URL) */\n  href: string\n  isExternal: true\n} & SidebarTabLinkBase\ntype SidebarTabLinkInternal = {\n  /** Link href (relative to admin route) */\n  href: '' | `/${string}`\n  isExternal?: false\n} & SidebarTabLinkBase\n/**\n * Sidebar link that navigates to a URL (not a tab)\n */\nexport type SidebarTabLink = SidebarTabLinkExternal | SidebarTabLinkInternal\n/**\n * A tab or link in the sidebar tabs bar\n */\nexport type SidebarTab = SidebarTabContent | SidebarTabLink\n\ninterface BaseSidebarTabItem {\n  /**\n   * Group to add this item to.\n   * If matches an existing collection group label, item will be merged into that group.\n   * If no match found, a new group will be created with this label.\n   * If not specified, item will be shown as ungrouped (position controlled by `position`).\n   */\n  group?: LocalizedString\n  /** Display label */\n  label: LocalizedString\n  /**\n   * Where to place this item relative to collection groups in the tab.\n   * - `'top'` — appears above all collection/global groups\n   * - `'bottom'` — appears below all groups (default)\n   *\n   * Has no effect on items that are merged into an existing collection group via `group`.\n   * For new custom groups (unmatched `group` label), controls whether the group appears\n   * at the top or bottom of the nav.\n   *\n   * @default 'bottom'\n   */\n  position?: 'bottom' | 'top'\n  /** Unique slug for the item */\n  slug: string\n}\ninterface ExternalHrefItem extends BaseSidebarTabItem {\n  /** Link href (absolute URL or relative to root) */\n  href: string\n  /** Whether the link is external, without admin route prefix. */\n  isExternal: true\n}\n\ninterface InternalHrefItem extends BaseSidebarTabItem {\n  /** Link href (relative to admin route) */\n  href: '' | `/${string}`\n  /** Whether the link is external, without admin route prefix. */\n  isExternal?: false\n}\n/**\n * Custom item inside a sidebar tab\n */\nexport type SidebarTabItem = ExternalHrefItem | InternalHrefItem\n\n// ============================================\n// Custom Component Types\n// ============================================\n\n/**\n * Props received by a custom NavItem component registered via `customComponents.NavItem`.\n *\n * Use the `useNavItemState(href)` hook to get reactive `isActive` / `isCurrentPage` values.\n *\n * @example\n * ```tsx\n * 'use client'\n * import { useNavItemState } from '@veiag/payload-enhanced-sidebar'\n * import type { CustomNavItemProps } from '@veiag/payload-enhanced-sidebar'\n *\n * export const MyNavItem: React.FC<CustomNavItemProps> = ({ entity, href, id, label, badgeConfig }) => {\n *   const { isActive, isCurrentPage } = useNavItemState(href)\n *   return <a href={href}>{label}</a>\n * }\n * ```\n */\nexport type CustomNavItemProps = {\n  /** Badge configuration as defined in the plugin config */\n  badgeConfig?: BadgeConfig\n  /** The entity (collection, global, or custom item) */\n  entity: ExtendedEntity\n  /** Computed href with admin route prefix applied */\n  href: string\n  /** DOM element id */\n  id: string\n  /** Pre-translated label string */\n  label: string\n}\n\n/**\n * Props received by a custom NavGroup component registered via `customComponents.NavGroup`.\n *\n * @example\n * ```tsx\n * 'use client'\n * import type { CustomNavGroupProps } from '@veiag/payload-enhanced-sidebar'\n *\n * export const MyNavGroup: React.FC<CustomNavGroupProps> = ({ label, isOpen, children }) => {\n *   return <div><strong>{label}</strong>{children}</div>\n * }\n * ```\n */\nexport type CustomNavGroupProps = {\n  /** Nav items inside the group */\n  children: ReactNode\n  /** Initial open state from nav preferences */\n  isOpen?: boolean\n  /** Translated group label */\n  label: string\n}\n\n/**\n * Props received by a custom tab icon component set via `iconComponent` on a tab or link.\n *\n * @example\n * ```tsx\n * 'use client'\n * import type { CustomTabIconProps } from '@veiag/payload-enhanced-sidebar'\n *\n * export const MyIcon: React.FC<CustomTabIconProps> = ({ id, label }) => (\n *   <img alt={label} src={`/icons/${id}.svg`} width={20} height={20} />\n * )\n * ```\n */\nexport type CustomTabIconProps = {\n  /** Tab/link id */\n  id: string\n  /** Pre-translated label */\n  label: string\n  /** Whether this item is a tab or a link */\n  type: 'link' | 'tab'\n}\n\n/**\n * Props received by a custom TabButton component registered via `customComponents.TabButton`.\n * Used for both `tab` and `link` type items in the tabs bar.\n *\n * Use `useTabState(id)` for tab active state, or `usePathname()` for link active state.\n * Use `useEnhancedSidebar().onTabChange` to trigger tab switches.\n *\n * @example\n * ```tsx\n * 'use client'\n * import type { CustomTabButtonProps } from '@veiag/payload-enhanced-sidebar'\n * import { useTabState, useEnhancedSidebar } from '@veiag/payload-enhanced-sidebar'\n *\n * export const MyTabButton: React.FC<CustomTabButtonProps> = ({ id, type, icon, label, href }) => {\n *   const { isActive } = useTabState(id)\n *   const { onTabChange } = useEnhancedSidebar()\n *   if (type === 'link') return <a href={href}>{icon}{label}</a>\n *   return <button onClick={() => onTabChange(id)}>{icon}{label}</button>\n * }\n * ```\n */\nexport type CustomTabButtonProps = {\n  /** Badge configuration as defined in the plugin config */\n  badge?: BadgeConfig\n  /** Computed href (for link type, with admin route prefix applied) */\n  href?: string\n  /** Pre-rendered icon — either from `iconComponent` or the default Lucide icon */\n  icon: ReactNode\n  /** Tab/link id */\n  id: string\n  /** Whether the link is external (only set for link type) */\n  isExternal?: boolean\n  /** Pre-translated label */\n  label: string\n  /** Item type — use to differentiate rendering */\n  type: 'link' | 'tab'\n}\n\n/**\n * Props received by a custom NavContent component registered via `customComponents.NavContent`.\n *\n * Renders in place of the default `<nav>` content area. Use the `useTabState(id)` hook\n * to determine which tab is active and show/hide content accordingly.\n *\n * @example\n * ```tsx\n * 'use client'\n * import type { CustomNavContentProps } from '@veiag/payload-enhanced-sidebar'\n * import { useTabState } from '@veiag/payload-enhanced-sidebar'\n *\n * const TabPanel = ({ id, content }: { id: string; content: React.ReactNode }) => {\n *   const { isActive } = useTabState(id)\n *   return <div style={{ display: isActive ? undefined : 'none' }}>{content}</div>\n * }\n *\n * export const MyNavContent: React.FC<CustomNavContentProps> = ({\n *   tabs, tabsContent, beforeNavLinks, afterNavLinks,\n * }) => {\n *   return (\n *     <nav>\n *       {beforeNavLinks}\n *       {tabs.map(tab => <TabPanel key={tab.id} id={tab.id} content={tabsContent[tab.id]} />)}\n *       {afterNavLinks}\n *     </nav>\n *   )\n * }\n * ```\n */\nexport type CustomNavContentProps = {\n  /** Rendered afterNavLinks from payload config */\n  afterNavLinks?: ReactNode\n  /** Content to show when no tabs are defined */\n  allContent?: ReactNode\n  /** Rendered beforeNavLinks from payload config */\n  beforeNavLinks?: ReactNode\n  /** Tab definitions (id only) for mapping over */\n  tabs: Array<{ id: string }>\n  /** Pre-rendered content per tab id */\n  tabsContent: Record<string, ReactNode>\n}\n\n/**\n * Configuration for the enhanced sidebar\n */\nexport interface EnhancedSidebarConfig {\n  /**\n   * Badge configurations for sidebar items (collections, globals, custom items).\n   * Key is the slug of the item.\n   *\n   * @example\n   * ```typescript\n   * badges: {\n   *   'posts': { type: 'collection-count', color: 'primary' },\n   *   'orders': { type: 'api', endpoint: '/api/orders/pending', responseKey: 'count' },\n   *   'notifications': { type: 'provider', color: 'error' },\n   * }\n   * ```\n   */\n  badges?: Record<string, BadgeConfig>\n\n  /**\n   * Custom components to replace the default NavItem, NavGroup, and/or NavContent rendering.\n   * Each field accepts a plain path string or a `SidebarComponent` object `{ path, clientProps }`\n   * to forward additional props. The plugin registers them in the import map automatically.\n   *\n   * @example\n   * ```typescript\n   * customComponents: {\n   *   // Plain path\n   *   NavItem: './components/MySidebar#MyNavItem',\n   *   // With extra client props forwarded to the component\n   *   NavGroup: { path: './components/MySidebar#MyNavGroup', clientProps: { collapsible: true } },\n   * }\n   * ```\n   */\n  customComponents?: {\n    /**\n     * Custom NavContent component. Replaces the default `<nav>` content area.\n     * Receives `CustomNavContentProps`. Use `useTabState(id)` to check if a tab is active.\n     */\n    NavContent?: SidebarComponent\n    /** Custom NavGroup component. Receives `CustomNavGroupProps`. */\n    NavGroup?: SidebarComponent\n    /** Custom NavItem component. Receives `CustomNavItemProps`. */\n    NavItem?: SidebarComponent\n    /**\n     * Custom tab button component. Used for both `tab` and `link` items in the tabs bar.\n     * Receives `CustomTabButtonProps`. Use `useTabState(id)` and `useEnhancedSidebar()` for state.\n     */\n    TabButton?: SidebarComponent\n  }\n\n  /**\n   * Disable the plugin\n   * @default false\n   */\n  disabled?: boolean\n\n  /**\n   * Custom icons for collections and globals in the default tab.\n   */\n  icons?: {\n    collections?: Partial<Record<CollectionSlug, IconName>>\n    globals?: Partial<Record<GlobalSlug, IconName>>\n  }\n\n  /**\n   * Show logout button at the bottom of the tabs bar.\n   * @default true\n   */\n  showLogout?: boolean\n\n  /**\n   * Tabs and links to show in the sidebar tabs bar.\n   * Order matters - items are rendered top to bottom.\n   *\n   * @default [{ type: 'tab', id: 'default', icon: 'LayoutGrid', label: 'Collections' }]\n   */\n  tabs?: SidebarTab[]\n}\n\n/**\n * Generic document type for collections, with dynamic keys.\n * We assume values are either string or number for simplicity, useAsTitle is making sure of that.\n */\nexport type GenericCollectionDocument = {\n  [key: string]: number | string\n  id: string\n}\n\ninterface BaseExtendedEntity {\n  label: Record<string, string> | string\n  slug: string\n  type: 'collection' | 'custom' | 'global'\n}\n\ninterface InternalExtendedEntity extends BaseExtendedEntity {\n  href?: '' | `/${string}`\n  isExternal?: false\n}\n\ninterface ExternalExtendedEntity extends BaseExtendedEntity {\n  href: string\n  isExternal: true\n}\n\nexport type ExtendedEntity = ExternalExtendedEntity | InternalExtendedEntity\n\nexport type ExtendedGroup = {\n  entities: ExtendedEntity[]\n  label: Record<string, string> | string\n}\n"],"names":[],"mappings":"AAwgBA,WAGC"}

package/dist/utils/index.d.ts

@@ -1,3 +1,10 @@
-import type { LocalizedString } from '../types';
+import type { LocalizedString, SidebarComponent } from '../types';
 export declare const convertSlugToTitle: (slug: string) => string;
+/**
+ * Extracts path and clientProps from a SidebarComponent (string or object).
+ */
+export declare const resolveSidebarComponent: (component: SidebarComponent) => {
+    clientProps: Record<string, unknown>;
+    path: string;
+};
 export declare const extractLocalizedValue: (value: LocalizedString | undefined, locale: string, fallbackSlug?: string) => string;

package/dist/utils/index.js

@@ -1,6 +1,20 @@
 export const convertSlugToTitle = (slug)=>{
     return slug.replace(/-/g, ' ').replace(/\b\w/g, (char)=>char.toUpperCase());
 };
+/**
+ * Extracts path and clientProps from a SidebarComponent (string or object).
+ */ export const resolveSidebarComponent = (component)=>{
+    if (typeof component === 'string') {
+        return {
+            clientProps: {},
+            path: component
+        };
+    }
+    return {
+        clientProps: component.clientProps ?? {},
+        path: component.path
+    };
+};
 export const extractLocalizedValue = (value, locale, fallbackSlug)=>{
     if (!value) {
         return fallbackSlug ? convertSlugToTitle(fallbackSlug) : '';

package/dist/utils/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/utils/index.ts"],"sourcesContent":["import type { LocalizedString } from '../types'\n\nexport const convertSlugToTitle = (slug: string): string => {\n  return slug.replace(/-/g, ' ').replace(/\\b\\w/g, (char) => char.toUpperCase())\n}\n\nexport const extractLocalizedValue = (\n  value: LocalizedString | undefined,\n  locale: string,\n  fallbackSlug?: string,\n): string => {\n  if (!value) {\n    return fallbackSlug ? convertSlugToTitle(fallbackSlug) : ''\n  }\n  if (typeof value === 'string') {\n    return value\n  }\n  return value[locale] || Object.values(value)[0] || (fallbackSlug ? convertSlugToTitle(fallbackSlug) : '')\n}\n"],"names":["convertSlugToTitle","slug","replace","char","toUpperCase","extractLocalizedValue","value","locale","fallbackSlug","Object","values"],"mappings":"AAEA,OAAO,MAAMA,qBAAqB,CAACC;IACjC,OAAOA,KAAKC,OAAO,CAAC,MAAM,KAAKA,OAAO,CAAC,SAAS,CAACC,OAASA,KAAKC,WAAW;AAC5E,EAAC;AAED,OAAO,MAAMC,wBAAwB,CACnCC,OACAC,QACAC;IAEA,IAAI,CAACF,OAAO;QACV,OAAOE,eAAeR,mBAAmBQ,gBAAgB;IAC3D;IACA,IAAI,OAAOF,UAAU,UAAU;QAC7B,OAAOA;IACT;IACA,OAAOA,KAAK,CAACC,OAAO,IAAIE,OAAOC,MAAM,CAACJ,MAAM,CAAC,EAAE,IAAKE,CAAAA,eAAeR,mBAAmBQ,gBAAgB,EAAC;AACzG,EAAC"}
+{"version":3,"sources":["../../src/utils/index.ts"],"sourcesContent":["import type { LocalizedString, SidebarComponent } from '../types'\n\nexport const convertSlugToTitle = (slug: string): string => {\n  return slug.replace(/-/g, ' ').replace(/\\b\\w/g, (char) => char.toUpperCase())\n}\n\n/**\n * Extracts path and clientProps from a SidebarComponent (string or object).\n */\nexport const resolveSidebarComponent = (\n  component: SidebarComponent,\n): { clientProps: Record<string, unknown>; path: string } => {\n  if (typeof component === 'string') {\n    return { clientProps: {}, path: component }\n  }\n  return { clientProps: component.clientProps ?? {}, path: component.path }\n}\n\nexport const extractLocalizedValue = (\n  value: LocalizedString | undefined,\n  locale: string,\n  fallbackSlug?: string,\n): string => {\n  if (!value) {\n    return fallbackSlug ? convertSlugToTitle(fallbackSlug) : ''\n  }\n  if (typeof value === 'string') {\n    return value\n  }\n  return value[locale] || Object.values(value)[0] || (fallbackSlug ? convertSlugToTitle(fallbackSlug) : '')\n}\n"],"names":["convertSlugToTitle","slug","replace","char","toUpperCase","resolveSidebarComponent","component","clientProps","path","extractLocalizedValue","value","locale","fallbackSlug","Object","values"],"mappings":"AAEA,OAAO,MAAMA,qBAAqB,CAACC;IACjC,OAAOA,KAAKC,OAAO,CAAC,MAAM,KAAKA,OAAO,CAAC,SAAS,CAACC,OAASA,KAAKC,WAAW;AAC5E,EAAC;AAED;;CAEC,GACD,OAAO,MAAMC,0BAA0B,CACrCC;IAEA,IAAI,OAAOA,cAAc,UAAU;QACjC,OAAO;YAAEC,aAAa,CAAC;YAAGC,MAAMF;QAAU;IAC5C;IACA,OAAO;QAAEC,aAAaD,UAAUC,WAAW,IAAI,CAAC;QAAGC,MAAMF,UAAUE,IAAI;IAAC;AAC1E,EAAC;AAED,OAAO,MAAMC,wBAAwB,CACnCC,OACAC,QACAC;IAEA,IAAI,CAACF,OAAO;QACV,OAAOE,eAAeZ,mBAAmBY,gBAAgB;IAC3D;IACA,IAAI,OAAOF,UAAU,UAAU;QAC7B,OAAOA;IACT;IACA,OAAOA,KAAK,CAACC,OAAO,IAAIE,OAAOC,MAAM,CAACJ,MAAM,CAAC,EAAE,IAAKE,CAAAA,eAAeZ,mBAAmBY,gBAAgB,EAAC;AACzG,EAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veiag/payload-enhanced-sidebar",
-  "version": "0.2.0",
+  "version": "0.3.0-beta.0",
   "description": "An enhanced sidebar plugin for Payload CMS with tabbed navigation to organize collections and globals.",
   "author": "VeiaG",
   "license": "MIT",
@@ -34,6 +34,7 @@
     "@payloadcms/db-sqlite": "3.60.0",
     "@payloadcms/eslint-config": "3.9.0",
     "@payloadcms/next": "3.60.0",
+    "@payloadcms/plugin-multi-tenant": "3.60.0",
     "@payloadcms/richtext-lexical": "3.60.0",
     "@payloadcms/ui": "3.60.0",
     "@playwright/test": "1.56.1",

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

@@ -1,8 +0,0 @@
-import type { NavPreferences } from 'payload';
-import React from 'react';
-import type { BadgeConfig, ExtendedGroup } from '../../types';
-export declare const EnhancedSidebarClient: React.FC<{
-    badges?: Record<string, BadgeConfig>;
-    groups: ExtendedGroup[];
-    navPreferences: NavPreferences | null;
-}>;

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

@@ -1,87 +0,0 @@
-'use client';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { getTranslation } from '@payloadcms/translations';
-import { NavGroup, useConfig, useTranslation } from '@payloadcms/ui';
-import { EntityType } from '@payloadcms/ui/shared';
-import { usePathname } from 'next/navigation.js';
-import { formatAdminURL } from 'payload/shared';
-import React, { Fragment } from 'react';
-import { NavItem } from './NavItem';
-export const EnhancedSidebarClient = ({ badges, groups, navPreferences })=>{
-    const pathname = usePathname();
-    const { config: { routes: { admin: adminRoute } } } = useConfig();
-    const { i18n } = useTranslation();
-    return /*#__PURE__*/ _jsx(Fragment, {
-        children: groups.map(({ entities, label }, key)=>{
-            // Handle empty label (ungrouped items)
-            const groupLabel = label || '';
-            const isUngrouped = !label || typeof label === 'string' && label === '';
-            const translatedLabel = getTranslation(groupLabel, i18n);
-            const properKey = `${translatedLabel}-${key}`;
-            const content = entities.map((entity, i)=>{
-                const { slug } = entity;
-                const entityType = entity.type;
-                let href;
-                let id;
-                // Check for collection
-                //@ts-expect-error Idk why typescript is complaining here
-                if (entityType === EntityType.collection) {
-                    href = formatAdminURL({
-                        adminRoute,
-                        path: `/collections/${slug}`
-                    });
-                    id = `nav-${slug}`;
-                //@ts-expect-error Idk why typescript is complaining here
-                } else if (entityType === EntityType.global) {
-                    href = formatAdminURL({
-                        adminRoute,
-                        path: `/globals/${slug}`
-                    });
-                    id = `nav-global-${slug}`;
-                } else if (entityType === 'custom' && entity.href) {
-                    // Custom item with href
-                    id = `nav-custom-${slug}`;
-                    if (entity.isExternal) {
-                        href = entity.href;
-                    } else {
-                        href = formatAdminURL({
-                            adminRoute,
-                            path: entity.href
-                        });
-                    }
-                } else {
-                    return null;
-                }
-                const isActive = pathname.startsWith(href) && [
-                    '/',
-                    undefined
-                ].includes(pathname[href.length]);
-                const isCurrentPage = pathname === href;
-                // Get badge config for this entity
-                const badgeConfig = badges?.[slug];
-                return /*#__PURE__*/ _jsx(NavItem, {
-                    badgeConfig: badgeConfig,
-                    entity: entity,
-                    href: href,
-                    id: id,
-                    isActive: isActive,
-                    isCurrentPage: isCurrentPage
-                }, i);
-            });
-            // For ungrouped items, render without NavGroup wrapper
-            if (isUngrouped) {
-                return /*#__PURE__*/ _jsx(Fragment, {
-                    children: content
-                }, properKey);
-            }
-            //TODO:
-            return /*#__PURE__*/ _jsx(NavGroup, {
-                isOpen: navPreferences?.groups?.[translatedLabel]?.open,
-                label: translatedLabel,
-                children: content
-            }, properKey);
-        })
-    });
-};
-
-//# sourceMappingURL=index.client.js.map

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

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/components/EnhancedSidebar/index.client.tsx"],"sourcesContent":["'use client'\nimport type { NavPreferences } from 'payload'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport { NavGroup, useConfig, useTranslation } from '@payloadcms/ui'\nimport { EntityType } from '@payloadcms/ui/shared'\nimport { usePathname } from 'next/navigation.js'\nimport { formatAdminURL } from 'payload/shared'\nimport React, { Fragment } from 'react'\n\nimport type { BadgeConfig, ExtendedGroup } from '../../types'\n\nimport { NavItem } from './NavItem'\n\nexport const EnhancedSidebarClient: React.FC<{\n  badges?: Record<string, BadgeConfig>\n  groups: ExtendedGroup[]\n  navPreferences: NavPreferences | null\n}> = ({ badges, groups, navPreferences }) => {\n  const pathname = usePathname()\n\n  const {\n    config: {\n      routes: { admin: adminRoute },\n    },\n  } = useConfig()\n\n  const { i18n } = useTranslation()\n\n  return (\n    <Fragment>\n      {groups.map(({ entities, label }, key) => {\n        // Handle empty label (ungrouped items)\n        const groupLabel = label || ''\n        const isUngrouped = !label || (typeof label === 'string' && label === '')\n        const translatedLabel = getTranslation(groupLabel, i18n)\n\n        const properKey = `${translatedLabel}-${key}`\n\n        const content = entities.map((entity, i) => {\n          const { slug } = entity\n          const entityType = entity.type\n          let href: string\n          let id: string\n\n          // Check for collection\n          //@ts-expect-error Idk why typescript is complaining here\n          if (entityType === EntityType.collection) {\n            href = formatAdminURL({ adminRoute, path: `/collections/${slug}` })\n            id = `nav-${slug}`\n            //@ts-expect-error Idk why typescript is complaining here\n          } else if (entityType === EntityType.global) {\n            href = formatAdminURL({ adminRoute, path: `/globals/${slug}` })\n            id = `nav-global-${slug}`\n          } else if (entityType === 'custom' && entity.href) {\n            // Custom item with href\n            id = `nav-custom-${slug}`\n            if (entity.isExternal) {\n              href = entity.href\n            } else {\n              href = formatAdminURL({ adminRoute, path: entity.href })\n            }\n          } else {\n            return null\n          }\n\n          const isActive =\n            pathname.startsWith(href) && ['/', undefined].includes(pathname[href.length])\n          const isCurrentPage = pathname === href\n\n          // Get badge config for this entity\n          const badgeConfig = badges?.[slug]\n\n          return (\n            <NavItem\n              badgeConfig={badgeConfig}\n              entity={entity}\n              href={href}\n              id={id}\n              isActive={isActive}\n              isCurrentPage={isCurrentPage}\n              key={i}\n            />\n          )\n        })\n\n        // For ungrouped items, render without NavGroup wrapper\n        if (isUngrouped) {\n          return <Fragment key={properKey}>{content}</Fragment>\n        }\n        //TODO:\n        return (\n          <NavGroup\n            isOpen={navPreferences?.groups?.[translatedLabel]?.open}\n            key={properKey}\n            label={translatedLabel}\n          >\n            {content}\n          </NavGroup>\n        )\n      })}\n    </Fragment>\n  )\n}\n"],"names":["getTranslation","NavGroup","useConfig","useTranslation","EntityType","usePathname","formatAdminURL","React","Fragment","NavItem","EnhancedSidebarClient","badges","groups","navPreferences","pathname","config","routes","admin","adminRoute","i18n","map","entities","label","key","groupLabel","isUngrouped","translatedLabel","properKey","content","entity","i","slug","entityType","type","href","id","collection","path","global","isExternal","isActive","startsWith","undefined","includes","length","isCurrentPage","badgeConfig","isOpen","open"],"mappings":"AAAA;;AAGA,SAASA,cAAc,QAAQ,2BAA0B;AACzD,SAASC,QAAQ,EAAEC,SAAS,EAAEC,cAAc,QAAQ,iBAAgB;AACpE,SAASC,UAAU,QAAQ,wBAAuB;AAClD,SAASC,WAAW,QAAQ,qBAAoB;AAChD,SAASC,cAAc,QAAQ,iBAAgB;AAC/C,OAAOC,SAASC,QAAQ,QAAQ,QAAO;AAIvC,SAASC,OAAO,QAAQ,YAAW;AAEnC,OAAO,MAAMC,wBAIR,CAAC,EAAEC,MAAM,EAAEC,MAAM,EAAEC,cAAc,EAAE;IACtC,MAAMC,WAAWT;IAEjB,MAAM,EACJU,QAAQ,EACNC,QAAQ,EAAEC,OAAOC,UAAU,EAAE,EAC9B,EACF,GAAGhB;IAEJ,MAAM,EAAEiB,IAAI,EAAE,GAAGhB;IAEjB,qBACE,KAACK;kBACEI,OAAOQ,GAAG,CAAC,CAAC,EAAEC,QAAQ,EAAEC,KAAK,EAAE,EAAEC;YAChC,uCAAuC;YACvC,MAAMC,aAAaF,SAAS;YAC5B,MAAMG,cAAc,CAACH,SAAU,OAAOA,UAAU,YAAYA,UAAU;YACtE,MAAMI,kBAAkB1B,eAAewB,YAAYL;YAEnD,MAAMQ,YAAY,GAAGD,gBAAgB,CAAC,EAAEH,KAAK;YAE7C,MAAMK,UAAUP,SAASD,GAAG,CAAC,CAACS,QAAQC;gBACpC,MAAM,EAAEC,IAAI,EAAE,GAAGF;gBACjB,MAAMG,aAAaH,OAAOI,IAAI;gBAC9B,IAAIC;gBACJ,IAAIC;gBAEJ,uBAAuB;gBACvB,yDAAyD;gBACzD,IAAIH,eAAe5B,WAAWgC,UAAU,EAAE;oBACxCF,OAAO5B,eAAe;wBAAEY;wBAAYmB,MAAM,CAAC,aAAa,EAAEN,MAAM;oBAAC;oBACjEI,KAAK,CAAC,IAAI,EAAEJ,MAAM;gBAClB,yDAAyD;gBAC3D,OAAO,IAAIC,eAAe5B,WAAWkC,MAAM,EAAE;oBAC3CJ,OAAO5B,eAAe;wBAAEY;wBAAYmB,MAAM,CAAC,SAAS,EAAEN,MAAM;oBAAC;oBAC7DI,KAAK,CAAC,WAAW,EAAEJ,MAAM;gBAC3B,OAAO,IAAIC,eAAe,YAAYH,OAAOK,IAAI,EAAE;oBACjD,wBAAwB;oBACxBC,KAAK,CAAC,WAAW,EAAEJ,MAAM;oBACzB,IAAIF,OAAOU,UAAU,EAAE;wBACrBL,OAAOL,OAAOK,IAAI;oBACpB,OAAO;wBACLA,OAAO5B,eAAe;4BAAEY;4BAAYmB,MAAMR,OAAOK,IAAI;wBAAC;oBACxD;gBACF,OAAO;oBACL,OAAO;gBACT;gBAEA,MAAMM,WACJ1B,SAAS2B,UAAU,CAACP,SAAS;oBAAC;oBAAKQ;iBAAU,CAACC,QAAQ,CAAC7B,QAAQ,CAACoB,KAAKU,MAAM,CAAC;gBAC9E,MAAMC,gBAAgB/B,aAAaoB;gBAEnC,mCAAmC;gBACnC,MAAMY,cAAcnC,QAAQ,CAACoB,KAAK;gBAElC,qBACE,KAACtB;oBACCqC,aAAaA;oBACbjB,QAAQA;oBACRK,MAAMA;oBACNC,IAAIA;oBACJK,UAAUA;oBACVK,eAAeA;mBACVf;YAGX;YAEA,uDAAuD;YACvD,IAAIL,aAAa;gBACf,qBAAO,KAACjB;8BAA0BoB;mBAAZD;YACxB;YACA,OAAO;YACP,qBACE,KAAC1B;gBACC8C,QAAQlC,gBAAgBD,QAAQ,CAACc,gBAAgB,EAAEsB;gBAEnD1B,OAAOI;0BAENE;eAHID;QAMX;;AAGN,EAAC"}