@djangocfg/layouts 2.1.356 → 2.1.358

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

@@ -1,14 +1,19 @@
 /**
  * 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.
+ * action) opens a popover (DropdownMenu) upward with email, account links, and
+ * sign-out. Language and theme controls live inside ProfileLayout / PreferencesSection
+ * so they are not duplicated here.
+ *
+ * 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 { ChevronsUpDown, LogOut } 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';
@@ -26,15 +31,15 @@ import {
 } from '@djangocfg/ui-core/components';
 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 { useLayoutI18nOptional } from '../../AppLayout/LayoutI18nProvider';
+import { LucideIcon as LucideIconRender } from '../../../components';
+import { useShellVisualState } from '../hooks';
+import { blockSidebarCollapse, allowSidebarCollapse } from '../hooks/useHoverExpand';
+import { useProfileDialogStore } from '../../ProfileLayout/ProfileDialog/store';
 
-import type { HeaderConfig } from '../PrivateLayout/PrivateLayout';
+import type { HeaderConfig } from '../types';
 
 interface PrivateSidebarAccountProps {
   header?: HeaderConfig;
@@ -48,15 +53,14 @@ 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 { theme, setTheme } = useThemeContext();
-  const [langDialogOpen, setLangDialogOpen] = React.useState(false);
-  const narrow = state === 'collapsed';
+  const { setOpen: setSidebarOpen } = useSidebar();
+  const { content } = useShellVisualState();
+  const [isAccountMenuOpen, setIsAccountMenuOpen] = React.useState(false);
 
   const signOutLabel = t('layouts.profile.signOut');
 
@@ -91,8 +95,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);
@@ -103,21 +107,6 @@ export function PrivateSidebarAccount({ header }: PrivateSidebarAccountProps) {
     handleLogout();
   }, [handleLogout]);
 
-  const onLanguageSelect = React.useCallback((e: Event) => {
-    // Keep the dropdown closed (default behaviour) but defer dialog mount to
-    // the next tick so Radix has time to unmount the dropdown overlay first
-    // (avoids the "two open overlays steal focus" bug).
-    e.preventDefault();
-    setTimeout(() => setLangDialogOpen(true), 0);
-  }, []);
-
-  const onThemeSelect = React.useCallback((e: Event) => {
-    e.preventDefault();
-    // Cycle: light → dark → system → light
-    const next = theme === 'light' ? 'dark' : theme === 'dark' ? 'system' : 'light';
-    setTheme(next);
-  }, [theme, setTheme]);
-
   // Hide entirely in production when there's no user (auth still loading or
   // /me failed and the parent guard hasn't redirected yet). In dev keep a
   // placeholder so the footer + Log out are reachable for debugging.
@@ -128,20 +117,20 @@ export function PrivateSidebarAccount({ header }: PrivateSidebarAccountProps) {
   const secondary = header?.footerSecondaryAction;
 
   const triggerClassName = cn(
-    'group h-auto w-full gap-3 rounded-none px-3 py-3 text-left',
+    'group h-auto w-full gap-3 rounded-lg 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',
@@ -175,41 +164,7 @@ export function PrivateSidebarAccount({ header }: PrivateSidebarAccountProps) {
     </>
   ) : null;
 
-  const currentLocaleLabel = layoutI18n
-    ? getLocaleMeta(layoutI18n.locale).native
-    : null;
-  const languageItem = layoutI18n ? (
-    <DropdownMenuItem
-      onSelect={onLanguageSelect}
-      className="flex items-center gap-2 rounded-md px-2 py-1.5 text-sm"
-    >
-      <Globe className="h-4 w-4 shrink-0 text-muted-foreground" />
-      <span className="flex-1 truncate">Language</span>
-      <span className="ml-auto flex shrink-0 items-center gap-1 text-xs text-muted-foreground">
-        {currentLocaleLabel}
-        <ChevronRight className="h-3.5 w-3.5" aria-hidden />
-      </span>
-    </DropdownMenuItem>
-  ) : null;
-
-  const themeIcon = theme === 'dark'
-    ? <Moon className="h-4 w-4 shrink-0 text-muted-foreground" />
-    : theme === 'light'
-      ? <Sun className="h-4 w-4 shrink-0 text-muted-foreground" />
-      : <Monitor className="h-4 w-4 shrink-0 text-muted-foreground" />;
-  const themeValueLabel = theme === 'dark' ? 'Dark' : theme === 'light' ? 'Light' : 'System';
-  const themeItem = (
-    <DropdownMenuItem
-      onSelect={onThemeSelect}
-      className="flex items-center gap-2 rounded-md px-2 py-1.5 text-sm"
-    >
-      {themeIcon}
-      <span className="flex-1 truncate">Theme</span>
-      <span className="ml-auto shrink-0 text-xs text-muted-foreground">{themeValueLabel}</span>
-    </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">
@@ -223,28 +178,59 @@ export function PrivateSidebarAccount({ header }: PrivateSidebarAccountProps) {
       </span>
       <span className="flex shrink-0 items-center gap-1.5">
         {secondaryButton}
-        <ChevronsUpDown className="h-3.5 w-3.5 text-sidebar-foreground/55" aria-hidden />
+        {header?.accountAction !== 'dialog' ? (
+          <ChevronsUpDown className="h-3.5 w-3.5 text-sidebar-foreground/55" aria-hidden />
+        ) : null}
       </span>
     </>
   );
 
+  const openProfileDialog = React.useCallback(() => {
+    useProfileDialogStore.getState().open();
+  }, []);
+
+  const triggerButton = (
+    <Button
+      type="button"
+      variant="ghost"
+      aria-label={content.isAccountCompact ? account.displayName : undefined}
+      className={triggerClassName}
+      onClick={header?.accountAction === 'dialog' ? openProfileDialog : onTriggerInteract}
+    >
+      <Avatar className={avatarClass}>
+        <AvatarImage src={account.avatarUrl} alt={account.displayName} />
+        <AvatarFallback className="text-sm font-semibold">{userInitial}</AvatarFallback>
+      </Avatar>
+      {expandedMeta}
+    </Button>
+  );
+
+  const wrapperClass = cn(
+    'w-full min-w-0',
+    content.isAccountCompact ? 'px-0 pb-0' : 'px-2 pb-2',
+  );
+
+  // Dialog mode: simple button that opens the global ProfileDialog
+  if (header?.accountAction === 'dialog') {
+    return (
+      <div className={wrapperClass}>
+        {triggerButton}
+      </div>
+    );
+  }
+
   return (
-    <div className="w-full min-w-0 border-t border-sidebar-border/40">
-      <DropdownMenu>
+    <div className={wrapperClass}>
+      <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}
-            className={triggerClassName}
-            onClick={onTriggerInteract}
-          >
-            <Avatar className={avatarClass}>
-              <AvatarImage src={account.avatarUrl} alt={account.displayName} />
-              <AvatarFallback className="text-sm font-semibold">{userInitial}</AvatarFallback>
-            </Avatar>
-            {expandedMeta}
-          </Button>
+          {triggerButton}
         </DropdownMenuTrigger>
 
         <DropdownMenuContent
@@ -256,10 +242,6 @@ export function PrivateSidebarAccount({ header }: PrivateSidebarAccountProps) {
           {headerLabel}
           {accountLinksBlock}
 
-          <DropdownMenuSeparator />
-          {languageItem}
-          {themeItem}
-
           <DropdownMenuSeparator />
           <DropdownMenuItem
             onSelect={onLogoutSelect}
@@ -270,22 +252,17 @@ export function PrivateSidebarAccount({ header }: PrivateSidebarAccountProps) {
           </DropdownMenuItem>
         </DropdownMenuContent>
       </DropdownMenu>
-
-      {layoutI18n ? (
-        <LocaleSwitcherDialog
-          open={langDialogOpen}
-          onOpenChange={setLangDialogOpen}
-          locale={layoutI18n.locale}
-          locales={layoutI18n.locales}
-          onChange={layoutI18n.onLocaleChange}
-          brand={layoutI18n.brand}
-          i18nLabels={layoutI18n.dialogLabels}
-        />
-      ) : null}
     </div>
   );
 }
 
+/**
+ * Memoised account footer. Re-renders only when the `header` prop reference
+ * changes. Internal reactive data (user from useAuth, 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,168 @@
+/**
+ * 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, isHoverExpanded } =
+    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 mb-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
+          ? 'pb-3 pt-[max(1.25rem,env(safe-area-inset-top,0px))]'
+          : 'pt-3.5',
+        // Hover-expanded overlay: SidebarHeader from ui-core forces paddingLeft/Right to 0
+        // when state is collapsed. Override it so content has breathing room.
+        !isMobile && isHoverExpanded && '!px-2',
+      ),
+    [isMobile, isHoverExpanded],
+  );
+
+  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);
+});