@veiag/payload-enhanced-sidebar 0.1.0

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

@@ -0,0 +1,85 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { getTranslation } from '@payloadcms/translations';
+import { Link, useConfig, useTranslation } from '@payloadcms/ui';
+import { usePathname } from 'next/navigation';
+import { formatAdminURL } from 'payload/shared';
+import React from 'react';
+import { Icon } from '../Icon';
+import './index.scss';
+const tabsBaseClass = 'tabs-bar';
+export const TabsBar = ({ activeTabId, onTabChange, sidebarConfig })=>{
+    const { i18n } = useTranslation();
+    const pathname = usePathname();
+    const { config: { admin: { routes: { logout: logoutRoute } }, routes: { admin: adminRoute } } } = useConfig();
+    const showLogout = sidebarConfig.showLogout !== false;
+    const renderTab = (tab)=>{
+        const label = getTranslation(tab.label, i18n);
+        const isActive = activeTabId === tab.id;
+        return /*#__PURE__*/ _jsx("button", {
+            className: `${tabsBaseClass}__tab ${isActive ? `${tabsBaseClass}__tab--active` : ''}`,
+            onClick: ()=>onTabChange(tab.id),
+            title: label,
+            type: "button",
+            children: /*#__PURE__*/ _jsx(Icon, {
+                name: tab.icon,
+                size: 20
+            })
+        }, tab.id);
+    };
+    const renderLink = (link)=>{
+        const label = getTranslation(link.label, i18n);
+        const href = formatAdminURL({
+            adminRoute,
+            path: link.href
+        });
+        // Check if this link is active
+        const isActive = pathname === href || link.href === '/' && pathname === adminRoute;
+        return /*#__PURE__*/ _jsx(Link, {
+            className: `${tabsBaseClass}__link ${isActive ? `${tabsBaseClass}__link--active` : ''}`,
+            href: href,
+            title: label,
+            children: /*#__PURE__*/ _jsx(Icon, {
+                name: link.icon,
+                size: 20
+            })
+        }, link.id);
+    };
+    const renderTabItem = (item)=>{
+        if (item.type === 'tab') {
+            return renderTab(item);
+        }
+        return renderLink(item);
+    };
+    const tabItems = sidebarConfig.tabs ?? [];
+    return /*#__PURE__*/ _jsxs("div", {
+        className: tabsBaseClass,
+        children: [
+            /*#__PURE__*/ _jsx("div", {
+                className: `${tabsBaseClass}__tabs`,
+                children: tabItems.map(renderTabItem)
+            }),
+            showLogout && /*#__PURE__*/ _jsx("div", {
+                className: `${tabsBaseClass}__actions`,
+                children: /*#__PURE__*/ _jsx(Link, {
+                    className: `${tabsBaseClass}__action`,
+                    href: formatAdminURL({
+                        adminRoute,
+                        path: logoutRoute
+                    }),
+                    title: getTranslation({
+                        en: 'Logout',
+                        uk: 'Вийти'
+                    }, i18n),
+                    type: "button",
+                    children: /*#__PURE__*/ _jsx(Icon, {
+                        name: "LogOut",
+                        size: 20
+                    })
+                })
+            })
+        ]
+    });
+};
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/EnhancedSidebar/TabsBar/index.tsx"],"sourcesContent":["'use client'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport { Link, useConfig, useTranslation } from '@payloadcms/ui'\nimport { usePathname } from 'next/navigation'\nimport { formatAdminURL } from 'payload/shared'\nimport React from 'react'\n\nimport type { EnhancedSidebarConfig, SidebarTabContent, SidebarTabLink } from '../../../types'\n\nimport { Icon } from '../Icon'\nimport './index.scss'\n\nconst tabsBaseClass = 'tabs-bar'\n\nexport type TabsBarProps = {\n  activeTabId: string\n  onTabChange: (tabId: string) => void\n  sidebarConfig: EnhancedSidebarConfig\n}\n\nexport const TabsBar: React.FC<TabsBarProps> = ({ activeTabId, onTabChange, sidebarConfig }) => {\n  const { i18n } = useTranslation()\n  const pathname = usePathname()\n\n  const {\n    config: {\n      admin: {\n        routes: { logout: logoutRoute },\n      },\n      routes: { admin: adminRoute },\n    },\n  } = useConfig()\n\n  const showLogout = sidebarConfig.showLogout !== false\n\n  const renderTab = (tab: SidebarTabContent) => {\n    const label = getTranslation(tab.label, i18n)\n    const isActive = activeTabId === tab.id\n\n    return (\n      <button\n        className={`${tabsBaseClass}__tab ${isActive ? `${tabsBaseClass}__tab--active` : ''}`}\n        key={tab.id}\n        onClick={() => onTabChange(tab.id)}\n        title={label}\n        type=\"button\"\n      >\n        <Icon name={tab.icon} size={20} />\n      </button>\n    )\n  }\n\n  const renderLink = (link: SidebarTabLink) => {\n    const label = getTranslation(link.label, i18n)\n    const href = formatAdminURL({ adminRoute, path: link.href as `/${string}` })\n\n    // Check if this link is active\n    const isActive = pathname === href || (link.href === '/' && pathname === adminRoute)\n\n    return (\n      <Link\n        className={`${tabsBaseClass}__link ${isActive ? `${tabsBaseClass}__link--active` : ''}`}\n        href={href}\n        key={link.id}\n        title={label}\n      >\n        <Icon name={link.icon} size={20} />\n      </Link>\n    )\n  }\n\n  const renderTabItem = (item: SidebarTabContent | SidebarTabLink) => {\n    if (item.type === 'tab') {\n      return renderTab(item)\n    }\n    return renderLink(item)\n  }\n\n  const tabItems = sidebarConfig.tabs ?? []\n\n  return (\n    <div className={tabsBaseClass}>\n      <div className={`${tabsBaseClass}__tabs`}>{tabItems.map(renderTabItem)}</div>\n\n      {showLogout && (\n        <div className={`${tabsBaseClass}__actions`}>\n          <Link\n            className={`${tabsBaseClass}__action`}\n            href={formatAdminURL({\n              adminRoute,\n              path: logoutRoute,\n            })}\n            title={getTranslation({ en: 'Logout', uk: 'Вийти' }, i18n)}\n            type=\"button\"\n          >\n            <Icon name=\"LogOut\" size={20} />\n          </Link>\n        </div>\n      )}\n    </div>\n  )\n}\n"],"names":["getTranslation","Link","useConfig","useTranslation","usePathname","formatAdminURL","React","Icon","tabsBaseClass","TabsBar","activeTabId","onTabChange","sidebarConfig","i18n","pathname","config","admin","routes","logout","logoutRoute","adminRoute","showLogout","renderTab","tab","label","isActive","id","button","className","onClick","title","type","name","icon","size","renderLink","link","href","path","renderTabItem","item","tabItems","tabs","div","map","en","uk"],"mappings":"AAAA;;AAEA,SAASA,cAAc,QAAQ,2BAA0B;AACzD,SAASC,IAAI,EAAEC,SAAS,EAAEC,cAAc,QAAQ,iBAAgB;AAChE,SAASC,WAAW,QAAQ,kBAAiB;AAC7C,SAASC,cAAc,QAAQ,iBAAgB;AAC/C,OAAOC,WAAW,QAAO;AAIzB,SAASC,IAAI,QAAQ,UAAS;AAC9B,OAAO,eAAc;AAErB,MAAMC,gBAAgB;AAQtB,OAAO,MAAMC,UAAkC,CAAC,EAAEC,WAAW,EAAEC,WAAW,EAAEC,aAAa,EAAE;IACzF,MAAM,EAAEC,IAAI,EAAE,GAAGV;IACjB,MAAMW,WAAWV;IAEjB,MAAM,EACJW,QAAQ,EACNC,OAAO,EACLC,QAAQ,EAAEC,QAAQC,WAAW,EAAE,EAChC,EACDF,QAAQ,EAAED,OAAOI,UAAU,EAAE,EAC9B,EACF,GAAGlB;IAEJ,MAAMmB,aAAaT,cAAcS,UAAU,KAAK;IAEhD,MAAMC,YAAY,CAACC;QACjB,MAAMC,QAAQxB,eAAeuB,IAAIC,KAAK,EAAEX;QACxC,MAAMY,WAAWf,gBAAgBa,IAAIG,EAAE;QAEvC,qBACE,KAACC;YACCC,WAAW,GAAGpB,cAAc,MAAM,EAAEiB,WAAW,GAAGjB,cAAc,aAAa,CAAC,GAAG,IAAI;YAErFqB,SAAS,IAAMlB,YAAYY,IAAIG,EAAE;YACjCI,OAAON;YACPO,MAAK;sBAEL,cAAA,KAACxB;gBAAKyB,MAAMT,IAAIU,IAAI;gBAAEC,MAAM;;WALvBX,IAAIG,EAAE;IAQjB;IAEA,MAAMS,aAAa,CAACC;QAClB,MAAMZ,QAAQxB,eAAeoC,KAAKZ,KAAK,EAAEX;QACzC,MAAMwB,OAAOhC,eAAe;YAAEe;YAAYkB,MAAMF,KAAKC,IAAI;QAAiB;QAE1E,+BAA+B;QAC/B,MAAMZ,WAAWX,aAAauB,QAASD,KAAKC,IAAI,KAAK,OAAOvB,aAAaM;QAEzE,qBACE,KAACnB;YACC2B,WAAW,GAAGpB,cAAc,OAAO,EAAEiB,WAAW,GAAGjB,cAAc,cAAc,CAAC,GAAG,IAAI;YACvF6B,MAAMA;YAENP,OAAON;sBAEP,cAAA,KAACjB;gBAAKyB,MAAMI,KAAKH,IAAI;gBAAEC,MAAM;;WAHxBE,KAAKV,EAAE;IAMlB;IAEA,MAAMa,gBAAgB,CAACC;QACrB,IAAIA,KAAKT,IAAI,KAAK,OAAO;YACvB,OAAOT,UAAUkB;QACnB;QACA,OAAOL,WAAWK;IACpB;IAEA,MAAMC,WAAW7B,cAAc8B,IAAI,IAAI,EAAE;IAEzC,qBACE,MAACC;QAAIf,WAAWpB;;0BACd,KAACmC;gBAAIf,WAAW,GAAGpB,cAAc,MAAM,CAAC;0BAAGiC,SAASG,GAAG,CAACL;;YAEvDlB,4BACC,KAACsB;gBAAIf,WAAW,GAAGpB,cAAc,SAAS,CAAC;0BACzC,cAAA,KAACP;oBACC2B,WAAW,GAAGpB,cAAc,QAAQ,CAAC;oBACrC6B,MAAMhC,eAAe;wBACnBe;wBACAkB,MAAMnB;oBACR;oBACAW,OAAO9B,eAAe;wBAAE6C,IAAI;wBAAUC,IAAI;oBAAQ,GAAGjC;oBACrDkB,MAAK;8BAEL,cAAA,KAACxB;wBAAKyB,MAAK;wBAASE,MAAM;;;;;;AAMtC,EAAC"}

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

@@ -0,0 +1,108 @@
+@import '~@payloadcms/ui/scss';
+
+@layer payload-default {
+  .tabs-bar {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+    width: 48px;
+    min-width: 48px;
+    padding: base(0.5) 0;
+    border-right: 1px solid var(--theme-elevation-100);
+    background: var(--theme-elevation-50);
+
+    [dir='rtl'] & {
+      border-right: none;
+      border-left: 1px solid var(--theme-elevation-100);
+    }
+
+    &__tabs {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: base(0.25);
+      padding-top: var(--app-header-height);
+    }
+
+    &__tab,
+    &__link {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 36px;
+      height: 36px;
+      border: none;
+      border-radius: base(0.25);
+      background: transparent;
+      color: var(--theme-elevation-500);
+      cursor: pointer;
+      transition: all 150ms ease;
+      text-decoration: none;
+
+      &:hover {
+        background: var(--theme-elevation-100);
+        color: var(--theme-text);
+      }
+    }
+
+    &__tab--active {
+      background: var(--theme-elevation-150);
+      color: var(--theme-text);
+    }
+
+    &__link {
+      position: relative;
+
+      &--active {
+        color: var(--theme-text);
+
+        &::before {
+          content: '';
+          position: absolute;
+          left: -6px;
+          top: 50%;
+          transform: translateY(-50%);
+          width: 3px;
+          height: 20px;
+          background: var(--theme-text);
+          border-radius: 0 2px 2px 0;
+
+          [dir='rtl'] & {
+            left: auto;
+            right: -6px;
+            border-radius: 2px 0 0 2px;
+          }
+        }
+      }
+    }
+
+    &__actions {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: base(0.25);
+      padding-bottom: base(0.5);
+    }
+
+    &__action {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 36px;
+      height: 36px;
+      border: none;
+      border-radius: base(0.25);
+      background: transparent;
+      color: var(--theme-elevation-500);
+      cursor: pointer;
+      transition: all 150ms ease;
+      text-decoration: none;
+
+      &:hover {
+        background: var(--theme-elevation-100);
+        color: var(--theme-text);
+      }
+    }
+  }
+}

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

@@ -0,0 +1,2 @@
+import type { NavPreferences, PayloadRequest } from 'payload';
+export declare const getNavPrefs: (req: PayloadRequest | undefined) => Promise<NavPreferences | null>;

package/dist/components/EnhancedSidebar/getNavPrefs.js

@@ -0,0 +1,31 @@
+import { cache } from 'react';
+export const getNavPrefs = cache(async (req)=>{
+    return req?.user?.collection ? await req.payload.find({
+        collection: 'payload-preferences',
+        depth: 0,
+        limit: 1,
+        pagination: false,
+        req,
+        where: {
+            and: [
+                {
+                    key: {
+                        equals: 'nav'
+                    }
+                },
+                {
+                    'user.relationTo': {
+                        equals: req.user.collection
+                    }
+                },
+                {
+                    'user.value': {
+                        equals: req?.user?.id
+                    }
+                }
+            ]
+        }
+    })?.then((res)=>res?.docs?.[0]?.value) : null;
+});
+
+//# sourceMappingURL=getNavPrefs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/EnhancedSidebar/getNavPrefs.ts"],"sourcesContent":["import type { NavPreferences, PayloadRequest } from 'payload'\n\nimport { cache } from 'react'\n\nexport const getNavPrefs = cache(\n  async (req: PayloadRequest | undefined): Promise<NavPreferences | null> => {\n    return req?.user?.collection\n      ? await req.payload\n          .find({\n            collection: 'payload-preferences',\n            depth: 0,\n            limit: 1,\n            pagination: false,\n            req,\n            where: {\n              and: [\n                {\n                  key: {\n                    equals: 'nav',\n                  },\n                },\n                {\n                  'user.relationTo': {\n                    equals: req.user.collection,\n                  },\n                },\n                {\n                  'user.value': {\n                    equals: req?.user?.id,\n                  },\n                },\n              ],\n            },\n          })\n          ?.then((res) => res?.docs?.[0]?.value)\n      : null\n  },\n)\n"],"names":["cache","getNavPrefs","req","user","collection","payload","find","depth","limit","pagination","where","and","key","equals","id","then","res","docs","value"],"mappings":"AAEA,SAASA,KAAK,QAAQ,QAAO;AAE7B,OAAO,MAAMC,cAAcD,MACzB,OAAOE;IACL,OAAOA,KAAKC,MAAMC,aACd,MAAMF,IAAIG,OAAO,CACdC,IAAI,CAAC;QACJF,YAAY;QACZG,OAAO;QACPC,OAAO;QACPC,YAAY;QACZP;QACAQ,OAAO;YACLC,KAAK;gBACH;oBACEC,KAAK;wBACHC,QAAQ;oBACV;gBACF;gBACA;oBACE,mBAAmB;wBACjBA,QAAQX,IAAIC,IAAI,CAACC,UAAU;oBAC7B;gBACF;gBACA;oBACE,cAAc;wBACZS,QAAQX,KAAKC,MAAMW;oBACrB;gBACF;aACD;QACH;IACF,IACEC,KAAK,CAACC,MAAQA,KAAKC,MAAM,CAAC,EAAE,EAAEC,SAClC;AACN,GACD"}

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

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

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

@@ -0,0 +1,94 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { getTranslation } from '@payloadcms/translations';
+import { Link, NavGroup, useConfig, useTranslation } from '@payloadcms/ui';
+import { usePathname } from 'next/navigation.js';
+import { formatAdminURL } from 'payload/shared';
+import React, { Fragment } from 'react';
+const baseClass = 'enhanced-sidebar';
+export const EnhancedSidebarClient = ({ 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 content = entities.map((entity, i)=>{
+                const { slug, label: entityLabel } = entity;
+                const entityType = entity.type;
+                let href;
+                let id;
+                // Check for collection (Will break if EntityType enum changes)
+                if (entityType === 'collection') {
+                    href = formatAdminURL({
+                        adminRoute,
+                        path: `/collections/${slug}`
+                    });
+                    id = `nav-${slug}`;
+                } else if (entityType === 'global') {
+                    href = formatAdminURL({
+                        adminRoute,
+                        path: `/globals/${slug}`
+                    });
+                    id = `nav-global-${slug}`;
+                } else if (entityType === 'custom' && entity.href) {
+                    // Custom item with href
+                    const customHref = entity.href;
+                    href = formatAdminURL({
+                        adminRoute,
+                        path: customHref
+                    });
+                    id = `nav-custom-${slug}`;
+                } else {
+                    return null;
+                }
+                const isActive = pathname.startsWith(href) && [
+                    '/',
+                    undefined
+                ].includes(pathname[href.length]);
+                const Label = /*#__PURE__*/ _jsxs(_Fragment, {
+                    children: [
+                        isActive && /*#__PURE__*/ _jsx("div", {
+                            className: `${baseClass}__link-indicator`
+                        }),
+                        /*#__PURE__*/ _jsx("span", {
+                            className: `${baseClass}__link-label`,
+                            children: getTranslation(entityLabel, i18n)
+                        })
+                    ]
+                });
+                if (pathname === href) {
+                    return /*#__PURE__*/ _jsx("div", {
+                        className: `${baseClass}__link`,
+                        id: id,
+                        children: Label
+                    }, i);
+                }
+                return /*#__PURE__*/ _jsx(Link, {
+                    className: `${baseClass}__link`,
+                    href: href,
+                    id: id,
+                    prefetch: false,
+                    children: Label
+                }, i);
+            });
+            // For ungrouped items, render without NavGroup wrapper
+            if (isUngrouped) {
+                return /*#__PURE__*/ _jsx(Fragment, {
+                    children: content
+                }, key);
+            }
+            // Get translated label for NavGroup
+            const translatedLabel = getTranslation(groupLabel, i18n);
+            return /*#__PURE__*/ _jsx(NavGroup, {
+                isOpen: navPreferences?.groups?.[translatedLabel]?.open,
+                label: translatedLabel,
+                children: content
+            }, key);
+        })
+    });
+};
+
+//# sourceMappingURL=index.client.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/EnhancedSidebar/index.client.tsx"],"sourcesContent":["'use client'\nimport type { NavPreferences } from 'payload'\nimport type { ExtendedGroup } from 'src/types'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport { Link, NavGroup, useConfig, useTranslation } from '@payloadcms/ui'\nimport { usePathname } from 'next/navigation.js'\nimport { formatAdminURL } from 'payload/shared'\nimport React, { Fragment } from 'react'\n\nconst baseClass = 'enhanced-sidebar'\n\nexport const EnhancedSidebarClient: React.FC<{\n  groups: ExtendedGroup[]\n  navPreferences: NavPreferences | null\n}> = ({ 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\n        const content = entities.map((entity, i) => {\n          const { slug, label: entityLabel } = entity\n          const entityType = entity.type\n          let href: string\n          let id: string\n\n          // Check for collection (Will break if EntityType enum changes)\n          if (entityType === 'collection') {\n            href = formatAdminURL({ adminRoute, path: `/collections/${slug}` })\n            id = `nav-${slug}`\n          } else if (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            const customHref = entity.href\n            href = formatAdminURL({ adminRoute, path: customHref as `/${string}` })\n            id = `nav-custom-${slug}`\n          } else {\n            return null\n          }\n\n          const isActive =\n            pathname.startsWith(href) && ['/', undefined].includes(pathname[href.length])\n\n          const Label = (\n            <>\n              {isActive && <div className={`${baseClass}__link-indicator`} />}\n              <span className={`${baseClass}__link-label`}>\n                {getTranslation(entityLabel, i18n)}\n              </span>\n            </>\n          )\n\n          if (pathname === href) {\n            return (\n              <div className={`${baseClass}__link`} id={id} key={i}>\n                {Label}\n              </div>\n            )\n          }\n\n          return (\n            <Link className={`${baseClass}__link`} href={href} id={id} key={i} prefetch={false}>\n              {Label}\n            </Link>\n          )\n        })\n\n        // For ungrouped items, render without NavGroup wrapper\n        if (isUngrouped) {\n          return <Fragment key={key}>{content}</Fragment>\n        }\n\n        // Get translated label for NavGroup\n        const translatedLabel = getTranslation(groupLabel, i18n)\n\n        return (\n          <NavGroup\n            isOpen={navPreferences?.groups?.[translatedLabel]?.open}\n            key={key}\n            label={translatedLabel}\n          >\n            {content}\n          </NavGroup>\n        )\n      })}\n    </Fragment>\n  )\n}\n"],"names":["getTranslation","Link","NavGroup","useConfig","useTranslation","usePathname","formatAdminURL","React","Fragment","baseClass","EnhancedSidebarClient","groups","navPreferences","pathname","config","routes","admin","adminRoute","i18n","map","entities","label","key","groupLabel","isUngrouped","content","entity","i","slug","entityLabel","entityType","type","href","id","path","customHref","isActive","startsWith","undefined","includes","length","Label","div","className","span","prefetch","translatedLabel","isOpen","open"],"mappings":"AAAA;;AAIA,SAASA,cAAc,QAAQ,2BAA0B;AACzD,SAASC,IAAI,EAAEC,QAAQ,EAAEC,SAAS,EAAEC,cAAc,QAAQ,iBAAgB;AAC1E,SAASC,WAAW,QAAQ,qBAAoB;AAChD,SAASC,cAAc,QAAQ,iBAAgB;AAC/C,OAAOC,SAASC,QAAQ,QAAQ,QAAO;AAEvC,MAAMC,YAAY;AAElB,OAAO,MAAMC,wBAGR,CAAC,EAAEC,MAAM,EAAEC,cAAc,EAAE;IAC9B,MAAMC,WAAWR;IAEjB,MAAM,EACJS,QAAQ,EACNC,QAAQ,EAAEC,OAAOC,UAAU,EAAE,EAC9B,EACF,GAAGd;IAEJ,MAAM,EAAEe,IAAI,EAAE,GAAGd;IAEjB,qBACE,KAACI;kBACEG,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;YAEtE,MAAMI,UAAUL,SAASD,GAAG,CAAC,CAACO,QAAQC;gBACpC,MAAM,EAAEC,IAAI,EAAEP,OAAOQ,WAAW,EAAE,GAAGH;gBACrC,MAAMI,aAAaJ,OAAOK,IAAI;gBAC9B,IAAIC;gBACJ,IAAIC;gBAEJ,+DAA+D;gBAC/D,IAAIH,eAAe,cAAc;oBAC/BE,OAAO1B,eAAe;wBAAEW;wBAAYiB,MAAM,CAAC,aAAa,EAAEN,MAAM;oBAAC;oBACjEK,KAAK,CAAC,IAAI,EAAEL,MAAM;gBACpB,OAAO,IAAIE,eAAe,UAAU;oBAClCE,OAAO1B,eAAe;wBAAEW;wBAAYiB,MAAM,CAAC,SAAS,EAAEN,MAAM;oBAAC;oBAC7DK,KAAK,CAAC,WAAW,EAAEL,MAAM;gBAC3B,OAAO,IAAIE,eAAe,YAAYJ,OAAOM,IAAI,EAAE;oBACjD,wBAAwB;oBACxB,MAAMG,aAAaT,OAAOM,IAAI;oBAC9BA,OAAO1B,eAAe;wBAAEW;wBAAYiB,MAAMC;oBAA2B;oBACrEF,KAAK,CAAC,WAAW,EAAEL,MAAM;gBAC3B,OAAO;oBACL,OAAO;gBACT;gBAEA,MAAMQ,WACJvB,SAASwB,UAAU,CAACL,SAAS;oBAAC;oBAAKM;iBAAU,CAACC,QAAQ,CAAC1B,QAAQ,CAACmB,KAAKQ,MAAM,CAAC;gBAE9E,MAAMC,sBACJ;;wBACGL,0BAAY,KAACM;4BAAIC,WAAW,GAAGlC,UAAU,gBAAgB,CAAC;;sCAC3D,KAACmC;4BAAKD,WAAW,GAAGlC,UAAU,YAAY,CAAC;sCACxCT,eAAe6B,aAAaX;;;;gBAKnC,IAAIL,aAAamB,MAAM;oBACrB,qBACE,KAACU;wBAAIC,WAAW,GAAGlC,UAAU,MAAM,CAAC;wBAAEwB,IAAIA;kCACvCQ;uBADgDd;gBAIvD;gBAEA,qBACE,KAAC1B;oBAAK0C,WAAW,GAAGlC,UAAU,MAAM,CAAC;oBAAEuB,MAAMA;oBAAMC,IAAIA;oBAAYY,UAAU;8BAC1EJ;mBAD6Dd;YAIpE;YAEA,uDAAuD;YACvD,IAAIH,aAAa;gBACf,qBAAO,KAAChB;8BAAoBiB;mBAANH;YACxB;YAEA,oCAAoC;YACpC,MAAMwB,kBAAkB9C,eAAeuB,YAAYL;YAEnD,qBACE,KAAChB;gBACC6C,QAAQnC,gBAAgBD,QAAQ,CAACmC,gBAAgB,EAAEE;gBAEnD3B,OAAOyB;0BAENrB;eAHIH;QAMX;;AAGN,EAAC"}

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

