@veiag/payload-enhanced-sidebar 0.1.0

package/README.md

@@ -0,0 +1,231 @@
+# Payload Enhanced Sidebar
+
+An enhanced sidebar plugin for [Payload CMS](https://payloadcms.com) that adds a tabbed navigation system to organize collections and globals into logical groups.
+
+> **Note:** This plugin is in early development and has not been extensively tested. Use with caution in production environments.
+
+## Features
+
+- **Tabbed Navigation** - Organize collections into separate tabs for cleaner navigation
+- **Vertical Tab Bar** - Icon-based tabs on the left side of the sidebar
+- **Link Support** - Add navigation links (like Dashboard) alongside tabs
+- **Custom Items** - Add custom navigation items that can be merged into existing groups
+- **i18n Support** - Full localization support for labels and groups
+- **Lucide Icons** - Use any [Lucide icon](https://lucide.dev/icons) for tabs and links
+
+## Installation
+
+```bash
+npm install @veiag/payload-enhanced-sidebar
+# or
+yarn add @veiag/payload-enhanced-sidebar
+# or
+pnpm add @veiag/payload-enhanced-sidebar
+```
+
+## Quick Start
+
+```typescript
+import { payloadEnhancedSidebar } from '@veiag/payload-enhanced-sidebar'
+import { buildConfig } from 'payload'
+
+export default buildConfig({
+  // ... your config
+  plugins: [
+    payloadEnhancedSidebar({
+      // Works with defaults!
+    }),
+  ],
+})
+```
+
+This will add:
+- A Dashboard link at the top
+- A default tab showing all collections and globals
+- A logout button at the bottom
+
+## Configuration
+
+### Full Configuration Example
+
+```typescript
+import { payloadEnhancedSidebar } from '@veiag/payload-enhanced-sidebar'
+import { buildConfig } from 'payload'
+
+export default buildConfig({
+  plugins: [
+    payloadEnhancedSidebar({
+      // Tabs and links in the sidebar
+      tabs: [
+        // Dashboard link
+        {
+          id: 'dashboard',
+          type: 'link',
+          href: '/',
+          icon: 'House',
+          label: { en: 'Dashboard', uk: 'Головна' },
+        },
+        // Content tab - shows specific collections
+        {
+          id: 'content',
+          type: 'tab',
+          icon: 'FileText',
+          label: { en: 'Content', uk: 'Контент' },
+          collections: ['posts', 'pages', 'categories'],
+        },
+        // E-commerce tab with custom items
+        {
+          id: 'ecommerce',
+          type: 'tab',
+          icon: 'ShoppingCart',
+          label: { en: 'E-commerce', uk: 'E-commerce' },
+          collections: ['products', 'orders', 'customers'],
+          customItems: [
+            {
+              slug: 'analytics',
+              href: '/analytics',
+              label: { en: 'Analytics', uk: 'Аналітика' },
+              group: 'E-commerce', // Merge into existing group
+            },
+          ],
+        },
+        // Settings tab with globals
+        {
+          id: 'settings',
+          type: 'tab',
+          icon: 'Settings',
+          label: { en: 'Settings', uk: 'Налаштування' },
+          collections: ['users'],
+          globals: ['site-settings', 'footer-settings'],
+          customItems: [
+            {
+              slug: 'api-keys',
+              href: '/api-keys',
+              label: { en: 'API Keys', uk: 'API Ключі' },
+              // No group - will appear at the bottom
+            },
+          ],
+        },
+      ],
+
+      // Show/hide logout button (default: true)
+      showLogout: true,
+
+      // Disable the plugin
+      disabled: false,
+    }),
+  ],
+})
+```
+
+## Configuration Options
+
+### `tabs`
+
+Array of tabs and links to show in the sidebar.
+
+**Tab (`type: 'tab'`)**
+
+| Property | Type | Required | Description |
+|----------|------|----------|-------------|
+| `id` | `string` | Yes | Unique identifier |
+| `type` | `'tab'` | Yes | Tab type |
+| `icon` | `string` | Yes | Lucide icon name |
+| `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 |
+
+> If neither `collections` nor `globals` are specified, the tab shows all collections and globals.
+
+**Link (`type: 'link'`)**
+
+| Property | Type | Required | Description |
+|----------|------|----------|-------------|
+| `id` | `string` | Yes | Unique identifier |
+| `type` | `'link'` | Yes | Link type |
+| `icon` | `string` | Yes | Lucide icon name |
+| `label` | `LocalizedString` | Yes | Link tooltip/label |
+| `href` | `string` | Yes | URL (relative to admin route) |
+
+### `customItems`
+
+Custom items can be added to any tab:
+
+```typescript
+{
+  slug: 'unique-slug',           // Required: unique identifier
+  href: '/path',                 // Required: URL (relative to admin route)
+  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
+}
+```
+
+**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
+
+### `showLogout`
+
+Show/hide the logout button at the bottom of the tabs bar.
+
+- **Type:** `boolean`
+- **Default:** `true`
+
+### `disabled`
+
+Completely disable the plugin.
+
+- **Type:** `boolean`
+- **Default:** `false`
+
+## Localization
+
+All labels support localized strings:
+
+```typescript
+label: 'Simple string'
+// or
+label: {
+  en: 'English',
+  uk: 'Українська',
+  de: 'Deutsch',
+}
+```
+
+## TODO
+
+The following features are planned but not yet implemented:
+
+- [ ] **Browse by Folder Button** - Support for the folder view button (requires Payload v3.41.0+)
+- [ ] **Settings Menu Items** - Support for Payload's SettingsMenu items (requires Payload v3.60.0+)
+
+## Contributing
+
+Contributions are welcome! Please feel free to submit a Pull Request.
+
+1. Fork the repository
+2. Create your feature branch (`git checkout -b feature/amazing-feature`)
+3. Commit your changes (`git commit -m 'Add some amazing feature'`)
+4. Push to the branch (`git push origin feature/amazing-feature`)
+5. Open a Pull Request
+
+## Issues
+
+Found a bug or have a feature request? Please open an issue on [GitHub](https://github.com/VeiaG/payload-enhanced-sidebar/issues).
+
+## License
+
+MIT © [VeiaG](https://github.com/VeiaG)
+
+## Links
+
+- [GitHub Repository](https://github.com/VeiaG/payload-enhanced-sidebar)
+- [Payload CMS](https://payloadcms.com)
+- [Lucide Icons](https://lucide.dev/icons)
+
+---
+
+### More plugins and Payload resources at [PayloadCMS Extensions](https://payload.veiag.dev/)

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

@@ -0,0 +1,6 @@
+import React from 'react';
+import type { SidebarTabItem } from '../../types';
+export type CustomTabContentProps = {
+    items: SidebarTabItem[];
+};
+export declare const CustomTabContent: React.FC<CustomTabContentProps>;

package/dist/components/EnhancedSidebar/CustomTabContent.js

@@ -0,0 +1,35 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { getTranslation } from '@payloadcms/translations';
+import { Link, useConfig, useTranslation } from '@payloadcms/ui';
+import { usePathname } from 'next/navigation.js';
+import { formatAdminURL } from 'payload/shared';
+import React from 'react';
+const baseClass = 'enhanced-sidebar';
+export const CustomTabContent = ({ items })=>{
+    const { i18n } = useTranslation();
+    const pathname = usePathname();
+    const { config: { routes: { admin: adminRoute } } } = useConfig();
+    return /*#__PURE__*/ _jsx("div", {
+        className: `${baseClass}__custom-items`,
+        children: items.map((item)=>{
+            const href = item.isExternal ? item.href : formatAdminURL({
+                adminRoute,
+                path: item.href
+            });
+            const label = getTranslation(item.label, i18n);
+            const isActive = pathname.startsWith(href);
+            return /*#__PURE__*/ _jsx(Link, {
+                className: `${baseClass}__link ${isActive ? `${baseClass}__link--active` : ''}`,
+                href: href,
+                prefetch: false,
+                children: /*#__PURE__*/ _jsx("span", {
+                    className: `${baseClass}__link-label`,
+                    children: label
+                })
+            }, item.slug);
+        })
+    });
+};
+
+//# sourceMappingURL=CustomTabContent.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/EnhancedSidebar/CustomTabContent.tsx"],"sourcesContent":["'use client'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport { Link, useConfig, useTranslation } from '@payloadcms/ui'\nimport { usePathname } from 'next/navigation.js'\nimport { formatAdminURL } from 'payload/shared'\nimport React from 'react'\n\nimport type { SidebarTabItem } from '../../types'\n\nconst baseClass = 'enhanced-sidebar'\n\nexport type CustomTabContentProps = {\n  items: SidebarTabItem[]\n}\n\nexport const CustomTabContent: React.FC<CustomTabContentProps> = ({ items }) => {\n  const { i18n } = useTranslation()\n  const pathname = usePathname()\n\n  const {\n    config: {\n      routes: { admin: adminRoute },\n    },\n  } = useConfig()\n\n  return (\n    <div className={`${baseClass}__custom-items`}>\n      {items.map((item) => {\n        const href = item.isExternal ? item.href : formatAdminURL({ adminRoute, path: item.href })\n        const label = getTranslation(item.label, i18n)\n        const isActive = pathname.startsWith(href)\n\n        return (\n          <Link\n            className={`${baseClass}__link ${isActive ? `${baseClass}__link--active` : ''}`}\n            href={href}\n            key={item.slug}\n            prefetch={false}\n          >\n            <span className={`${baseClass}__link-label`}>{label}</span>\n          </Link>\n        )\n      })}\n    </div>\n  )\n}\n"],"names":["getTranslation","Link","useConfig","useTranslation","usePathname","formatAdminURL","React","baseClass","CustomTabContent","items","i18n","pathname","config","routes","admin","adminRoute","div","className","map","item","href","isExternal","path","label","isActive","startsWith","prefetch","span","slug"],"mappings":"AAAA;;AAEA,SAASA,cAAc,QAAQ,2BAA0B;AACzD,SAASC,IAAI,EAAEC,SAAS,EAAEC,cAAc,QAAQ,iBAAgB;AAChE,SAASC,WAAW,QAAQ,qBAAoB;AAChD,SAASC,cAAc,QAAQ,iBAAgB;AAC/C,OAAOC,WAAW,QAAO;AAIzB,MAAMC,YAAY;AAMlB,OAAO,MAAMC,mBAAoD,CAAC,EAAEC,KAAK,EAAE;IACzE,MAAM,EAAEC,IAAI,EAAE,GAAGP;IACjB,MAAMQ,WAAWP;IAEjB,MAAM,EACJQ,QAAQ,EACNC,QAAQ,EAAEC,OAAOC,UAAU,EAAE,EAC9B,EACF,GAAGb;IAEJ,qBACE,KAACc;QAAIC,WAAW,GAAGV,UAAU,cAAc,CAAC;kBACzCE,MAAMS,GAAG,CAAC,CAACC;YACV,MAAMC,OAAOD,KAAKE,UAAU,GAAGF,KAAKC,IAAI,GAAGf,eAAe;gBAAEU;gBAAYO,MAAMH,KAAKC,IAAI;YAAC;YACxF,MAAMG,QAAQvB,eAAemB,KAAKI,KAAK,EAAEb;YACzC,MAAMc,WAAWb,SAASc,UAAU,CAACL;YAErC,qBACE,KAACnB;gBACCgB,WAAW,GAAGV,UAAU,OAAO,EAAEiB,WAAW,GAAGjB,UAAU,cAAc,CAAC,GAAG,IAAI;gBAC/Ea,MAAMA;gBAENM,UAAU;0BAEV,cAAA,KAACC;oBAAKV,WAAW,GAAGV,UAAU,YAAY,CAAC;8BAAGgB;;eAHzCJ,KAAKS,IAAI;QAMpB;;AAGN,EAAC"}

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

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { IconName } from '../../types';
+export interface IconProps {
+    className?: string;
+    name: IconName;
+    size?: number;
+}
+export declare const Icon: React.FC<IconProps>;

package/dist/components/EnhancedSidebar/Icon.js

@@ -0,0 +1,16 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { icons } from 'lucide-react';
+import React from 'react';
+export const Icon = ({ name, className, size = 20 })=>{
+    const LucideIcon = icons[name];
+    if (!LucideIcon) {
+        return null;
+    }
+    return /*#__PURE__*/ _jsx(LucideIcon, {
+        className: className,
+        size: size
+    });
+};
+
+//# sourceMappingURL=Icon.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/EnhancedSidebar/Icon.tsx"],"sourcesContent":["'use client'\n\nimport { icons } from 'lucide-react'\nimport React from 'react'\n\nimport type { IconName } from '../../types'\n\nexport interface IconProps {\n  className?: string\n  name: IconName\n  size?: number\n}\n\nexport const Icon: React.FC<IconProps> = ({ name, className, size = 20 }) => {\n  const LucideIcon = icons[name]\n\n  if (!LucideIcon) {\n    return null\n  }\n\n  return <LucideIcon className={className} size={size} />\n}\n"],"names":["icons","React","Icon","name","className","size","LucideIcon"],"mappings":"AAAA;;AAEA,SAASA,KAAK,QAAQ,eAAc;AACpC,OAAOC,WAAW,QAAO;AAUzB,OAAO,MAAMC,OAA4B,CAAC,EAAEC,IAAI,EAAEC,SAAS,EAAEC,OAAO,EAAE,EAAE;IACtE,MAAMC,aAAaN,KAAK,CAACG,KAAK;IAE9B,IAAI,CAACG,YAAY;QACf,OAAO;IACT;IAEA,qBAAO,KAACA;QAAWF,WAAWA;QAAWC,MAAMA;;AACjD,EAAC"}

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

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare const NavHamburger: React.FC<{
+    baseClass: string;
+}>;

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

@@ -0,0 +1,18 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Hamburger, useNav } from '@payloadcms/ui';
+import React from 'react';
+export const NavHamburger = ({ baseClass })=>{
+    const { navOpen, setNavOpen } = useNav();
+    return /*#__PURE__*/ _jsx("button", {
+        className: `${baseClass}__mobile-close`,
+        onClick: ()=>setNavOpen(false),
+        tabIndex: navOpen ? undefined : -1,
+        type: "button",
+        children: /*#__PURE__*/ _jsx(Hamburger, {
+            isActive: true
+        })
+    });
+};
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/EnhancedSidebar/NavHamburger/index.tsx"],"sourcesContent":["'use client'\n\nimport { Hamburger, useNav } from '@payloadcms/ui'\nimport React from 'react'\n\nexport const NavHamburger: React.FC<{\n  baseClass: string\n}> = ({ baseClass }) => {\n  const { navOpen, setNavOpen } = useNav()\n\n  return (\n    <button\n      className={`${baseClass}__mobile-close`}\n      onClick={() => setNavOpen(false)}\n      tabIndex={navOpen ? undefined : -1}\n      type=\"button\"\n    >\n      <Hamburger isActive />\n    </button>\n  )\n}\n"],"names":["Hamburger","useNav","React","NavHamburger","baseClass","navOpen","setNavOpen","button","className","onClick","tabIndex","undefined","type","isActive"],"mappings":"AAAA;;AAEA,SAASA,SAAS,EAAEC,MAAM,QAAQ,iBAAgB;AAClD,OAAOC,WAAW,QAAO;AAEzB,OAAO,MAAMC,eAER,CAAC,EAAEC,SAAS,EAAE;IACjB,MAAM,EAAEC,OAAO,EAAEC,UAAU,EAAE,GAAGL;IAEhC,qBACE,KAACM;QACCC,WAAW,GAAGJ,UAAU,cAAc,CAAC;QACvCK,SAAS,IAAMH,WAAW;QAC1BI,UAAUL,UAAUM,YAAY,CAAC;QACjCC,MAAK;kBAEL,cAAA,KAACZ;YAAUa,QAAQ;;;AAGzB,EAAC"}

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

@@ -0,0 +1,11 @@
+import type { NavPreferences } from 'payload';
+import React from 'react';
+import type { EnhancedSidebarConfig, ExtendedGroup } from '../../types';
+export type SidebarContentProps = {
+    afterNavLinks?: React.ReactNode;
+    beforeNavLinks?: React.ReactNode;
+    groups: ExtendedGroup[];
+    navPreferences: NavPreferences | null;
+    sidebarConfig: EnhancedSidebarConfig;
+};
+export declare const SidebarContent: React.FC<SidebarContentProps>;

package/dist/components/EnhancedSidebar/SidebarContent.js

@@ -0,0 +1,140 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTranslation } from '@payloadcms/ui';
+import React, { useEffect, useMemo, useState } from 'react';
+import { extractLocalizedValue } from '../../utils';
+import { EnhancedSidebarClient } from './index.client';
+import { SidebarWrapper } from './SidebarWrapper';
+import { TabsBar } from './TabsBar';
+const baseClass = 'enhanced-sidebar';
+const STORAGE_KEY = 'payload-enhanced-sidebar-active-tab';
+export const SidebarContent = ({ afterNavLinks, beforeNavLinks, groups, navPreferences, sidebarConfig })=>{
+    const { i18n } = useTranslation();
+    const currentLang = i18n.language;
+    const tabs = sidebarConfig.tabs?.filter((t)=>t.type === 'tab') ?? [];
+    const defaultTabId = tabs[0]?.id ?? 'default';
+    // Always start with default to match server render
+    const [activeTabId, setActiveTabId] = useState(defaultTabId);
+    // Read from localStorage only after hydration
+    useEffect(()=>{
+        const stored = localStorage.getItem(STORAGE_KEY);
+        if (stored && tabs.some((t)=>t.id === stored)) {
+            setActiveTabId(stored);
+        }
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+    // Persist to localStorage on change
+    useEffect(()=>{
+        localStorage.setItem(STORAGE_KEY, activeTabId);
+    }, [
+        activeTabId
+    ]);
+    const activeTab = tabs.find((tab)=>tab.id === activeTabId);
+    // Build groups for the active tab
+    const filteredGroups = useMemo(()=>{
+        if (!activeTab) {
+            return groups;
+        }
+        const { collections: tabCollections, customItems, globals: tabGlobals } = activeTab;
+        // 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,
+                            label: item.label
+                        });
+                    } else {
+                        // Create new group
+                        result.push({
+                            entities: [
+                                {
+                                    slug: item.slug,
+                                    type: 'custom',
+                                    href: item.href,
+                                    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,
+                            label: item.label
+                        })),
+                    label: ''
+                });
+            }
+        }
+        return result;
+    }, [
+        activeTab,
+        groups,
+        currentLang
+    ]);
+    return /*#__PURE__*/ _jsxs(SidebarWrapper, {
+        baseClass: baseClass,
+        children: [
+            /*#__PURE__*/ _jsx(TabsBar, {
+                activeTabId: activeTabId,
+                onTabChange: setActiveTabId,
+                sidebarConfig: sidebarConfig
+            }),
+            /*#__PURE__*/ _jsx("nav", {
+                className: `${baseClass}__content`,
+                children: /*#__PURE__*/ _jsxs("div", {
+                    className: `${baseClass}__content-scroll`,
+                    children: [
+                        beforeNavLinks,
+                        /*#__PURE__*/ _jsx(EnhancedSidebarClient, {
+                            groups: filteredGroups,
+                            navPreferences: navPreferences
+                        }),
+                        afterNavLinks
+                    ]
+                })
+            })
+        ]
+    });
+};
+
+//# sourceMappingURL=SidebarContent.js.map

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

@@ -0,0 +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, { useEffect, useMemo, useState } from 'react'\n\nimport type {\n  EnhancedSidebarConfig,\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  navPreferences: NavPreferences | null\n  sidebarConfig: EnhancedSidebarConfig\n}\n\nconst STORAGE_KEY = 'payload-enhanced-sidebar-active-tab'\n\nexport const SidebarContent: React.FC<SidebarContentProps> = ({\n  afterNavLinks,\n  beforeNavLinks,\n  groups,\n  navPreferences,\n  sidebarConfig,\n}) => {\n  const { i18n } = useTranslation()\n  const currentLang = i18n.language\n\n  const tabs = sidebarConfig.tabs?.filter((t): t is SidebarTabContentType => t.type === 'tab') ?? []\n  const defaultTabId = tabs[0]?.id ?? 'default'\n\n  // Always start with default to match server render\n  const [activeTabId, setActiveTabId] = useState(defaultTabId)\n\n  // Read from localStorage only after hydration\n  useEffect(() => {\n    const stored = localStorage.getItem(STORAGE_KEY)\n    if (stored && tabs.some((t) => t.id === stored)) {\n      setActiveTabId(stored)\n    }\n  }, []) // eslint-disable-line react-hooks/exhaustive-deps\n\n  // Persist to localStorage on change\n  useEffect(() => {\n    localStorage.setItem(STORAGE_KEY, activeTabId)\n  }, [activeTabId])\n\n  const activeTab = tabs.find((tab) => tab.id === activeTabId)\n\n  // Build groups for the active tab\n  const filteredGroups = useMemo(() => {\n    if (!activeTab) {\n      return groups\n    }\n\n    const { collections: tabCollections, customItems, globals: tabGlobals } = activeTab\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              label: item.label,\n            })\n          } else {\n            // Create new group\n            result.push({\n              entities: [\n                {\n                  slug: item.slug,\n                  type: 'custom',\n                  href: item.href,\n                  label: item.label,\n                },\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            label: item.label,\n          })),\n          label: '',\n        })\n      }\n    }\n\n    return result\n  }, [activeTab, groups, currentLang])\n\n  return (\n    <SidebarWrapper baseClass={baseClass}>\n      <TabsBar\n        activeTabId={activeTabId}\n        onTabChange={setActiveTabId}\n        sidebarConfig={sidebarConfig}\n      />\n      <nav className={`${baseClass}__content`}>\n        <div className={`${baseClass}__content-scroll`}>\n          {beforeNavLinks}\n          <EnhancedSidebarClient groups={filteredGroups} navPreferences={navPreferences} />\n          {afterNavLinks}\n        </div>\n      </nav>\n    </SidebarWrapper>\n  )\n}\n"],"names":["useTranslation","React","useEffect","useMemo","useState","extractLocalizedValue","EnhancedSidebarClient","SidebarWrapper","TabsBar","baseClass","STORAGE_KEY","SidebarContent","afterNavLinks","beforeNavLinks","groups","navPreferences","sidebarConfig","i18n","currentLang","language","tabs","filter","t","type","defaultTabId","id","activeTabId","setActiveTabId","stored","localStorage","getItem","some","setItem","activeTab","find","tab","filteredGroups","collections","tabCollections","customItems","globals","tabGlobals","showAll","allowedSlugs","Set","result","map","g","entities","size","group","entity","has","slug","length","ungroupedItems","item","itemGroupLabel","existingGroup","groupLabel","label","push","href","onTabChange","nav","className","div"],"mappings":"AAAA;;AAGA,SAASA,cAAc,QAAQ,iBAAgB;AAC/C,OAAOC,SAASC,SAAS,EAAEC,OAAO,EAAEC,QAAQ,QAAQ,QAAO;AAS3D,SAASC,qBAAqB,QAAQ,cAAa;AACnD,SAASC,qBAAqB,QAAQ,iBAAgB;AACtD,SAASC,cAAc,QAAQ,mBAAkB;AACjD,SAASC,OAAO,QAAQ,YAAW;AAEnC,MAAMC,YAAY;AAUlB,MAAMC,cAAc;AAEpB,OAAO,MAAMC,iBAAgD,CAAC,EAC5DC,aAAa,EACbC,cAAc,EACdC,MAAM,EACNC,cAAc,EACdC,aAAa,EACd;IACC,MAAM,EAAEC,IAAI,EAAE,GAAGjB;IACjB,MAAMkB,cAAcD,KAAKE,QAAQ;IAEjC,MAAMC,OAAOJ,cAAcI,IAAI,EAAEC,OAAO,CAACC,IAAkCA,EAAEC,IAAI,KAAK,UAAU,EAAE;IAClG,MAAMC,eAAeJ,IAAI,CAAC,EAAE,EAAEK,MAAM;IAEpC,mDAAmD;IACnD,MAAM,CAACC,aAAaC,eAAe,GAAGvB,SAASoB;IAE/C,8CAA8C;IAC9CtB,UAAU;QACR,MAAM0B,SAASC,aAAaC,OAAO,CAACpB;QACpC,IAAIkB,UAAUR,KAAKW,IAAI,CAAC,CAACT,IAAMA,EAAEG,EAAE,KAAKG,SAAS;YAC/CD,eAAeC;QACjB;IACF,GAAG,EAAE,GAAE,kDAAkD;IAEzD,oCAAoC;IACpC1B,UAAU;QACR2B,aAAaG,OAAO,CAACtB,aAAagB;IACpC,GAAG;QAACA;KAAY;IAEhB,MAAMO,YAAYb,KAAKc,IAAI,CAAC,CAACC,MAAQA,IAAIV,EAAE,KAAKC;IAEhD,kCAAkC;IAClC,MAAMU,iBAAiBjC,QAAQ;QAC7B,IAAI,CAAC8B,WAAW;YACd,OAAOnB;QACT;QAEA,MAAM,EAAEuB,aAAaC,cAAc,EAAEC,WAAW,EAAEC,SAASC,UAAU,EAAE,GAAGR;QAE1E,uDAAuD;QACvD,MAAMS,UAAU,CAACJ,kBAAkB,CAACG;QACpC,MAAME,eAAe,IAAIC,IAAI;eAAKN,kBAAkB,EAAE;eAAOG,cAAc,EAAE;SAAE;QAE/E,IAAII,SAA0B,EAAE;QAEhC,IAAIH,SAAS;YACXG,SAAS/B,OAAOgC,GAAG,CAAC,CAACC,IAAO,CAAA;oBAAE,GAAGA,CAAC;oBAAEC,UAAU;2BAAID,EAAEC,QAAQ;qBAAC;gBAAC,CAAA;QAChE,OAAO,IAAIL,aAAaM,IAAI,GAAG,GAAG;YAChCJ,SAAS/B,OACNgC,GAAG,CAAC,CAACI,QAAW,CAAA;oBACf,GAAGA,KAAK;oBACRF,UAAUE,MAAMF,QAAQ,CAAC3B,MAAM,CAAC,CAAC8B,SAAWR,aAAaS,GAAG,CAACD,OAAOE,IAAI;gBAC1E,CAAA,GACChC,MAAM,CAAC,CAAC6B,QAAUA,MAAMF,QAAQ,CAACM,MAAM,GAAG;QAC/C;QAEA,iCAAiC;QACjC,IAAIf,eAAeA,YAAYe,MAAM,GAAG,GAAG;YACzC,MAAMC,iBAAmC,EAAE;YAE3C,KAAK,MAAMC,QAAQjB,YAAa;gBAC9B,IAAIiB,KAAKN,KAAK,EAAE;oBACd,0CAA0C;oBAC1C,MAAMO,iBAAiBpD,sBAAsBmD,KAAKN,KAAK,EAAEhC;oBAEzD,oDAAoD;oBACpD,MAAMwC,gBAAgBb,OAAOX,IAAI,CAAC,CAACa;wBACjC,MAAMY,aAAatD,sBAAsB0C,EAAEa,KAAK,EAAE1C;wBAClD,OAAOyC,eAAeF;oBACxB;oBAEA,IAAIC,eAAe;wBACjBA,cAAcV,QAAQ,CAACa,IAAI,CAAC;4BAC1BR,MAAMG,KAAKH,IAAI;4BACf9B,MAAM;4BACNuC,MAAMN,KAAKM,IAAI;4BACfF,OAAOJ,KAAKI,KAAK;wBACnB;oBACF,OAAO;wBACL,mBAAmB;wBACnBf,OAAOgB,IAAI,CAAC;4BACVb,UAAU;gCACR;oCACEK,MAAMG,KAAKH,IAAI;oCACf9B,MAAM;oCACNuC,MAAMN,KAAKM,IAAI;oCACfF,OAAOJ,KAAKI,KAAK;gCACnB;6BACD;4BACDA,OAAOJ,KAAKN,KAAK;wBACnB;oBACF;gBACF,OAAO;oBACLK,eAAeM,IAAI,CAACL;gBACtB;YACF;YAEA,iCAAiC;YACjC,IAAID,eAAeD,MAAM,GAAG,GAAG;gBAC7BT,OAAOgB,IAAI,CAAC;oBACVb,UAAUO,eAAeT,GAAG,CAAC,CAACU,OAAU,CAAA;4BACtCH,MAAMG,KAAKH,IAAI;4BACf9B,MAAM;4BACNuC,MAAMN,KAAKM,IAAI;4BACfF,OAAOJ,KAAKI,KAAK;wBACnB,CAAA;oBACAA,OAAO;gBACT;YACF;QACF;QAEA,OAAOf;IACT,GAAG;QAACZ;QAAWnB;QAAQI;KAAY;IAEnC,qBACE,MAACX;QAAeE,WAAWA;;0BACzB,KAACD;gBACCkB,aAAaA;gBACbqC,aAAapC;gBACbX,eAAeA;;0BAEjB,KAACgD;gBAAIC,WAAW,GAAGxD,UAAU,SAAS,CAAC;0BACrC,cAAA,MAACyD;oBAAID,WAAW,GAAGxD,UAAU,gBAAgB,CAAC;;wBAC3CI;sCACD,KAACP;4BAAsBQ,QAAQsB;4BAAgBrB,gBAAgBA;;wBAC9DH;;;;;;AAKX,EAAC"}

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

@@ -0,0 +1,6 @@
+import React from 'react';
+import './index.scss';
+export declare const SidebarWrapper: React.FC<{
+    baseClass: string;
+    children: React.ReactNode;
+}>;

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

@@ -0,0 +1,33 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useNav } from '@payloadcms/ui';
+import React from 'react';
+import { NavHamburger } from '../NavHamburger';
+import './index.scss';
+export const SidebarWrapper = ({ baseClass, children })=>{
+    const { hydrated, navOpen, navRef, shouldAnimate } = useNav();
+    return /*#__PURE__*/ _jsxs("aside", {
+        className: [
+            baseClass,
+            navOpen && `${baseClass}--nav-open`,
+            shouldAnimate && `${baseClass}--nav-animate`,
+            hydrated && `${baseClass}--nav-hydrated`
+        ].filter(Boolean).join(' '),
+        inert: !navOpen ? true : undefined,
+        children: [
+            /*#__PURE__*/ _jsx("div", {
+                className: `${baseClass}__header`,
+                children: /*#__PURE__*/ _jsx(NavHamburger, {
+                    baseClass: baseClass
+                })
+            }),
+            /*#__PURE__*/ _jsx("div", {
+                className: `${baseClass}__scroll`,
+                ref: navRef,
+                children: children
+            })
+        ]
+    });
+};
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/EnhancedSidebar/SidebarWrapper/index.tsx"],"sourcesContent":["'use client'\n\nimport { useNav } from '@payloadcms/ui'\nimport React from 'react'\n\nimport { NavHamburger } from '../NavHamburger'\nimport './index.scss'\n\nexport const SidebarWrapper: React.FC<{\n  baseClass: string\n  children: React.ReactNode\n}> = ({ baseClass, children }) => {\n  const { hydrated, navOpen, navRef, shouldAnimate } = useNav()\n\n  return (\n    <aside\n      className={[\n        baseClass,\n        navOpen && `${baseClass}--nav-open`,\n        shouldAnimate && `${baseClass}--nav-animate`,\n        hydrated && `${baseClass}--nav-hydrated`,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      inert={!navOpen ? true : undefined}\n    >\n      <div className={`${baseClass}__header`}>\n        <NavHamburger baseClass={baseClass} />\n      </div>\n      <div className={`${baseClass}__scroll`} ref={navRef}>\n        {children}\n      </div>\n    </aside>\n  )\n}\n"],"names":["useNav","React","NavHamburger","SidebarWrapper","baseClass","children","hydrated","navOpen","navRef","shouldAnimate","aside","className","filter","Boolean","join","inert","undefined","div","ref"],"mappings":"AAAA;;AAEA,SAASA,MAAM,QAAQ,iBAAgB;AACvC,OAAOC,WAAW,QAAO;AAEzB,SAASC,YAAY,QAAQ,kBAAiB;AAC9C,OAAO,eAAc;AAErB,OAAO,MAAMC,iBAGR,CAAC,EAAEC,SAAS,EAAEC,QAAQ,EAAE;IAC3B,MAAM,EAAEC,QAAQ,EAAEC,OAAO,EAAEC,MAAM,EAAEC,aAAa,EAAE,GAAGT;IAErD,qBACE,MAACU;QACCC,WAAW;YACTP;YACAG,WAAW,GAAGH,UAAU,UAAU,CAAC;YACnCK,iBAAiB,GAAGL,UAAU,aAAa,CAAC;YAC5CE,YAAY,GAAGF,UAAU,cAAc,CAAC;SACzC,CACEQ,MAAM,CAACC,SACPC,IAAI,CAAC;QACRC,OAAO,CAACR,UAAU,OAAOS;;0BAEzB,KAACC;gBAAIN,WAAW,GAAGP,UAAU,QAAQ,CAAC;0BACpC,cAAA,KAACF;oBAAaE,WAAWA;;;0BAE3B,KAACa;gBAAIN,WAAW,GAAGP,UAAU,QAAQ,CAAC;gBAAEc,KAAKV;0BAC1CH;;;;AAIT,EAAC"}

package/dist/components/EnhancedSidebar/SidebarWrapper/index.scss

@@ -0,0 +1,63 @@
+@import '~@payloadcms/ui/scss';
+
+@layer payload-default {
+  .enhanced-sidebar {
+    position: sticky;
+    top: 0;
+    left: 0;
+    flex-shrink: 0;
+    height: 100vh;
+    width: var(--nav-width);
+    border-right: 1px solid var(--theme-elevation-100);
+    opacity: 0;
+
+    [dir='rtl'] & {
+      border-right: none;
+      border-left: 1px solid var(--theme-elevation-100);
+    }
+
+    &--nav-animate {
+      transition: opacity var(--nav-trans-time) ease-in-out;
+    }
+
+    &--nav-open {
+      opacity: 1;
+    }
+
+    &__header {
+      position: absolute;
+      top: 0;
+      width: 100vw;
+      height: var(--app-header-height);
+      z-index: 1;
+    }
+
+    &__mobile-close {
+      display: none;
+      background: none;
+      border: 0;
+      outline: 0;
+      padding: base(0.8) 0;
+      cursor: pointer;
+    }
+
+    &__scroll {
+      height: 100%;
+      display: flex;
+      flex-direction: row;
+    }
+
+    @include small-break {
+      &__mobile-close {
+        display: flex;
+        align-items: center;
+        padding-left: var(--gutter-h);
+
+        [dir='rtl'] & {
+          padding-left: 0;
+          padding-right: var(--gutter-h);
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { EnhancedSidebarConfig } from '../../../types';
+import './index.scss';
+export type TabsBarProps = {
+    activeTabId: string;
+    onTabChange: (tabId: string) => void;
+    sidebarConfig: EnhancedSidebarConfig;
+};
+export declare const TabsBar: React.FC<TabsBarProps>;