@djangocfg/layouts 2.1.591 → 2.1.592

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

@@ -0,0 +1,45 @@
+/**
+ * The sidebar's content: brand header, scrollable nav, account footer.
+ * Rendered by the docked sidebar, the peek panel and the mobile drawer alike.
+ */
+
+'use client';
+
+import React, { useMemo } from 'react';
+
+import { usePrivateLayoutContext } from '../context';
+import { PrivateSidebarAccount } from './PrivateSidebarAccount';
+import { SidebarBrand } from './SidebarBrand';
+import { SidebarNavGroup } from './SidebarNavGroup';
+import { SidebarSlots } from './SidebarSlots';
+
+export function SidebarBody() {
+  const { sidebar, header } = usePrivateLayoutContext();
+
+  const groups = useMemo(
+    () =>
+      (sidebar?.groups ?? []).map((group) =>
+        group.dynamic && group.items.length === 0 ? null : (
+          <SidebarNavGroup
+            key={group.label || `__flat_${group.items.map((i) => i.href).join('|')}`}
+            group={group}
+          />
+        ),
+      ),
+    [sidebar?.groups],
+  );
+
+  return (
+    <>
+      <SidebarBrand />
+      <div
+        data-sidebar="content"
+        className="flex min-h-0 flex-1 flex-col gap-1 overflow-y-auto overflow-x-hidden py-2"
+      >
+        <SidebarSlots />
+        {groups}
+      </div>
+      <PrivateSidebarAccount header={header} />
+    </>
+  );
+}

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

@@ -1,179 +1,91 @@
 /**
- * Sidebar Brand Component
- *
- * Renders the sidebar header with brand mark + title.
- * Three modes: expanded (desktop), collapsed rail (desktop), mobile drawer.
+ * Sidebar header: brand (or workspace switcher) on the left, one control on the
+ * right — collapse on desktop, close on the mobile drawer.
  */
 
 'use client';
 
-import React, { memo, useMemo } from 'react';
+import React, { memo } from 'react';
+import { X } from 'lucide-react';
 
-import { Link, SidebarHeader, SidebarTrigger } from '@djangocfg/ui-core/components';
+import { Button, Link, SidebarTrigger, useSidebar } 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 { SidebarBrandSwitcher } from './SidebarBrandSwitcher';
 
-const HEADER_ROW_CLASS = 'flex items-center gap-2 mb-2';
+const BRAND_LINK =
+  'flex min-w-0 items-center gap-2.5 rounded-lg py-1 outline-none ring-sidebar-ring focus-visible:ring-2';
 
 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 { header, homeHref, brandTitle, brandMonogram, isMobile } = usePrivateLayoutContext();
+  const { setOpenMobile } = useSidebar();
 
   const customBrand = header?.brand;
 