@@ -0,0 +1,10 @@
+import type { PayloadRequest, ServerProps } from 'payload';
+import React from 'react';
+import type { EnhancedSidebarConfig } from '../../types';
+import './index.scss';
+export type EnhancedSidebarProps = {
+    req?: PayloadRequest;
+    sidebarConfig?: EnhancedSidebarConfig;
+} & ServerProps;
+export declare const EnhancedSidebar: React.FC<EnhancedSidebarProps>;
+export default EnhancedSidebar;

package/dist/components/EnhancedSidebar/index.js

@@ -0,0 +1,65 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { RenderServerComponent } from '@payloadcms/ui/elements/RenderServerComponent';
+import { EntityType, groupNavItems } from '@payloadcms/ui/shared';
+import React from 'react';
+import { getNavPrefs } from './getNavPrefs';
+import { SidebarContent } from './SidebarContent';
+import './index.scss';
+export const EnhancedSidebar = async (props)=>{
+    const { i18n, locale, params, payload, permissions, req, searchParams, sidebarConfig, user, visibleEntities } = props;
+    if (!payload?.config) {
+        return null;
+    }
+    const { admin: { components: { afterNavLinks, beforeNavLinks } }, collections, globals } = payload.config;
+    const groups = groupNavItems([
+        ...collections.filter(({ slug })=>visibleEntities?.collections.includes(slug)).map((collection)=>({
+                type: EntityType.collection,
+                entity: collection
+            })),
+        ...globals.filter(({ slug })=>visibleEntities?.globals.includes(slug)).map((global)=>({
+                type: EntityType.global,
+                entity: global
+            }))
+    ], permissions || {}, i18n);
+    const navPreferences = await getNavPrefs(req);
+    const serverProps = {
+        i18n,
+        locale,
+        params,
+        payload,
+        permissions,
+        searchParams,
+        user
+    };
+    const beforeNavLinksRendered = RenderServerComponent({
+        Component: beforeNavLinks,
+        importMap: payload.importMap,
+        serverProps
+    });
+    const afterNavLinksRendered = RenderServerComponent({
+        Component: afterNavLinks,
+        importMap: payload.importMap,
+        serverProps
+    });
+    // Default config if not provided
+    const config = sidebarConfig ?? {
+        tabs: [
+            {
+                id: 'default',
+                type: 'tab',
+                icon: 'LayoutGrid',
+                label: 'Collections'
+            }
+        ]
+    };
+    return /*#__PURE__*/ _jsx(SidebarContent, {
+        afterNavLinks: afterNavLinksRendered,
+        beforeNavLinks: beforeNavLinksRendered,
+        groups: groups,
+        navPreferences: navPreferences,
+        sidebarConfig: config
+    });
+};
+export default EnhancedSidebar;
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/EnhancedSidebar/index.tsx"],"sourcesContent":["import type { EntityToGroup } from '@payloadcms/ui/shared'\nimport type { PayloadRequest, ServerProps } from 'payload'\n\nimport { RenderServerComponent } from '@payloadcms/ui/elements/RenderServerComponent'\nimport { EntityType, groupNavItems } from '@payloadcms/ui/shared'\nimport React from 'react'\n\nimport type { EnhancedSidebarConfig, ExtendedGroup } from '../../types'\n\nimport { getNavPrefs } from './getNavPrefs'\nimport { SidebarContent } from './SidebarContent'\nimport './index.scss'\n\nexport type EnhancedSidebarProps = {\n  req?: PayloadRequest\n  sidebarConfig?: EnhancedSidebarConfig\n} & ServerProps\n\nexport const EnhancedSidebar: React.FC<EnhancedSidebarProps> = async (props) => {\n  const {\n    i18n,\n    locale,\n    params,\n    payload,\n    permissions,\n    req,\n    searchParams,\n    sidebarConfig,\n    user,\n    visibleEntities,\n  } = props\n\n  if (!payload?.config) {\n    return null\n  }\n\n  const {\n    admin: {\n      components: { afterNavLinks, beforeNavLinks },\n    },\n    collections,\n    globals,\n  } = payload.config\n\n  const groups = groupNavItems(\n    [\n      ...collections\n        .filter(({ slug }) => visibleEntities?.collections.includes(slug))\n        .map(\n          (collection) =>\n            ({\n              type: EntityType.collection,\n              entity: collection,\n            }) satisfies EntityToGroup,\n        ),\n      ...globals\n        .filter(({ slug }) => visibleEntities?.globals.includes(slug))\n        .map(\n          (global) =>\n            ({\n              type: EntityType.global,\n              entity: global,\n            }) satisfies EntityToGroup,\n        ),\n    ],\n    permissions || {},\n    i18n,\n  ) as unknown as ExtendedGroup[]\n\n  const navPreferences = await getNavPrefs(req)\n\n  const serverProps = {\n    i18n,\n    locale,\n    params,\n    payload,\n    permissions,\n    searchParams,\n    user,\n  }\n\n  const beforeNavLinksRendered = RenderServerComponent({\n    Component: beforeNavLinks,\n    importMap: payload.importMap,\n    serverProps,\n  })\n\n  const afterNavLinksRendered = RenderServerComponent({\n    Component: afterNavLinks,\n    importMap: payload.importMap,\n    serverProps,\n  })\n\n  // Default config if not provided\n  const config: EnhancedSidebarConfig = sidebarConfig ?? {\n    tabs: [\n      {\n        id: 'default',\n        type: 'tab',\n        icon: 'LayoutGrid',\n        label: 'Collections',\n      },\n    ],\n  }\n\n  return (\n    <SidebarContent\n      afterNavLinks={afterNavLinksRendered}\n      beforeNavLinks={beforeNavLinksRendered}\n      groups={groups}\n      navPreferences={navPreferences}\n      sidebarConfig={config}\n    />\n  )\n}\n\nexport default EnhancedSidebar\n"],"names":["RenderServerComponent","EntityType","groupNavItems","React","getNavPrefs","SidebarContent","EnhancedSidebar","props","i18n","locale","params","payload","permissions","req","searchParams","sidebarConfig","user","visibleEntities","config","admin","components","afterNavLinks","beforeNavLinks","collections","globals","groups","filter","slug","includes","map","collection","type","entity","global","navPreferences","serverProps","beforeNavLinksRendered","Component","importMap","afterNavLinksRendered","tabs","id","icon","label"],"mappings":";AAGA,SAASA,qBAAqB,QAAQ,gDAA+C;AACrF,SAASC,UAAU,EAAEC,aAAa,QAAQ,wBAAuB;AACjE,OAAOC,WAAW,QAAO;AAIzB,SAASC,WAAW,QAAQ,gBAAe;AAC3C,SAASC,cAAc,QAAQ,mBAAkB;AACjD,OAAO,eAAc;AAOrB,OAAO,MAAMC,kBAAkD,OAAOC;IACpE,MAAM,EACJC,IAAI,EACJC,MAAM,EACNC,MAAM,EACNC,OAAO,EACPC,WAAW,EACXC,GAAG,EACHC,YAAY,EACZC,aAAa,EACbC,IAAI,EACJC,eAAe,EAChB,GAAGV;IAEJ,IAAI,CAACI,SAASO,QAAQ;QACpB,OAAO;IACT;IAEA,MAAM,EACJC,OAAO,EACLC,YAAY,EAAEC,aAAa,EAAEC,cAAc,EAAE,EAC9C,EACDC,WAAW,EACXC,OAAO,EACR,GAAGb,QAAQO,MAAM;IAElB,MAAMO,SAASvB,cACb;WACKqB,YACAG,MAAM,CAAC,CAAC,EAAEC,IAAI,EAAE,GAAKV,iBAAiBM,YAAYK,SAASD,OAC3DE,GAAG,CACF,CAACC,aACE,CAAA;gBACCC,MAAM9B,WAAW6B,UAAU;gBAC3BE,QAAQF;YACV,CAAA;WAEHN,QACAE,MAAM,CAAC,CAAC,EAAEC,IAAI,EAAE,GAAKV,iBAAiBO,QAAQI,SAASD,OACvDE,GAAG,CACF,CAACI,SACE,CAAA;gBACCF,MAAM9B,WAAWgC,MAAM;gBACvBD,QAAQC;YACV,CAAA;KAEP,EACDrB,eAAe,CAAC,GAChBJ;IAGF,MAAM0B,iBAAiB,MAAM9B,YAAYS;IAEzC,MAAMsB,cAAc;QAClB3B;QACAC;QACAC;QACAC;QACAC;QACAE;QACAE;IACF;IAEA,MAAMoB,yBAAyBpC,sBAAsB;QACnDqC,WAAWf;QACXgB,WAAW3B,QAAQ2B,SAAS;QAC5BH;IACF;IAEA,MAAMI,wBAAwBvC,sBAAsB;QAClDqC,WAAWhB;QACXiB,WAAW3B,QAAQ2B,SAAS;QAC5BH;IACF;IAEA,iCAAiC;IACjC,MAAMjB,SAAgCH,iBAAiB;QACrDyB,MAAM;YACJ;gBACEC,IAAI;gBACJV,MAAM;gBACNW,MAAM;gBACNC,OAAO;YACT;SACD;IACH;IAEA,qBACE,KAACtC;QACCgB,eAAekB;QACfjB,gBAAgBc;QAChBX,QAAQA;QACRS,gBAAgBA;QAChBnB,eAAeG;;AAGrB,EAAC;AAED,eAAeZ,gBAAe"}

package/dist/components/EnhancedSidebar/index.scss

@@ -0,0 +1,101 @@
+@import '~@payloadcms/ui/scss';
+
+@layer payload-default {
+  .enhanced-sidebar {
+    &__content {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+    }
+
+    &__content-scroll {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      padding: var(--app-header-height) base(1) base(2) base(1);
+      overflow-y: auto;
+
+      &::-webkit-scrollbar {
+        display: none;
+      }
+    }
+
+    &__link {
+      display: flex;
+      align-items: center;
+      position: relative;
+      padding-block: base(0.125);
+      padding-inline-start: 0;
+      padding-inline-end: base(1.5);
+      text-decoration: none;
+
+      &:focus:not(:focus-visible) {
+        box-shadow: none;
+        font-weight: 600;
+      }
+
+      &.active {
+        font-weight: 600;
+      }
+    }
+
+    a.enhanced-sidebar__link {
+      &:hover,
+      &:focus-visible {
+        text-decoration: underline;
+      }
+    }
+
+    &__link:has(.enhanced-sidebar__link-indicator) {
+      font-weight: 600;
+    }
+
+    &__link-indicator {
+      position: absolute;
+      display: block;
+      inset-inline-start: base(-1);
+      width: 2px;
+      height: 16px;
+      border-start-end-radius: 2px;
+      border-end-end-radius: 2px;
+      background: var(--theme-text);
+    }
+
+    // &__link-label {
+    //   // inherit styles
+    // }
+
+    &__link-icon {
+      margin-right: base(0.5);
+      flex-shrink: 0;
+    }
+
+    &__link--active {
+      font-weight: 600;
+    }
+
+    &__custom-items {
+      display: flex;
+      flex-direction: column;
+      gap: base(0.25);
+    }
+
+    @include mid-break {
+      &__content-scroll {
+        padding-inline: base(0.5);
+      }
+    }
+
+    @include small-break {
+      &__content-scroll {
+        padding-inline: var(--gutter-h);
+      }
+
+      &__link {
+        font-size: base(0.875);
+        line-height: base(1.5);
+      }
+    }
+  }
+}

package/dist/exports/client.js

@@ -0,0 +1,3 @@
+// Client components will be exported here
+
+//# sourceMappingURL=client.js.map

package/dist/exports/client.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/exports/client.ts"],"sourcesContent":["// Client components will be exported here\n"],"names":[],"mappings":"AAAA,0CAA0C"}

package/dist/exports/rsc.d.ts

@@ -0,0 +1 @@
+export { default as EnhancedSidebar } from '../components/EnhancedSidebar';

package/dist/exports/rsc.js

@@ -0,0 +1,3 @@
+export { default as EnhancedSidebar } from '../components/EnhancedSidebar';
+
+//# sourceMappingURL=rsc.js.map

package/dist/exports/rsc.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/exports/rsc.ts"],"sourcesContent":["export { default as EnhancedSidebar } from '../components/EnhancedSidebar'\n"],"names":["default","EnhancedSidebar"],"mappings":"AAAA,SAASA,WAAWC,eAAe,QAAQ,gCAA+B"}

package/dist/hooks/useMutationObserver.d.ts

@@ -0,0 +1 @@
+export declare const useMutationObserver: (ref: React.RefObject<HTMLElement | null>, callback: MutationCallback, options?: MutationObserverInit) => void;

package/dist/hooks/useMutationObserver.js

@@ -0,0 +1,21 @@
+import { useEffect } from 'react';
+export const useMutationObserver = (ref, callback, options = {
+    attributes: true,
+    characterData: true,
+    childList: true,
+    subtree: true
+})=>{
+    useEffect(()=>{
+        if (ref.current) {
+            const observer = new MutationObserver(callback);
+            observer.observe(ref.current, options);
+            return ()=>observer.disconnect();
+        }
+    }, [
+        ref,
+        callback,
+        options
+    ]);
+};
+
+//# sourceMappingURL=useMutationObserver.js.map

package/dist/hooks/useMutationObserver.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/hooks/useMutationObserver.ts"],"sourcesContent":["import { useEffect } from 'react'\n\nexport const useMutationObserver = (\n  ref: React.RefObject<HTMLElement | null>,\n  callback: MutationCallback,\n  options: MutationObserverInit = {\n    attributes: true,\n    characterData: true,\n    childList: true,\n    subtree: true,\n  },\n) => {\n  useEffect(() => {\n    if (ref.current) {\n      const observer = new MutationObserver(callback)\n      observer.observe(ref.current, options)\n      return () => observer.disconnect()\n    }\n  }, [ref, callback, options])\n}\n"],"names":["useEffect","useMutationObserver","ref","callback","options","attributes","characterData","childList","subtree","current","observer","MutationObserver","observe","disconnect"],"mappings":"AAAA,SAASA,SAAS,QAAQ,QAAO;AAEjC,OAAO,MAAMC,sBAAsB,CACjCC,KACAC,UACAC,UAAgC;IAC9BC,YAAY;IACZC,eAAe;IACfC,WAAW;IACXC,SAAS;AACX,CAAC;IAEDR,UAAU;QACR,IAAIE,IAAIO,OAAO,EAAE;YACf,MAAMC,WAAW,IAAIC,iBAAiBR;YACtCO,SAASE,OAAO,CAACV,IAAIO,OAAO,EAAEL;YAC9B,OAAO,IAAMM,SAASG,UAAU;QAClC;IACF,GAAG;QAACX;QAAKC;QAAUC;KAAQ;AAC7B,EAAC"}

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+import { type Config } from 'payload';
+import type { EnhancedSidebarConfig } from './types';
+export declare const payloadEnhancedSidebar: (pluginOptions?: EnhancedSidebarConfig) => (config: Config) => Config;
+export type { EnhancedSidebarConfig } from './types';