@djangocfg/layouts 2.1.356 → 2.1.357

package/src/layouts/{_components → PrivateLayout/components}/PrivateSidebarAccount.tsx

@@ -2,13 +2,17 @@
  * Sidebar account: rich footer trigger (avatar + name + plan + optional secondary
  * action) opens a popover (DropdownMenu) upward with email, account links, locale +
  * theme controls, and sign-out. Replaces the legacy inline collapsible.
+ *
+ * Reads `isAccountMenuOpen` / `setIsAccountMenuOpen` directly from
+ * PrivateLayoutContext so the parent sidebar can block collapse while the menu
+ * is open.
  */
 
 'use client';
 
 import { ChevronRight, ChevronsUpDown, Globe, LogOut, Monitor, Moon, Sun } from 'lucide-react';
 import { Link } from '@djangocfg/ui-core/components';
-import React from 'react';
+import React, { memo, useMemo } from 'react';
 
 import { useAuth } from '@djangocfg/api/auth';
 import { useAppT } from '@djangocfg/i18n';
@@ -28,13 +32,15 @@ import { cn, isDev } from '@djangocfg/ui-core/lib';
 import { useSidebar } from '@djangocfg/ui-core/components';
 import { useThemeContext } from '@djangocfg/ui-nextjs/theme';
 
-import { useLogout } from '../../hooks';
-import { LocaleSwitcherDialog } from './locale-switcher';
-import { getLocaleMeta } from './locale-switcher/localeMeta';
-import { useLayoutI18nOptional } from '../AppLayout/LayoutI18nProvider';
-import { LucideIcon as LucideIconRender } from '../../components';
+import { useLogout } from '../../../hooks';
+import { LocaleSwitcherDialog } from '../../_components/locale-switcher';
+import { getLocaleMeta } from '../../_components/locale-switcher/localeMeta';
+import { useLayoutI18nOptional } from '../../AppLayout/LayoutI18nProvider';
+import { LucideIcon as LucideIconRender } from '../../../components';
+import { useShellVisualState } from '../hooks';
+import { blockSidebarCollapse, allowSidebarCollapse } from '../hooks/useHoverExpand';
 
