@veiag/payload-enhanced-sidebar 0.1.2 → 0.2.0

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

@@ -0,0 +1,46 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { getTranslation } from '@payloadcms/translations';
+import { Link, useTranslation } from '@payloadcms/ui';
+import React from 'react';
+import { Badge } from '../Badge';
+import { useBadge } from '../hooks/useBadge';
+const baseClass = 'enhanced-sidebar';
+export const NavItem = ({ id, badgeConfig, entity, href, isActive, isCurrentPage })=>{
+    const { i18n } = useTranslation();
+    const { value: badgeValue } = useBadge(badgeConfig, entity.slug);
+    const Label = /*#__PURE__*/ _jsxs(_Fragment, {
+        children: [
+            isActive && /*#__PURE__*/ _jsx("div", {
+                className: `${baseClass}__link-indicator`
+            }),
+            /*#__PURE__*/ _jsx("span", {
+                className: `${baseClass}__link-label`,
+                children: getTranslation(entity.label, i18n)
+            }),
+            badgeValue !== undefined && /*#__PURE__*/ _jsx(Badge, {
+                color: badgeConfig?.color,
+                position: "inline",
+                value: badgeValue
+            })
+        ]
+    });
+    if (isCurrentPage) {
+        return /*#__PURE__*/ _jsx("div", {
+            className: `${baseClass}__link`,
+            id: id,
+            children: Label
+        });
+    }
+    return /*#__PURE__*/ _jsx(Link, {
+        className: `${baseClass}__link`,
+        href: href,
+        id: id,
+        prefetch: false,
+        rel: entity.isExternal ? 'noopener noreferrer' : undefined,
+        target: entity.isExternal ? '_blank' : undefined,
+        children: Label
+    });
+};
+
+//# sourceMappingURL=index.js.map

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

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

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

@@ -0,0 +1,6 @@
+import React from 'react';
+import './index.scss';
+export type SettingsMenuButtonProps = {
+    settingsMenu?: React.ReactNode[];
+};
+export declare const SettingsMenuButton: React.FC<SettingsMenuButtonProps>;

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