-  const headerRowClass = HEADER_ROW_CLASS;
-
-  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>
+  const brand =
+    customBrand != null && customBrand !== false ? (
+      typeof customBrand === 'string' ? (
+        <Link href={homeHref} className={BRAND_LINK}>
+          <span className="truncate text-base font-medium tracking-tight">{customBrand}</span>
+        </Link>
+      ) : (
+        customBrand
+      )
+    ) : (
+      <Link href={homeHref} className={BRAND_LINK}>
+        <span
+          className={cn(
+            'flex shrink-0 items-center justify-center rounded-lg bg-sidebar-primary',
+            isMobile ? 'size-9' : 'size-7',
           )}
-        </div>
-        {!isMobile && <SidebarTrigger className="shrink-0" aria-label="Collapse sidebar" />}
-      </div>
-    ),
-    [headerRowClass, customBrand, homeHref, brandMark, brandTitle, isMobile],
-  );
-
-  const collapsedHeader = useMemo(
-    () => (
-      <div className="group/collapsed-brand flex justify-center py-1">
-        <div className="relative h-7 w-7">
-          <Link
-            href={homeHref}
-            className="absolute inset-0 flex items-center justify-center rounded-md bg-sidebar-primary outline-none ring-sidebar-ring focus-visible:ring-2 transition-opacity group-hover/collapsed-brand:opacity-0"
-            aria-label={brandTitle}
-          >
-            {brandMark}
-          </Link>
-          <div className="absolute inset-0 flex items-center justify-center opacity-0 transition-opacity group-hover/collapsed-brand:opacity-100">
-            <SidebarTrigger aria-label="Expand sidebar" />
-          </div>
-        </div>
-      </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
-            )
+        >
+          {header?.brandIcon ? (
+            <LucideIcon icon={header.brandIcon} className="size-4 text-sidebar-primary-foreground" />
           ) : (
-            <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>
+            <span className="text-[11px] font-bold leading-none text-sidebar-primary-foreground">
+              {brandMonogram}
+            </span>
           )}
-        </div>
-      </div>
-    ),
-    [customBrand, homeHref, brandMark, brandTitle],
+        </span>
+        <span className={cn('truncate font-medium tracking-tight', isMobile ? 'text-lg' : 'text-base')}>
+          {brandTitle}
+        </span>
+      </Link>
+    );
+
+  const trailing = isMobile ? (
+    <Button
+      type="button"
+      variant="ghost"
+      size="icon"
+      className="size-11 shrink-0 text-sidebar-foreground/70"
+      aria-label="Close menu"
+      onClick={() => setOpenMobile(false)}
+    >
+      <X className="size-5" />
+    </Button>
+  ) : header?.switcher ? null : (
+    <SidebarTrigger className="shrink-0 text-sidebar-foreground/60 hover:text-sidebar-foreground" />
   );
 