-import type { HeaderConfig } from '../PrivateLayout/PrivateLayout';
+import type { HeaderConfig } from '../types';
 
 interface PrivateSidebarAccountProps {
   header?: HeaderConfig;
@@ -48,15 +54,16 @@ interface AccountView {
   plan: string | null;
 }
 
-export function PrivateSidebarAccount({ header }: PrivateSidebarAccountProps) {
+function PrivateSidebarAccountRaw({ header }: PrivateSidebarAccountProps) {
   const { user } = useAuth();
   const handleLogout = useLogout();
   const t = useAppT();
   const layoutI18n = useLayoutI18nOptional();
-  const { state, setOpen: setSidebarOpen } = useSidebar();
+  const { setOpen: setSidebarOpen } = useSidebar();
+  const { content } = useShellVisualState();
+  const [isAccountMenuOpen, setIsAccountMenuOpen] = React.useState(false);
   const { theme, setTheme } = useThemeContext();
   const [langDialogOpen, setLangDialogOpen] = React.useState(false);
-  const narrow = state === 'collapsed';
 
   const signOutLabel = t('layouts.profile.signOut');
 
@@ -91,8 +98,8 @@ export function PrivateSidebarAccount({ header }: PrivateSidebarAccountProps) {
   }, [user, header?.userPlan]);
 
   const onTriggerInteract = React.useCallback(() => {
-    if (narrow) setSidebarOpen(true);
-  }, [narrow, setSidebarOpen]);
+    if (content.isAccountCompact) setSidebarOpen(true);
+  }, [content.isAccountCompact, setSidebarOpen]);
 
   const onSecondaryExpand = React.useCallback(() => {
     setSidebarOpen(true);
@@ -130,18 +137,18 @@ export function PrivateSidebarAccount({ header }: PrivateSidebarAccountProps) {
   const triggerClassName = cn(
     'group h-auto w-full gap-3 rounded-none px-3 py-3 text-left',
     'hover:bg-sidebar-accent/70 hover:text-sidebar-accent-foreground',
-    narrow ? 'justify-center px-0 py-2' : 'min-h-[52px]',
+    content.isAccountCompact ? 'justify-center px-0 py-2' : 'min-h-[52px]',
   );
 
-  const secondaryButton = secondary && !narrow ? (
+  const secondaryButton = secondary && !content.isAccountCompact ? (
     <SecondaryAction action={secondary} onParentExpand={onSecondaryExpand} />
   ) : null;
 
   const dropdownContentClass = cn(
     'p-1.5',
-    narrow ? 'min-w-60' : 'w-[var(--radix-dropdown-menu-trigger-width)] min-w-60',
+    content.isAccountCompact ? 'min-w-60' : 'w-[var(--radix-dropdown-menu-trigger-width)] min-w-60',
   );
-  const dropdownSide: 'top' | 'right' = narrow ? 'right' : 'top';
+  const dropdownSide: 'top' | 'right' = content.isAccountCompact ? 'right' : 'top';
   const avatarClass = cn(
     'h-9 w-9 shrink-0 border border-transparent transition-colors',
     'group-hover:border-sidebar-border/70',
@@ -209,7 +216,7 @@ export function PrivateSidebarAccount({ header }: PrivateSidebarAccountProps) {
     </DropdownMenuItem>
   );
 
-  const expandedMeta = narrow ? null : (
+  const expandedMeta = content.isAccountCompact ? null : (
     <>
       <span className="flex min-w-0 flex-1 flex-col text-left">
         <span className="truncate text-sm font-medium leading-tight text-sidebar-foreground">
@@ -230,12 +237,19 @@ export function PrivateSidebarAccount({ header }: PrivateSidebarAccountProps) {
 
   return (
     <div className="w-full min-w-0 border-t border-sidebar-border/40">
-      <DropdownMenu>
+      <DropdownMenu
+        open={isAccountMenuOpen}
+        onOpenChange={(open) => {
+          setIsAccountMenuOpen(open);
+          if (open) blockSidebarCollapse();
+          else allowSidebarCollapse();
+        }}
+      >
         <DropdownMenuTrigger asChild>
           <Button
             type="button"
             variant="ghost"
-            aria-label={narrow ? account.displayName : undefined}
+            aria-label={content.isAccountCompact ? account.displayName : undefined}
             className={triggerClassName}
             onClick={onTriggerInteract}
           >
@@ -286,6 +300,13 @@ export function PrivateSidebarAccount({ header }: PrivateSidebarAccountProps) {
   );
 }
 
+/**
+ * Memoised account footer. Re-renders only when the `header` prop reference
+ * changes. Internal reactive data (user from useAuth, theme, locale) are
+ * consumed via hooks and still update independently.
+ */
+export const PrivateSidebarAccount = memo(PrivateSidebarAccountRaw);
+
 interface SecondaryActionProps {
   action: NonNullable<HeaderConfig['footerSecondaryAction']>;
   onParentExpand: () => void;

package/src/layouts/PrivateLayout/components/SidebarBrand.tsx

@@ -0,0 +1,165 @@
+/**
+ * Sidebar Brand Component
+ *
+ * Renders the sidebar header with brand mark + title.
+ * Three modes: expanded (desktop), collapsed rail (desktop), mobile drawer.
+ */
+
+'use client';
+
+import React, { memo, useMemo } from 'react';
+
+import { Link, SidebarHeader, SidebarTrigger } from '@djangocfg/ui-core/components';
+import { cn } from '@djangocfg/ui-core/lib';
+
+import { LucideIcon } from '../../../components';
+import { usePrivateLayoutContext } from '../context';
+import { useShellVisualState } from '../hooks';
+
+function SidebarBrandRaw() {
+  const { header, homeHref, brandTitle, brandMonogram, isMobile } =
+    usePrivateLayoutContext();
+  const { content } = useShellVisualState();
+
+  const brandMark = useMemo(
+    () =>
+      header?.brandIcon ? (
+        <LucideIcon
+          icon={header.brandIcon}
+          className="h-4 w-4 text-sidebar-primary-foreground"
+        />
+      ) : (
+        <span className="text-[11px] font-bold leading-none tracking-tight text-sidebar-primary-foreground">
+          {brandMonogram}
+        </span>
+      ),
+    [header?.brandIcon, brandMonogram],
+  );
+
+  const customBrand = header?.brand;
+
+  const headerRowClass = useMemo(
+    () =>
+      cn(
+        'flex items-center gap-2',
+        content.showLabels ? 'px-2' : 'px-1.5',
+      ),
+    [content.showLabels],
+  );
+
+  const expandedHeader = useMemo(
+    () => (
+      <div className={headerRowClass}>
+        <div className="min-w-0 flex-1">
+          {customBrand != null && customBrand !== false ? (
+            typeof customBrand === 'string' ? (
+              <Link
+                href={homeHref}
+                className="flex min-w-0 items-center gap-2 rounded-md py-0.5 outline-none ring-sidebar-ring focus-visible:ring-2"
+              >
+                <span className="truncate text-sm font-semibold tracking-tight text-sidebar-foreground">
+                  {customBrand}
+                </span>
+              </Link>
+            ) : (
+              customBrand
+            )
+          ) : (
+            <Link
+              href={homeHref}
+              className="flex min-w-0 items-center gap-2 rounded-md py-0.5 outline-none ring-sidebar-ring focus-visible:ring-2"
+            >
+              <div className="flex h-7 w-7 shrink-0 items-center justify-center rounded-md bg-sidebar-primary">
+                {brandMark}
+              </div>
+              <span className="truncate text-sm font-semibold tracking-tight text-sidebar-foreground">
+                {brandTitle}
+              </span>
+            </Link>
+          )}
+        </div>
+        {!isMobile && <SidebarTrigger className="shrink-0" aria-label="Collapse sidebar" />}
+      </div>
+    ),
+    [headerRowClass, customBrand, homeHref, brandMark, brandTitle, isMobile],
+  );
+
+  const collapsedHeader = useMemo(
+    () => (
+      <div className="flex justify-center py-1">
+        <Link
+          href={homeHref}
+          className="flex h-7 w-7 items-center justify-center rounded-md bg-sidebar-primary outline-none ring-sidebar-ring focus-visible:ring-2"
+          aria-label={brandTitle}
+        >
+          {brandMark}
+        </Link>
+      </div>
+    ),
+    [homeHref, brandTitle, brandMark],
+  );
+
+  /** Mobile drawer: menu open/close only from the main column trigger — no duplicate toggle in the sheet. */
+  const mobileHeader = useMemo(
+    () => (
+      <div className="flex items-center gap-3">
+        <div className="min-w-0 flex-1">
+          {customBrand != null && customBrand !== false ? (
+            typeof customBrand === 'string' ? (
+              <Link
+                href={homeHref}
+                className="flex min-w-0 items-center gap-3 rounded-md py-1 outline-none ring-sidebar-ring focus-visible:ring-2"
+              >
+                <span className="truncate text-sm font-semibold tracking-tight text-sidebar-foreground">
+                  {customBrand}
+                </span>
+              </Link>
+            ) : (
+              customBrand
+            )
+          ) : (
+            <Link
+              href={homeHref}
+              className="flex min-w-0 items-center gap-3 rounded-md py-1 outline-none ring-sidebar-ring focus-visible:ring-2"
+            >
+              <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-md bg-sidebar-primary">
+                {brandMark}
+              </div>
+              <span className="truncate text-sm font-semibold tracking-tight text-sidebar-foreground">
+                {brandTitle}
+              </span>
+            </Link>
+          )}
+        </div>
+      </div>
+    ),
+    [customBrand, homeHref, brandMark, brandTitle],
+  );
+
+  const sidebarHeaderContent = isMobile
+    ? mobileHeader
+    : content.showLabels
+      ? expandedHeader
+      : collapsedHeader;
+
+  const sidebarHeaderClass = useMemo(
+    () =>
+      cn(
+        'pb-2',
+        isMobile
+          ? 'px-4 pb-3 pt-[max(1.25rem,env(safe-area-inset-top,0px))]'
+          : 'px-2 pt-3.5',
+      ),
+    [isMobile],
+  );
+
+  return <SidebarHeader className={sidebarHeaderClass}>{sidebarHeaderContent}</SidebarHeader>;
+}
+
+/**
+ * Memoised brand header. Re-renders only when context values change
+ * (header config, brand title, mobile state, showLabels). The three
+ * visual modes (expanded / collapsed rail / mobile) are pre-built with
+ * useMemo so the JSX tree is stable across renders.
+ */
+export const SidebarBrand = memo(SidebarBrandRaw);

package/src/layouts/{_components → PrivateLayout/components}/SidebarFeatured.tsx

@@ -11,9 +11,9 @@ import React from 'react';
 
 import { cn } from '@djangocfg/ui-core/lib';
 
-import { LucideIcon } from '../../components';
+import { LucideIcon } from '../../../components';
 
-import type { SidebarFeaturedConfig } from '../PrivateLayout/PrivateLayout';
+import type { SidebarFeaturedConfig } from '../types';
 
 const ACCENT_CLASS: Record<NonNullable<SidebarFeaturedConfig['accent']>, string> = {
   green: 'bg-emerald-500/10 text-emerald-700 hover:bg-emerald-500/15 dark:text-emerald-300 dark:bg-emerald-400/10 dark:hover:bg-emerald-400/15',

package/src/layouts/PrivateLayout/components/SidebarNavGroup.tsx

@@ -0,0 +1,189 @@
+/**
+ * Sidebar Nav Group Component
+ *
+ * Renders a group of nav items as either a flat list or collapsible accordion.
+ */
+
+'use client';
+
+import React, { useMemo, useState, useEffect, useCallback, memo } from 'react';
+
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarMenu,
+} from '@djangocfg/ui-core/components';
+import { ChevronDown } from 'lucide-react';
+import { cn } from '@djangocfg/ui-core/lib';
+
+import { LucideIcon } from '../../../components';
+import { usePrivateLayoutContext } from '../context';
+import { useShellVisualState } from '../hooks';
+import type { SidebarGroupConfig } from '../types';
+import { SidebarNavItem } from './SidebarNavItem';
+
+interface SidebarNavGroupProps {
+  group: SidebarGroupConfig;
+}
+
+function SidebarNavGroupRaw({ group }: SidebarNavGroupProps) {
+  const { isActive, menuNav, groupLabelStyle } = usePrivateLayoutContext();
+  const { content } = useShellVisualState();
+
+  const hasLabel = Boolean(group.label && group.label.trim().length > 0);
+  const isCollapsible = Boolean(group.collapsible) && hasLabel && content.showLabels;
+  const hideItemIcons = group.hideItemIcons ?? isCollapsible;
+
+  const hasActiveChild = useMemo(
+    () => group.items.some((item) => isActive(item.href)),
+    [group.items, isActive],
+  );
+
+  const [open, setOpen] = useState<boolean>(
+    isCollapsible ? Boolean(group.defaultOpen) || hasActiveChild : true,
+  );
+
+  useEffect(() => {
+    if (isCollapsible && hasActiveChild) setOpen(true);
+  }, [isCollapsible, hasActiveChild]);
+
+  const items = useMemo(
+    () =>
+      group.items.map((item) => (
+        <SidebarNavItem key={item.href} item={item} hideItemIcons={hideItemIcons} />
+      )),
+    [group.items, hideItemIcons],
+  );
+
+  const groupLabelUppercaseClass = useMemo(
+    () => cn('px-2', menuNav.label),
+    [menuNav.label],
+  );
+  const groupLabelPlainClass = useMemo(
+    () =>
+      cn(
+        'px-2 text-sm font-semibold text-sidebar-foreground',
+        'h-7 leading-none',
+      ),
+    [],
+  );
+
+  const labelClass = useMemo(
+    () =>
+      cn(
+        isCollapsible || groupLabelStyle === 'plain'
+          ? groupLabelPlainClass
+          : groupLabelUppercaseClass,
+        content.showGroupLabels && '!mt-0 !opacity-100 !pointer-events-auto !flex !h-auto',
+      ),
+    [isCollapsible, groupLabelStyle, groupLabelPlainClass, groupLabelUppercaseClass, content.showGroupLabels],
+  );
+
+  const sidebarGroupClass = useMemo(
+    () => cn('gap-0', menuNav.groupPad),
+    [menuNav.groupPad],
+  );
+
+  const handleOpenChange = useCallback((value: boolean) => {
+    setOpen(value);
+  }, []);
+
+  if (isCollapsible) {
+    const triggerIcon = group.icon ? (
+      <LucideIcon
+        icon={group.icon}
+        className={cn(menuNav.iconClass, 'shrink-0 text-sidebar-foreground/70')}
+      />
+    ) : null;
+
+    return (
+      <SidebarGroup className={sidebarGroupClass}>
+        <Collapsible open={open} onOpenChange={handleOpenChange} className="w-full">
+          <CollapsibleTrigger asChild>
+            <button
+              type="button"
+              className={cn(
+                'group/trig flex w-full items-center gap-2 rounded-md px-2 py-1.5',
+                'text-sm font-semibold text-sidebar-foreground',
+                'transition-colors hover:bg-sidebar-accent/40',
+                'data-[no-expand]',
+              )}
+              aria-expanded={open}
+              data-no-expand
+            >
+              {triggerIcon}
+              <span className="flex-1 truncate text-left">{group.label}</span>
+              <ChevronDown
+                className={cn(
+                  'h-4 w-4 shrink-0 text-sidebar-foreground/55 transition-transform duration-200',
+                  open && 'rotate-180',
+                )}
+                aria-hidden
+              />
+            </button>
+          </CollapsibleTrigger>
+          <CollapsibleContent className="overflow-hidden data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down">
+            <SidebarGroupContent>
+              <SidebarMenu className={cn(menuNav.menu, 'mt-1')}>
+                {items}
+              </SidebarMenu>
+            </SidebarGroupContent>
+          </CollapsibleContent>
+        </Collapsible>
+      </SidebarGroup>
+    );
+  }
+
+  return (
+    <SidebarGroup className={sidebarGroupClass}>
+      {hasLabel ? (
+        <SidebarGroupLabel className={labelClass}>{group.label}</SidebarGroupLabel>
+      ) : null}
+      <SidebarGroupContent className="mt-1">
+        <SidebarMenu className={menuNav.menu}>{items}</SidebarMenu>
+      </SidebarGroupContent>
+    </SidebarGroup>
+  );
+}
+
+/**
+ * Shallow equality for SidebarGroupConfig — compares all scalar fields and
+ * deep-shallow-compares the `items` array. This lets badge counts and
+ * dynamic group visibility update, while skipping re-renders caused by
+ * parent reference churn.
+ */
+function groupShallowEqual(a: SidebarGroupConfig, b: SidebarGroupConfig): boolean {
+  return (
+    a.label === b.label &&
+    a.collapsible === b.collapsible &&
+    a.defaultOpen === b.defaultOpen &&
+    a.icon === b.icon &&
+    a.hideItemIcons === b.hideItemIcons &&
+    a.dynamic === b.dynamic &&
+    a.items.length === b.items.length &&
+    a.items.every((ai, i) => {
+      const bi = b.items[i];
+      return (
+        ai.href === bi.href &&
+        ai.label === bi.label &&
+        ai.icon === bi.icon &&
+        ai.badge === bi.badge &&
+        ai.badgeVariant === bi.badgeVariant &&
+        ai.tooltip === bi.tooltip
+      );
+    })
+  );
+}
+
+/**
+ * Memoised group wrapper. Re-renders only when the `group` prop changes
+ * (label, items, badges, etc.). Same data from a new parent object is
+ * ignored thanks to `groupShallowEqual`.
+ */
+export const SidebarNavGroup = memo(SidebarNavGroupRaw, (prev, next) => {
+  return groupShallowEqual(prev.group, next.group);
+});

package/src/layouts/PrivateLayout/components/SidebarNavItem.tsx

@@ -0,0 +1,137 @@
+/**
+ * Sidebar Nav Item Component
+ *
+ * Individual navigation item with icon, label, badge, and active state.
+ * Memoized with shallow item comparison so badge number changes still re-render.
+ */
+
+'use client';
+
+import React, { memo, useMemo } from 'react';
+
+import {
+  Link,
+  SidebarMenuBadge,
+  SidebarMenuButton,
+  SidebarMenuItem,
+} from '@djangocfg/ui-core/components';
+import { cn } from '@djangocfg/ui-core/lib';
+
+import { LucideIcon } from '../../../components';
+import { usePrivateLayoutContext } from '../context';
+import { useShellVisualState } from '../hooks';
+import type { SidebarItem } from '../types';
+
+interface SidebarNavItemProps {
+  item: SidebarItem;
+  hideItemIcons?: boolean;
+}
+
+function SidebarNavItemRaw({ item, hideItemIcons }: SidebarNavItemProps) {
+  const { isActive, menuNav } = usePrivateLayoutContext();
+  const { content } = useShellVisualState();
+
+  const tooltipText = item.tooltip ?? item.label;
+
+  const itemIcon = useMemo(
+    () =>
+      !hideItemIcons && item.icon ? (
+        <LucideIcon icon={item.icon} className={menuNav.iconClass} />
+      ) : null,
+    [hideItemIcons, item.icon, menuNav.iconClass],
+  );
+
+  const hasBadge = Boolean(item.badge);
+
+  const collapsedBadgeDot = useMemo(
+    () =>
+      !content.showBadgeText && hasBadge ? (
+        <span className="absolute right-1 top-1 flex h-2 w-2">
+          <span className="inline-flex h-full w-full rounded-full bg-primary" />
+        </span>
+      ) : null,
+    [content.showBadgeText, hasBadge],
+  );
+
+  const expandedBadgeNode = useMemo(
+    () =>
+      content.showBadgeText && hasBadge ? (
+        <SidebarMenuBadge
+          className={cn(
+            item.badgeVariant === 'pill'
+              ? 'bg-primary/15 text-primary px-1.5 rounded-md font-medium'
+              : undefined,
+          )}
+        >
+          {item.badge}
+        </SidebarMenuBadge>
+      ) : null,
+    [content.showBadgeText, hasBadge, item.badgeVariant, item.badge],
+  );
+
+  const isItemActive = isActive(item.href);
+
+  const buttonClass = useMemo(
+    () =>
+      cn(
+        'group/nav relative border-0 font-medium shadow-none transition-colors',
+        'text-sidebar-foreground/80',
+        'data-[active=true]:font-semibold data-[active=true]:text-sidebar-accent-foreground',
+        'hover:bg-sidebar-accent/70 hover:text-sidebar-accent-foreground',
+        '[&>svg]:shrink-0 [&>svg]:text-sidebar-foreground/70 [&>svg]:opacity-85',
+        '[&>svg]:transition-transform [&>svg]:duration-200 group-hover/nav:[&>svg]:scale-110 group-active/nav:[&>svg]:scale-95',
+        'data-[active=true]:[&>svg]:text-sidebar-accent-foreground data-[active=true]:[&>svg]:opacity-100',
+        hideItemIcons && 'pl-8',
+        content.showLabels && '[&>span]:!inline !p-2 !justify-start',
+      ),
+    [hideItemIcons, content.showLabels],
+  );
+
+  return (
+    <SidebarMenuItem>
+      <SidebarMenuButton
+        asChild
+        isActive={isItemActive}
+        size={menuNav.buttonSize}
+        tooltip={content.showTooltips ? tooltipText : undefined}
+        className={buttonClass}
+      >
+        <Link href={item.href}>
+          {itemIcon}
+          <span>{item.label}</span>
+          {expandedBadgeNode}
+        </Link>
+      </SidebarMenuButton>
+      {collapsedBadgeDot}
+    </SidebarMenuItem>
+  );
+}
+
+/**
+ * Shallow equality for SidebarItem — compares primitive fields so that
+ * badge number changes (e.g. 3 → 5) still trigger a re-render, but
+ * object-reference churn from parent re-renders is ignored.
+ */
+function itemShallowEqual(a: SidebarItem, b: SidebarItem): boolean {
+  return (
+    a.href === b.href &&
+    a.label === b.label &&
+    a.icon === b.icon &&
+    a.badge === b.badge &&
+    a.badgeVariant === b.badgeVariant &&
+    a.tooltip === b.tooltip
+  );
+}
+
+/**
+ * Memoised leaf component. Re-renders only when:
+ * - `hideItemIcons` changes, or
+ * - any field inside `item` changes (badge count, label, href, etc.).
+ * Parent re-renders with the same item data are skipped.
+ */
+export const SidebarNavItem = memo(SidebarNavItemRaw, (prev, next) => {
+  return (
+    prev.hideItemIcons === next.hideItemIcons &&
+    itemShallowEqual(prev.item, next.item)
+  );
+});