@@ -0,0 +1,33 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Popup, useTranslation } from '@payloadcms/ui';
+import React, { Fragment } from 'react';
+import { Icon } from '../Icon';
+import './index.scss';
+const baseClass = 'settings-menu-button';
+export const SettingsMenuButton = ({ settingsMenu })=>{
+    const { t } = useTranslation();
+    if (!settingsMenu || settingsMenu.length === 0) {
+        return null;
+    }
+    return /*#__PURE__*/ _jsx(Popup, {
+        button: /*#__PURE__*/ _jsx("span", {
+            "aria-label": t('general:menu'),
+            className: `${baseClass}__button`,
+            children: /*#__PURE__*/ _jsx(Icon, {
+                name: "Settings",
+                size: 20
+            })
+        }),
+        className: baseClass,
+        horizontalAlign: "right",
+        id: "settings-menu",
+        size: "small",
+        verticalAlign: "top",
+        children: settingsMenu.map((item, i)=>/*#__PURE__*/ _jsx(Fragment, {
+                children: item
+            }, `settings-menu-item-${i}`))
+    });
+};
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/EnhancedSidebar/SettingsMenuButton/index.tsx"],"sourcesContent":["'use client'\nimport { Popup, useTranslation } from '@payloadcms/ui'\nimport React, { Fragment } from 'react'\n\nimport { Icon } from '../Icon'\nimport './index.scss'\n\nconst baseClass = 'settings-menu-button'\n\nexport type SettingsMenuButtonProps = {\n  settingsMenu?: React.ReactNode[]\n}\n\nexport const SettingsMenuButton: React.FC<SettingsMenuButtonProps> = ({ settingsMenu }) => {\n  const { t } = useTranslation()\n\n  if (!settingsMenu || settingsMenu.length === 0) {\n    return null\n  }\n\n  return (\n    <Popup\n      button={\n        <span aria-label={t('general:menu')} className={`${baseClass}__button`}>\n          <Icon name=\"Settings\" size={20} />\n        </span>\n      }\n      className={baseClass}\n      horizontalAlign=\"right\"\n      id=\"settings-menu\"\n      size=\"small\"\n      verticalAlign=\"top\"\n    >\n      {settingsMenu.map((item, i) => (\n        <Fragment key={`settings-menu-item-${i}`}>{item}</Fragment>\n      ))}\n    </Popup>\n  )\n}\n"],"names":["Popup","useTranslation","React","Fragment","Icon","baseClass","SettingsMenuButton","settingsMenu","t","length","button","span","aria-label","className","name","size","horizontalAlign","id","verticalAlign","map","item","i"],"mappings":"AAAA;;AACA,SAASA,KAAK,EAAEC,cAAc,QAAQ,iBAAgB;AACtD,OAAOC,SAASC,QAAQ,QAAQ,QAAO;AAEvC,SAASC,IAAI,QAAQ,UAAS;AAC9B,OAAO,eAAc;AAErB,MAAMC,YAAY;AAMlB,OAAO,MAAMC,qBAAwD,CAAC,EAAEC,YAAY,EAAE;IACpF,MAAM,EAAEC,CAAC,EAAE,GAAGP;IAEd,IAAI,CAACM,gBAAgBA,aAAaE,MAAM,KAAK,GAAG;QAC9C,OAAO;IACT;IAEA,qBACE,KAACT;QACCU,sBACE,KAACC;YAAKC,cAAYJ,EAAE;YAAiBK,WAAW,GAAGR,UAAU,QAAQ,CAAC;sBACpE,cAAA,KAACD;gBAAKU,MAAK;gBAAWC,MAAM;;;QAGhCF,WAAWR;QACXW,iBAAgB;QAChBC,IAAG;QACHF,MAAK;QACLG,eAAc;kBAEbX,aAAaY,GAAG,CAAC,CAACC,MAAMC,kBACvB,KAAClB;0BAA0CiB;eAA5B,CAAC,mBAAmB,EAAEC,GAAG;;AAIhD,EAAC"}

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

@@ -0,0 +1,25 @@
+@import '~@payloadcms/ui/scss';
+
+@layer payload-default {
+  .settings-menu-button {
+    &__button {
+      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;
+
+      &:hover {
+        background: var(--theme-elevation-100);
+        color: var(--theme-text);
+      }
+    }
+
+  }
+}

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

@@ -7,6 +7,7 @@ export type SidebarContentProps = {
     groups: ExtendedGroup[];
     initialActiveTabId: string;
     navPreferences: NavPreferences | null;
+    settingsMenu?: React.ReactNode[];
     sidebarConfig: EnhancedSidebarConfig;
 };
 export declare const SidebarContent: React.FC<SidebarContentProps>;

package/dist/components/EnhancedSidebar/SidebarContent.js

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

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/EnhancedSidebar/SidebarContent.tsx"],"sourcesContent":["'use client'\nimport type { NavPreferences } from 'payload'\n\nimport { useTranslation } from '@payloadcms/ui'\nimport React, { useMemo, useState } from 'react'\n\nimport type {\n  EnhancedSidebarConfig,\n  ExtendedEntity,\n  ExtendedGroup,\n  SidebarTabContent as SidebarTabContentType,\n  SidebarTabItem,\n} from '../../types'\n\nimport { extractLocalizedValue } from '../../utils'\nimport { EnhancedSidebarClient } from './index.client'\nimport { SidebarWrapper } from './SidebarWrapper'\nimport { TabsBar } from './TabsBar'\n\nconst baseClass = 'enhanced-sidebar'\n\nexport type SidebarContentProps = {\n  afterNavLinks?: React.ReactNode\n  beforeNavLinks?: React.ReactNode\n  groups: ExtendedGroup[]\n  initialActiveTabId: string\n  navPreferences: NavPreferences | null\n  sidebarConfig: EnhancedSidebarConfig\n}\n\nconst COOKIE_KEY = 'payload-enhanced-sidebar-active-tab'\n\nconst setTabCookie = (tabId: string) => {\n  document.cookie = `${COOKIE_KEY}=${tabId}; path=/; max-age=31536000; SameSite=Lax`\n}\n\nexport const SidebarContent: React.FC<SidebarContentProps> = ({\n  afterNavLinks,\n  beforeNavLinks,\n  groups,\n  initialActiveTabId,\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\n  const [activeTabId, setActiveTabId] = useState(initialActiveTabId)\n\n  const handleTabChange = (tabId: string) => {\n    setActiveTabId(tabId)\n    setTabCookie(tabId)\n  }\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              isExternal: item.isExternal,\n              label: item.label,\n            } as ExtendedEntity)\n          } else {\n            // Create new group\n            result.push({\n              entities: [\n                {\n                  slug: item.slug,\n                  type: 'custom',\n                  href: item.href,\n                  isExternal: item.isExternal,\n                  label: item.label,\n                } as ExtendedEntity,\n              ],\n              label: item.group,\n            })\n          }\n        } else {\n          ungroupedItems.push(item)\n        }\n      }\n\n      // Add ungrouped items at the end\n      if (ungroupedItems.length > 0) {\n        result.push({\n          entities: ungroupedItems.map((item) => ({\n            slug: item.slug,\n            type: 'custom',\n            href: item.href,\n            isExternal: item.isExternal,\n            label: item.label,\n          })) as ExtendedEntity[],\n          label: '',\n        })\n      }\n    }\n\n    return result\n  }, [activeTab, groups, currentLang])\n\n  return (\n    <SidebarWrapper baseClass={baseClass}>\n      <TabsBar\n        activeTabId={activeTabId}\n        onTabChange={handleTabChange}\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","useMemo","useState","extractLocalizedValue","EnhancedSidebarClient","SidebarWrapper","TabsBar","baseClass","COOKIE_KEY","setTabCookie","tabId","document","cookie","SidebarContent","afterNavLinks","beforeNavLinks","groups","initialActiveTabId","navPreferences","sidebarConfig","i18n","currentLang","language","tabs","filter","t","type","activeTabId","setActiveTabId","handleTabChange","activeTab","find","tab","id","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","isExternal","onTabChange","nav","className","div"],"mappings":"AAAA;;AAGA,SAASA,cAAc,QAAQ,iBAAgB;AAC/C,OAAOC,SAASC,OAAO,EAAEC,QAAQ,QAAQ,QAAO;AAUhD,SAASC,qBAAqB,QAAQ,cAAa;AACnD,SAASC,qBAAqB,QAAQ,iBAAgB;AACtD,SAASC,cAAc,QAAQ,mBAAkB;AACjD,SAASC,OAAO,QAAQ,YAAW;AAEnC,MAAMC,YAAY;AAWlB,MAAMC,aAAa;AAEnB,MAAMC,eAAe,CAACC;IACpBC,SAASC,MAAM,GAAG,GAAGJ,WAAW,CAAC,EAAEE,MAAM,wCAAwC,CAAC;AACpF;AAEA,OAAO,MAAMG,iBAAgD,CAAC,EAC5DC,aAAa,EACbC,cAAc,EACdC,MAAM,EACNC,kBAAkB,EAClBC,cAAc,EACdC,aAAa,EACd;IACC,MAAM,EAAEC,IAAI,EAAE,GAAGrB;IACjB,MAAMsB,cAAcD,KAAKE,QAAQ;IAEjC,MAAMC,OAAOJ,cAAcI,IAAI,EAAEC,OAAO,CAACC,IAAkCA,EAAEC,IAAI,KAAK,UAAU,EAAE;IAElG,MAAM,CAACC,aAAaC,eAAe,GAAG1B,SAASe;IAE/C,MAAMY,kBAAkB,CAACnB;QACvBkB,eAAelB;QACfD,aAAaC;IACf;IAEA,MAAMoB,YAAYP,KAAKQ,IAAI,CAAC,CAACC,MAAQA,IAAIC,EAAE,KAAKN;IAEhD,kCAAkC;IAClC,MAAMO,iBAAiBjC,QAAQ;QAC7B,IAAI,CAAC6B,WAAW;YACd,OAAOd;QACT;QAEA,MAAM,EAAEmB,aAAaC,cAAc,EAAEC,WAAW,EAAEC,SAASC,UAAU,EAAE,GAAGT;QAE1E,uDAAuD;QACvD,MAAMU,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,SAAS3B,OAAO4B,GAAG,CAAC,CAACC,IAAO,CAAA;oBAAE,GAAGA,CAAC;oBAAEC,UAAU;2BAAID,EAAEC,QAAQ;qBAAC;gBAAC,CAAA;QAChE,OAAO,IAAIL,aAAaM,IAAI,GAAG,GAAG;YAChCJ,SAAS3B,OACN4B,GAAG,CAAC,CAACI,QAAW,CAAA;oBACf,GAAGA,KAAK;oBACRF,UAAUE,MAAMF,QAAQ,CAACtB,MAAM,CAAC,CAACyB,SAAWR,aAAaS,GAAG,CAACD,OAAOE,IAAI;gBAC1E,CAAA,GACC3B,MAAM,CAAC,CAACwB,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,EAAE3B;oBAEzD,oDAAoD;oBACpD,MAAMmC,gBAAgBb,OAAOZ,IAAI,CAAC,CAACc;wBACjC,MAAMY,aAAatD,sBAAsB0C,EAAEa,KAAK,EAAErC;wBAClD,OAAOoC,eAAeF;oBACxB;oBAEA,IAAIC,eAAe;wBACjBA,cAAcV,QAAQ,CAACa,IAAI,CAAC;4BAC1BR,MAAMG,KAAKH,IAAI;4BACfzB,MAAM;4BACNkC,MAAMN,KAAKM,IAAI;4BACfC,YAAYP,KAAKO,UAAU;4BAC3BH,OAAOJ,KAAKI,KAAK;wBACnB;oBACF,OAAO;wBACL,mBAAmB;wBACnBf,OAAOgB,IAAI,CAAC;4BACVb,UAAU;gCACR;oCACEK,MAAMG,KAAKH,IAAI;oCACfzB,MAAM;oCACNkC,MAAMN,KAAKM,IAAI;oCACfC,YAAYP,KAAKO,UAAU;oCAC3BH,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;4BACfzB,MAAM;4BACNkC,MAAMN,KAAKM,IAAI;4BACfC,YAAYP,KAAKO,UAAU;4BAC3BH,OAAOJ,KAAKI,KAAK;wBACnB,CAAA;oBACAA,OAAO;gBACT;YACF;QACF;QAEA,OAAOf;IACT,GAAG;QAACb;QAAWd;QAAQK;KAAY;IAEnC,qBACE,MAAChB;QAAeE,WAAWA;;0BACzB,KAACD;gBACCqB,aAAaA;gBACbmC,aAAajC;gBACbV,eAAeA;;0BAEjB,KAAC4C;gBAAIC,WAAW,GAAGzD,UAAU,SAAS,CAAC;0BACrC,cAAA,MAAC0D;oBAAID,WAAW,GAAGzD,UAAU,gBAAgB,CAAC;;wBAC3CQ;sCACD,KAACX;4BAAsBY,QAAQkB;4BAAgBhB,gBAAgBA;;wBAC9DJ;;;;;;AAKX,EAAC"}
+{"version":3,"sources":["../../../src/components/EnhancedSidebar/SidebarContent.tsx"],"sourcesContent":["'use client'\nimport type { NavPreferences } from 'payload'\n\nimport { useTranslation } from '@payloadcms/ui'\nimport React, { useCallback, useMemo, useState } from 'react'\n\nimport type {\n  EnhancedSidebarConfig,\n  ExtendedEntity,\n  ExtendedGroup,\n  SidebarTabContent as SidebarTabContentType,\n  SidebarTabItem,\n} from '../../types'\n\nimport { extractLocalizedValue } from '../../utils'\nimport { EnhancedSidebarClient } from './index.client'\nimport { SidebarWrapper } from './SidebarWrapper'\nimport { TabsBar } from './TabsBar'\n\nconst baseClass = 'enhanced-sidebar'\n\nexport type SidebarContentProps = {\n  afterNavLinks?: React.ReactNode\n  beforeNavLinks?: React.ReactNode\n  groups: ExtendedGroup[]\n  initialActiveTabId: string\n  navPreferences: NavPreferences | null\n  settingsMenu?: React.ReactNode[]\n  sidebarConfig: EnhancedSidebarConfig\n}\n\nconst COOKIE_KEY = 'payload-enhanced-sidebar-active-tab'\n\nconst setTabCookie = (tabId: string) => {\n  document.cookie = `${COOKIE_KEY}=${tabId}; path=/; max-age=31536000; SameSite=Lax`\n}\n\n/**\n * Computes filtered groups for a specific tab\n */\nconst computeGroupsForTab = (\n  tab: SidebarTabContentType,\n  groups: ExtendedGroup[],\n  currentLang: string,\n): ExtendedGroup[] => {\n  const { collections: tabCollections, customItems, globals: tabGlobals } = tab\n\n  // If no specific collections/globals defined, show all\n  const showAll = !tabCollections && !tabGlobals\n  const allowedSlugs = new Set([...(tabCollections ?? []), ...(tabGlobals ?? [])])\n\n  let result: ExtendedGroup[] = []\n\n  if (showAll) {\n    result = groups.map((g) => ({ ...g, entities: [...g.entities] }))\n  } else if (allowedSlugs.size > 0) {\n    result = groups\n      .map((group) => ({\n        ...group,\n        entities: group.entities.filter((entity) => allowedSlugs.has(entity.slug)),\n      }))\n      .filter((group) => group.entities.length > 0)\n  }\n\n  // Merge custom items into groups\n  if (customItems && customItems.length > 0) {\n    const ungroupedItems: SidebarTabItem[] = []\n\n    for (const item of customItems) {\n      if (item.group) {\n        // Get localized group name for comparison\n        const itemGroupLabel = extractLocalizedValue(item.group, currentLang)\n\n        // Find existing group by comparing localized labels\n        const existingGroup = result.find((g) => {\n          const groupLabel = extractLocalizedValue(g.label, currentLang)\n          return groupLabel === itemGroupLabel\n        })\n\n        if (existingGroup) {\n          existingGroup.entities.push({\n            slug: item.slug,\n            type: 'custom',\n            href: item.href,\n            isExternal: item.isExternal,\n            label: item.label,\n          } as ExtendedEntity)\n        } else {\n          // Create new group\n          result.push({\n            entities: [\n              {\n                slug: item.slug,\n                type: 'custom',\n                href: item.href,\n                isExternal: item.isExternal,\n                label: item.label,\n              } as ExtendedEntity,\n            ],\n            label: item.group,\n          })\n        }\n      } else {\n        ungroupedItems.push(item)\n      }\n    }\n\n    // Add ungrouped items at the end\n    if (ungroupedItems.length > 0) {\n      result.push({\n        entities: ungroupedItems.map((item) => ({\n          slug: item.slug,\n          type: 'custom',\n          href: item.href,\n          isExternal: item.isExternal,\n          label: item.label,\n        })) as ExtendedEntity[],\n        label: '',\n      })\n    }\n  }\n\n  return result\n}\n\nexport const SidebarContent: React.FC<SidebarContentProps> = ({\n  afterNavLinks,\n  beforeNavLinks,\n  groups,\n  initialActiveTabId,\n  navPreferences,\n  settingsMenu,\n  sidebarConfig,\n}) => {\n  const { i18n } = useTranslation()\n  const currentLang = i18n.language\n\n  const tabs = useMemo(\n    () => sidebarConfig.tabs?.filter((t): t is SidebarTabContentType => t.type === 'tab') ?? [],\n    [sidebarConfig.tabs],\n  )\n\n  const [activeTabId, setActiveTabId] = useState(initialActiveTabId)\n\n  const handleTabChange = useCallback((tabId: string) => {\n    setActiveTabId(tabId)\n    setTabCookie(tabId)\n  }, [])\n\n  // Build groups for all tabs at once to keep them mounted\n  const groupsPerTab = useMemo(() => {\n    const result: Record<string, ExtendedGroup[]> = {}\n    for (const tab of tabs) {\n      result[tab.id] = computeGroupsForTab(tab, groups, currentLang)\n    }\n    return result\n  }, [tabs, groups, currentLang])\n\n  // Fallback: if no tabs defined, show all groups\n  const hasTabs = tabs.length > 0\n\n  return (\n    <SidebarWrapper baseClass={baseClass}>\n      <TabsBar\n        activeTabId={activeTabId}\n        onTabChange={handleTabChange}\n        settingsMenu={settingsMenu}\n        sidebarConfig={sidebarConfig}\n      />\n      <nav className={`${baseClass}__content`}>\n        <div className={`${baseClass}__content-scroll`}>\n          {beforeNavLinks}\n          {hasTabs ? (\n            // Render all tabs but hide inactive ones to preserve NavGroup state\n            tabs.map((tab) => {\n              const isActive = activeTabId === tab.id\n              return (\n                <div\n                  aria-hidden={!isActive}\n                  key={tab.id}\n                  style={{ display: isActive ? undefined : 'none' }}\n                >\n                  <EnhancedSidebarClient\n                    badges={sidebarConfig.badges}\n                    groups={groupsPerTab[tab.id] ?? []}\n                    navPreferences={navPreferences}\n                  />\n                </div>\n              )\n            })\n          ) : (\n            // No tabs defined - show all groups\n            <EnhancedSidebarClient\n              badges={sidebarConfig.badges}\n              groups={groups}\n              navPreferences={navPreferences}\n            />\n          )}\n          {afterNavLinks}\n        </div>\n      </nav>\n    </SidebarWrapper>\n  )\n}\n"],"names":["useTranslation","React","useCallback","useMemo","useState","extractLocalizedValue","EnhancedSidebarClient","SidebarWrapper","TabsBar","baseClass","COOKIE_KEY","setTabCookie","tabId","document","cookie","computeGroupsForTab","tab","groups","currentLang","collections","tabCollections","customItems","globals","tabGlobals","showAll","allowedSlugs","Set","result","map","g","entities","size","group","filter","entity","has","slug","length","ungroupedItems","item","itemGroupLabel","existingGroup","find","groupLabel","label","push","type","href","isExternal","SidebarContent","afterNavLinks","beforeNavLinks","initialActiveTabId","navPreferences","settingsMenu","sidebarConfig","i18n","language","tabs","t","activeTabId","setActiveTabId","handleTabChange","groupsPerTab","id","hasTabs","onTabChange","nav","className","div","isActive","aria-hidden","style","display","undefined","badges"],"mappings":"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"}

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

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

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

@@ -0,0 +1,56 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { getTranslation } from '@payloadcms/translations';
+import { Link, useTranslation } from '@payloadcms/ui';
+import React from 'react';
+import { Badge } from '../Badge';
+import { useBadge } from '../hooks/useBadge';
+import { Icon } from '../Icon';
+const tabsBaseClass = 'tabs-bar';
+export const TabButton = ({ isActive, onTabChange, tab })=>{
+    const { i18n } = useTranslation();
+    const label = getTranslation(tab.label, i18n);
+    const { value } = useBadge(tab.badge, tab.id);
+    return /*#__PURE__*/ _jsxs("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
+            }),
+            value !== undefined && /*#__PURE__*/ _jsx(Badge, {
+                color: tab.badge?.color,
+                position: "absolute",
+                value: value
+            })
+        ]
+    });
+};
+export const TabLink = ({ href, isActive, link })=>{
+    const { i18n } = useTranslation();
+    const label = getTranslation(link.label, i18n);
+    const { value } = useBadge(link.badge, link.id);
+    return /*#__PURE__*/ _jsxs(Link, {
+        className: `${tabsBaseClass}__link ${isActive ? `${tabsBaseClass}__link--active` : ''}`,
+        href: href,
+        rel: link.isExternal ? 'noopener noreferrer' : undefined,
+        target: link.isExternal ? '_blank' : undefined,
+        title: label,
+        children: [
+            /*#__PURE__*/ _jsx(Icon, {
+                name: link.icon,
+                size: 20
+            }),
+            value !== undefined && /*#__PURE__*/ _jsx(Badge, {
+                color: link.badge?.color,
+                position: "absolute",
+                value: value
+            })
+        ]
+    });
+};
+
+//# sourceMappingURL=TabItem.js.map

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

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

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

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

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

