@djangocfg/layouts 2.1.591 → 2.1.593

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),
+);

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

@@ -1,13 +1,11 @@
 /**
- * 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.
+ * Sidebar Nav Item — icon, label, optional badge. Active state is a surface
+ * plus `aria-current`; weight never changes, so labels do not jump.
  */
 
 'use client';
 
-import React, { memo, useMemo } from 'react';
+import React, { memo } from 'react';
 
 import {
   Link,
@@ -19,7 +17,6 @@ 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 {
@@ -27,111 +24,51 @@ interface SidebarNavItemProps {
   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 ITEM_CLASS = cn(
+  'rounded-lg border-0 font-normal shadow-none transition-colors duration-150',
+  'text-sidebar-foreground/90 hover:bg-sidebar-accent/70 hover:text-sidebar-foreground',
+  'data-[active=true]:bg-sidebar-accent data-[active=true]:font-normal data-[active=true]:text-sidebar-foreground',
+  '[&>svg]:text-sidebar-foreground/80 [&>svg]:opacity-100 hover:[&>svg]:text-sidebar-foreground',
+  'data-[active=true]:[&>svg]:text-sidebar-foreground',
+);
 
-  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],
-  );
+function SidebarNavItemRaw({ item, hideItemIcons }: SidebarNavItemProps) {
+  const { isActive, geometry } = usePrivateLayoutContext();
+  const active = isActive(item.href);
 
   return (
     <SidebarMenuItem>
       <SidebarMenuButton
         asChild
-        isActive={isItemActive}
-        size={menuNav.buttonSize}
-        tooltip={content.showTooltips ? tooltipText : undefined}
-        className={buttonClass}
+        isActive={active}
+        className={cn(ITEM_CLASS, geometry.item, hideItemIcons && 'pl-8')}
       >
-        <Link href={item.href}>
-          {itemIcon}
+        <Link href={item.href} aria-current={active ? 'page' : undefined}>
+          {!hideItemIcons && item.icon ? <LucideIcon icon={item.icon} /> : null}
           <span>{item.label}</span>
-          {expandedBadgeNode}
+          {item.badge ? (
+            <SidebarMenuBadge
+              className={cn(
+                item.badgeVariant === 'pill' && 'rounded-md bg-primary/15 px-1.5 font-medium text-primary',
+              )}
+            >
+              {item.badge}
+            </SidebarMenuBadge>
+          ) : null}
         </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)
-  );
-});
+const itemEqual = (a: SidebarItem, b: SidebarItem) =>
+  a.href === b.href &&
+  a.label === b.label &&
+  a.icon === b.icon &&
+  a.badge === b.badge &&
+  a.badgeVariant === b.badgeVariant;
+
+export const SidebarNavItem = memo(
+  SidebarNavItemRaw,
+  (prev, next) => prev.hideItemIcons === next.hideItemIcons && itemEqual(prev.item, next.item),
+);

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

@@ -0,0 +1,34 @@
+/**
+ * Peek panel: the full sidebar floated over the page while it is collapsed.
+ * Opened and held by `SidebarPeekProvider`.
+ */
+
+'use client';
+
+import React from 'react';
+
+import { useSidebarPeek } from '../hooks';
+import { SidebarBody } from './SidebarBody';
+import { SidebarResizeHandle } from './SidebarResizeHandle';
+
+export function SidebarPeek() {
+  const peek = useSidebarPeek();
+  if (!peek?.open) return null;
+
+  return (
+    <div
+      data-sidebar="peek"
+      role="complementary"
+      aria-label="Navigation"
+      {...peek.panelProps}
+      className={[
+        'fixed bottom-2 left-2 top-2 z-50 flex w-(--sidebar-width) flex-col overflow-hidden',
+        'rounded-xl border border-sidebar-border bg-sidebar text-sidebar-foreground shadow-2xl',
+        'animate-in fade-in-0 slide-in-from-left-4 duration-150',
+      ].join(' ')}
+    >
+      <SidebarBody />
+      <SidebarResizeHandle />
+    </div>
+  );
+}

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