-  // Switcher mode: trigger embedded inside switcher row on desktop expanded
-  const switcherContent = header?.switcher
-    ? (
-      <div className="mb-2">
-        <SidebarBrandSwitcher
-          config={header.switcher}
-          showCollapseTrigger={content.showLabels && !isMobile}
-        />
-      </div>
-    )
-    : null;
-
-  const sidebarHeaderContent = switcherContent
-    ?? (isMobile
-      ? mobileHeader
-      : content.showLabels
-        ? expandedHeader
-        : collapsedHeader);
-
-  const sidebarHeaderClass = useMemo(
-    () =>
-      cn(
-        'pb-2',
+  return (
+    <div
+      data-sidebar="header"
+      className={cn(
+        'flex shrink-0 items-center gap-2',
         isMobile
-          ? 'pb-3 pt-[max(1.25rem,env(safe-area-inset-top,0px))]'
-          : 'pt-3.5',
-      ),
-    [isMobile],
+          ? 'px-4 pb-2 pt-[max(0.5rem,env(safe-area-inset-top,0px))]'
+          : 'px-3 pb-1 pt-3',
+      )}
+    >
+      <div className="min-w-0 flex-1">
+        {header?.switcher ? <SidebarBrandSwitcher config={header.switcher} showCollapseTrigger={!isMobile} /> : brand}
+      </div>
+      {trailing}
+    </div>
   );
-
-  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/PrivateLayout/components/SidebarBrandSwitcher.tsx

@@ -4,8 +4,6 @@
  * Dropdown for switching workspaces / accounts / projects.
  * Renders in the sidebar header area, replacing the static brand block.
  *
- * Collapsed rail: shows only the active item's avatar/monogram (no dropdown trigger).
- * Hover-expanded / mobile: shows full trigger + dropdown.
  */
 
 'use client';
@@ -27,7 +25,7 @@ import {
 import { Link } from '@djangocfg/ui-core/components';
 import { cn } from '@djangocfg/ui-core/lib';
 
-import { useShellVisualState } from '../hooks';
+import { usePeekPin } from '../hooks';
 import type { SidebarBrandSwitcherConfig, SidebarBrandSwitcherItem } from '../types';
 
 interface SidebarBrandSwitcherProps {
@@ -37,8 +35,8 @@ interface SidebarBrandSwitcherProps {
 }
 
 function SidebarBrandSwitcherRaw({ config, showCollapseTrigger }: SidebarBrandSwitcherProps) {
-  const { content } = useShellVisualState();
   const [open, setOpen] = React.useState(false);
+  usePeekPin(open);
 
   const activeItem = useMemo(
     () => config.items.find((i) => i.active) ?? config.items[0] ?? null,
@@ -66,32 +64,6 @@ function SidebarBrandSwitcherRaw({ config, showCollapseTrigger }: SidebarBrandSw
     </Avatar>
   );
 
-  // Collapsed rail — avatar with trigger on hover
-  if (!content.showLabels) {
-    return (
-      <div className="group/collapsed-switcher flex justify-center py-1">
-        <div className="relative h-7 w-7">
-          {activeItem.href ? (
-            <Link
-              href={activeItem.href}
-              className="absolute inset-0 flex items-center justify-center rounded-md outline-none ring-sidebar-ring focus-visible:ring-2 transition-opacity group-hover/collapsed-switcher:opacity-0"
-              aria-label={activeItem.label}
-            >
-              {activeAvatar}
-            </Link>
-          ) : (
-            <div className="absolute inset-0 flex items-center justify-center transition-opacity group-hover/collapsed-switcher:opacity-0">
-              {activeAvatar}
-            </div>
-          )}
-          <div className="absolute inset-0 flex items-center justify-center opacity-0 transition-opacity group-hover/collapsed-switcher:opacity-100">
-            <SidebarTrigger aria-label="Expand sidebar" />
-          </div>
-        </div>
-      </div>
-    );
-  }
-
   return (
     <div className="flex items-center gap-1">
       <DropdownMenu open={open} onOpenChange={onOpenChange}>

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

@@ -1,12 +1,12 @@
 /**
- * Sidebar Nav Group Component
- *
- * Renders a group of nav items as either a flat list or collapsible accordion.
+ * Sidebar Nav Group — a labelled list, or an accordion when `collapsible`.
+ * Groups are separated by a hairline, not by louder labels.
  */
 
 'use client';
 
-import React, { useMemo, useState, useEffect, useCallback, memo } from 'react';
+import React, { memo, useCallback, useEffect, useMemo, useState } from 'react';
+import { ChevronDown } from 'lucide-react';
 
 import {
   Collapsible,
@@ -17,26 +17,24 @@ import {
   SidebarGroupLabel,
   SidebarMenu,
 } from '@djangocfg/ui-core/components';
-import { ChevronDown } from 'lucide-react';
 import { cn } from '@djangocfg/ui-core/lib';
 
 import { LucideIcon } from '../../../components';
+import { shallowEqualBy } from '../../../utils/shallowEqualBy';
 import { usePrivateLayoutContext } from '../context';
-import { useShellVisualState } from '../hooks';
 import type { SidebarGroupConfig } from '../types';
 import { SidebarNavItem } from './SidebarNavItem';
-import { shallowEqualBy } from '../../../utils/shallowEqualBy';
 
-interface SidebarNavGroupProps {
-  group: SidebarGroupConfig;
-}
+const GROUP_CLASS = cn(
+  'gap-0 px-2 py-1',
+  '[&:not(:first-child)]:mt-1 [&:not(:first-child)]:border-t [&:not(:first-child)]:border-sidebar-border/60 [&:not(:first-child)]:pt-2',
+);
 
-function SidebarNavGroupRaw({ group }: SidebarNavGroupProps) {
-  const { isActive, menuNav, groupLabelStyle } = usePrivateLayoutContext();
-  const { content } = useShellVisualState();
+function SidebarNavGroupRaw({ group }: { group: SidebarGroupConfig }) {
+  const { isActive, geometry } = usePrivateLayoutContext();
 
-  const hasLabel = Boolean(group.label && group.label.trim().length > 0);
-  const isCollapsible = Boolean(group.collapsible) && hasLabel && content.showLabels;
+  const hasLabel = group.label.trim().length > 0;
+  const isCollapsible = Boolean(group.collapsible) && hasLabel;
   const hideItemIcons = group.hideItemIcons ?? isCollapsible;
 
   const hasActiveChild = useMemo(
@@ -44,94 +42,47 @@ function SidebarNavGroupRaw({ group }: SidebarNavGroupProps) {
     [group.items, isActive],
   );
 
-  const [open, setOpen] = useState<boolean>(
-    isCollapsible ? Boolean(group.defaultOpen) || hasActiveChild : true,
-  );
+  const [open, setOpen] = useState(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 handleOpenChange = useCallback((value: boolean) => setOpen(value), []);
 
-  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);
-  }, []);
+  const items = group.items.map((item) => (
+    <SidebarNavItem key={item.href} item={item} hideItemIcons={hideItemIcons} />
+  ));
 
   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}>
+      <SidebarGroup className={GROUP_CLASS}>
         <Collapsible open={open} onOpenChange={handleOpenChange} className="w-full">
           <CollapsibleTrigger asChild>
             <button
               type="button"
+              aria-expanded={open}
               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]',
+                'flex w-full items-center gap-2.5 rounded-lg font-normal text-sidebar-foreground',
+                'transition-colors duration-150 hover:bg-sidebar-accent/60',
+                'outline-none ring-sidebar-ring focus-visible:ring-2',
+                geometry.item,
               )}
-              aria-expanded={open}
-              data-no-expand
             >
-              {triggerIcon}
+              {group.icon ? <LucideIcon icon={group.icon} className="shrink-0 text-sidebar-foreground/60" /> : null}
               <span className="flex-1 truncate text-left">{group.label}</span>
               <ChevronDown
+                aria-hidden
                 className={cn(
-                  'h-4 w-4 shrink-0 text-sidebar-foreground/55 transition-transform duration-200',
+                  'size-4 shrink-0 text-sidebar-foreground/50 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>
+              <SidebarMenu className="mt-0.5 gap-0.5">{items}</SidebarMenu>
             </SidebarGroupContent>
           </CollapsibleContent>
         </Collapsible>
@@ -140,50 +91,39 @@ function SidebarNavGroupRaw({ group }: SidebarNavGroupProps) {
   }
 
   return (
-    <SidebarGroup className={sidebarGroupClass}>
+    <SidebarGroup className={GROUP_CLASS}>
       {hasLabel ? (
-        <SidebarGroupLabel className={labelClass}>{group.label}</SidebarGroupLabel>
+        <SidebarGroupLabel
+          className={cn('font-medium normal-case tracking-normal text-sidebar-foreground/50', geometry.label)}
+        >
+          {group.label}
+        </SidebarGroupLabel>
       ) : null}
-      <SidebarGroupContent className="mt-1">
-        <SidebarMenu className={menuNav.menu}>{items}</SidebarMenu>
+      <SidebarGroupContent>
+        <SidebarMenu className="gap-0.5">{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 &&
-    shallowEqualBy(
-      a.items,
-      b.items,
-      (ai, bi) =>
-        ai.href === bi.href &&
-        ai.label === bi.label &&
-        ai.icon === bi.icon &&
-        ai.badge === bi.badge &&
-        ai.badgeVariant === bi.badgeVariant &&
-        ai.tooltip === bi.tooltip,
-    )
+const groupEqual = (a: SidebarGroupConfig, b: SidebarGroupConfig) =>
+  a.label === b.label &&
+  a.collapsible === b.collapsible &&
+  a.defaultOpen === b.defaultOpen &&
+  a.icon === b.icon &&
+  a.hideItemIcons === b.hideItemIcons &&
+  a.dynamic === b.dynamic &&
+  shallowEqualBy(
+    a.items,
+    b.items,
+    (x, y) =>
+      x.href === y.href &&
+      x.label === y.label &&
+      x.icon === y.icon &&
+      x.badge === y.badge &&
+      x.badgeVariant === y.badgeVariant,
   );
-}
 
-/**
- * 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);
-});
+export const SidebarNavGroup = memo(SidebarNavGroupRaw, (prev, next) =>
+  groupEqual(prev.group, next.group),
+);