@@ -6,51 +6,40 @@ import { usePathname } from 'next/navigation';
 import { formatAdminURL } from 'payload/shared';
 import React from 'react';
 import { Icon } from '../Icon';
+import { SettingsMenuButton } from '../SettingsMenuButton';
+import { TabButton, TabLink } from './TabItem';
 import './index.scss';
 const tabsBaseClass = 'tabs-bar';
-export const TabsBar = ({ activeTabId, onTabChange, sidebarConfig })=>{
+export const TabsBar = ({ activeTabId, onTabChange, settingsMenu, sidebarConfig })=>{
     const { i18n } = useTranslation();
     const pathname = usePathname();
-    const { config: { admin: { routes: { logout: logoutRoute } }, routes: { admin: adminRoute } } } = useConfig();
+    const { config: { admin: { routes: { browseByFolder: foldersRoute, logout: logoutRoute } }, folders, 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 = link.isExternal ? link.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,
-            target: link.isExternal ? '_blank' : undefined,
-            title: label,
-            children: /*#__PURE__*/ _jsx(Icon, {
-                name: link.icon,
-                size: 20
-            })
-        }, link.id);
-    };
+    const showFolders = folders && folders.browseByFolder;
+    const folderURL = formatAdminURL({
+        adminRoute,
+        path: foldersRoute
+    });
+    const isFoldersActive = pathname.startsWith(folderURL);
     const renderTabItem = (item)=>{
         if (item.type === 'tab') {
-            return renderTab(item);
+            return /*#__PURE__*/ _jsx(TabButton, {
+                isActive: activeTabId === item.id,
+                onTabChange: onTabChange,
+                tab: item
+            }, item.id);
         }
-        return renderLink(item);
+        // Check if link is active
+        const href = item.isExternal ? item.href : formatAdminURL({
+            adminRoute,
+            path: item.href
+        });
+        const isActive = pathname === href || item.href === '/' && pathname === adminRoute;
+        return /*#__PURE__*/ _jsx(TabLink, {
+            href: href,
+            isActive: isActive,
+            link: item
+        }, item.id);
     };
     const tabItems = sidebarConfig.tabs ?? [];
     return /*#__PURE__*/ _jsxs("div", {
@@ -60,24 +49,41 @@ export const TabsBar = ({ activeTabId, onTabChange, sidebarConfig })=>{
                 className: `${tabsBaseClass}__tabs`,
                 children: tabItems.map(renderTabItem)
             }),
-            showLogout && /*#__PURE__*/ _jsx("div", {
+            /*#__PURE__*/ _jsxs("div", {
                 className: `${tabsBaseClass}__actions`,
-                children: /*#__PURE__*/ _jsx(Link, {
-                    className: `${tabsBaseClass}__action`,
-                    href: formatAdminURL({
-                        adminRoute,
-                        path: logoutRoute
+                children: [
+                    showFolders && /*#__PURE__*/ _jsx(Link, {
+                        className: `${tabsBaseClass}__action ${isFoldersActive ? `${tabsBaseClass}__link--active` : ''}`,
+                        href: folderURL,
+                        title: getTranslation({
+                            en: 'Browse by Folder',
+                            uk: 'Переглянути по папках'
+                        }, i18n),
+                        children: /*#__PURE__*/ _jsx(Icon, {
+                            name: "Folder",
+                            size: 20
+                        })
+                    }),
+                    /*#__PURE__*/ _jsx(SettingsMenuButton, {
+                        settingsMenu: settingsMenu
                     }),
-                    title: getTranslation({
-                        en: 'Logout',
-                        uk: 'Вийти'
-                    }, i18n),
-                    type: "button",
-                    children: /*#__PURE__*/ _jsx(Icon, {
-                        name: "LogOut",
-                        size: 20
+                    showLogout && /*#__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
+                        })
                     })
-                })
+                ]
             })
         ]
     });