@@ -0,0 +1,76 @@
+/**
+ * Drag handle on the sidebar's right edge. Pointer drag, arrow keys and
+ * double-click-to-reset; the width itself lives in `useSidebarWidth`.
+ */
+
+'use client';
+
+import React, { useRef } from 'react';
+
+import { useSidebarWidthContext } from '../hooks';
+
+const KEY_STEP = 16;
+
+export function SidebarResizeHandle() {
+  const sidebarWidth = useSidebarWidthContext();
+  const origin = useRef<{ x: number; width: number } | null>(null);
+
+  if (!sidebarWidth?.enabled) return null;
+  const { width, min, max, dragging, setWidth, setDragging, reset } = sidebarWidth;
+
+  const onPointerDown = (e: React.PointerEvent<HTMLDivElement>) => {
+    if (e.button !== 0) return;
+    e.currentTarget.setPointerCapture(e.pointerId);
+    origin.current = { x: e.clientX, width };
+    setDragging(true);
+  };
+
+  const onPointerMove = (e: React.PointerEvent<HTMLDivElement>) => {
+    if (!origin.current) return;
+    setWidth(origin.current.width + e.clientX - origin.current.x);
+  };
+
+  const endDrag = () => {
+    origin.current = null;
+    setDragging(false);
+  };
+
+  const onKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
+    const next =
+      e.key === 'ArrowLeft' ? width - KEY_STEP
+      : e.key === 'ArrowRight' ? width + KEY_STEP
+      : e.key === 'Home' ? min
+      : e.key === 'End' ? max
+      : null;
+    if (next === null) return;
+    e.preventDefault();
+    e.stopPropagation();
+    setWidth(next);
+  };
+
+  return (
+    <div
+      role="separator"
+      aria-orientation="vertical"
+      aria-label="Resize sidebar"
+      aria-valuemin={min}
+      aria-valuemax={max}
+      aria-valuenow={width}
+      tabIndex={0}
+      data-dragging={dragging || undefined}
+      onPointerDown={onPointerDown}
+      onPointerMove={onPointerMove}
+      onPointerUp={endDrag}
+      onPointerCancel={endDrag}
+      onDoubleClick={reset}
+      onKeyDown={onKeyDown}
+      className={[
+        'absolute inset-y-0 right-0 z-20 hidden w-2 cursor-col-resize touch-none outline-none md:block',
+        // 2px primary line on the border; fades in after a short hover delay.
+        'after:absolute after:inset-y-0 after:right-0 after:w-0.5 after:bg-transparent',
+        'after:transition-colors after:duration-150',
+        'hover:after:bg-primary/70 hover:after:delay-100 focus-visible:after:bg-primary data-[dragging]:after:bg-primary',
+      ].join(' ')}
+    />
+  );
+}

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

@@ -1,71 +1,32 @@
 /**
- * Sidebar Slots Component
- *
- * Renders optional content slots: menuStart, menuEnd, featured CTA, footer.
+ * Optional slots around the nav groups: menuStart, featured, menuEnd, footer.
  */
 
 'use client';
 
-import React, { memo, useMemo } from 'react';
+import React, { memo } from 'react';
 
-import { SidebarFeatured } from './SidebarFeatured';
 import { usePrivateLayoutContext } from '../context';
-import { useShellVisualState } from '../hooks';
+import { SidebarFeatured } from './SidebarFeatured';
+
+const SLOT = 'w-full min-w-0 shrink-0 px-2';
 
 function SidebarSlotsRaw() {
   const { sidebar } = usePrivateLayoutContext();
-  const { content } = useShellVisualState();
-
-  const menuStartSlot = useMemo(
-    () =>
-      sidebar?.menuStart ? (
-        <div className="w-full min-w-0 shrink-0 px-2">{sidebar.menuStart}</div>
-      ) : null,
-    [sidebar?.menuStart],
-  );
-
-  const menuEndSlot = useMemo(
-    () =>
-      sidebar?.menuEnd ? (
-        <div className="w-full min-w-0 shrink-0 px-2">{sidebar.menuEnd}</div>
-      ) : null,
-    [sidebar?.menuEnd],
-  );
-
-  const featuredSlot = useMemo(
-    () =>
-      sidebar?.featured ? (
-        <div className="w-full min-w-0 shrink-0 px-2">
-          <SidebarFeatured config={sidebar.featured} />
-        </div>
-      ) : null,
-    [sidebar?.featured],
-  );
-
-  const footerExtra = useMemo(
-    () =>
-      sidebar?.footer ? (
-        <div className="mb-2">{sidebar.footer}</div>
-      ) : null,
-    [sidebar?.footer],
-  );
-
-  if (content.hideSlots) return null;
+  if (!sidebar) return null;
 
   return (
     <>
-      {menuStartSlot}
-      {featuredSlot}
-      {menuEndSlot}
-      {footerExtra}
+      {sidebar.menuStart ? <div className={SLOT}>{sidebar.menuStart}</div> : null}
+      {sidebar.featured ? (
+        <div className={SLOT}>
+          <SidebarFeatured config={sidebar.featured} />
+        </div>
+      ) : null}
+      {sidebar.menuEnd ? <div className={SLOT}>{sidebar.menuEnd}</div> : null}
+      {sidebar.footer ? <div className={SLOT}>{sidebar.footer}</div> : null}
     </>
   );
 }
 
-/**
- * Memoised slots wrapper. Skips re-renders when the sidebar config object
- * reference stays the same. The slot ReactNodes themselves (menuStart,
- * menuEnd, footer) are *not* deeply compared — they remain reactive because
- * the consumer is expected to pass a new ReactNode when slot content changes.
- */
 export const SidebarSlots = memo(SidebarSlotsRaw);

package/src/layouts/PrivateLayout/components/index.ts

@@ -6,8 +6,4 @@ export { PrivateSidebar } from './PrivateSidebar';
 export { PrivateContent } from './PrivateContent';
 export { ForbiddenState } from './ForbiddenState';
 export type { ForbiddenStateProps } from './ForbiddenState';
-export { SidebarBrand } from './SidebarBrand';
 export { SidebarBrandSwitcher } from './SidebarBrandSwitcher';
-export { SidebarNavGroup } from './SidebarNavGroup';
-export { SidebarNavItem } from './SidebarNavItem';
-export { SidebarSlots } from './SidebarSlots';