@djangocfg/layouts 2.1.358 → 2.1.359

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/layouts",
-  "version": "2.1.358",
+  "version": "2.1.359",
   "description": "Simple, straightforward layout components for Next.js - import and use with props",
   "keywords": [
     "layouts",
@@ -84,13 +84,13 @@
     "check": "tsc --noEmit"
   },
   "peerDependencies": {
-    "@djangocfg/api": "^2.1.358",
-    "@djangocfg/centrifugo": "^2.1.358",
-    "@djangocfg/debuger": "^2.1.358",
-    "@djangocfg/i18n": "^2.1.358",
-    "@djangocfg/monitor": "^2.1.358",
-    "@djangocfg/ui-core": "^2.1.358",
-    "@djangocfg/ui-nextjs": "^2.1.358",
+    "@djangocfg/api": "^2.1.359",
+    "@djangocfg/centrifugo": "^2.1.359",
+    "@djangocfg/debuger": "^2.1.359",
+    "@djangocfg/i18n": "^2.1.359",
+    "@djangocfg/monitor": "^2.1.359",
+    "@djangocfg/ui-core": "^2.1.359",
+    "@djangocfg/ui-nextjs": "^2.1.359",
     "@hookform/resolvers": "^5.2.2",
     "consola": "^3.4.2",
     "lucide-react": "^0.545.0",
@@ -121,15 +121,15 @@
     "uuid": "^11.1.0"
   },
   "devDependencies": {
-    "@djangocfg/api": "^2.1.358",
-    "@djangocfg/centrifugo": "^2.1.358",
-    "@djangocfg/debuger": "^2.1.358",
-    "@djangocfg/i18n": "^2.1.358",
-    "@djangocfg/monitor": "^2.1.358",
-    "@djangocfg/typescript-config": "^2.1.358",
-    "@djangocfg/ui-core": "^2.1.358",
-    "@djangocfg/ui-nextjs": "^2.1.358",
-    "@djangocfg/ui-tools": "^2.1.358",
+    "@djangocfg/api": "^2.1.359",
+    "@djangocfg/centrifugo": "^2.1.359",
+    "@djangocfg/debuger": "^2.1.359",
+    "@djangocfg/i18n": "^2.1.359",
+    "@djangocfg/monitor": "^2.1.359",
+    "@djangocfg/typescript-config": "^2.1.359",
+    "@djangocfg/ui-core": "^2.1.359",
+    "@djangocfg/ui-nextjs": "^2.1.359",
+    "@djangocfg/ui-tools": "^2.1.359",
     "@types/node": "^24.7.2",
     "@types/react": "^19.1.0",
     "@types/react-dom": "^19.1.0",

package/src/configurator/private/schema.ts

@@ -38,6 +38,7 @@ export interface PrivateLayoutConfiguratorData {
     userPlan: string;
     showSecondaryAction: boolean;
     accountAction: 'menu' | 'dialog';
+    showSwitcher: boolean;
   };
 }
 
@@ -133,6 +134,11 @@ export const privateLayoutConfiguratorSchema: CustomJsonSchema7 = {
           enum: ['menu', 'dialog'],
           description: "'menu' opens a dropdown; 'dialog' opens the global ProfileDialog.",
         },
+        showSwitcher: {
+          type: 'boolean',
+          title: 'Brand switcher',
+          description: 'Replace the static brand with a workspace/account dropdown.',
+        },
       },
     },
   },
@@ -172,6 +178,7 @@ export const privateLayoutConfiguratorUiSchema: CustomJsonUiSchema7 = {
   header: {
     'ui:collapsible': true,
     showSecondaryAction: { 'ui:widget': 'switch' },
+    showSwitcher: { 'ui:widget': 'switch' },
     accountAction: {
       'ui:widget': 'radio',
       'ui:options': { inline: true },
@@ -198,5 +205,6 @@ export const defaultPrivateLayoutConfiguratorData: PrivateLayoutConfiguratorData
     userPlan: 'Pro plan',
     showSecondaryAction: false,
     accountAction: 'menu',
+    showSwitcher: false,
   },
 };

package/src/layouts/PrivateLayout/PrivateLayout.tsx

@@ -35,8 +35,12 @@ export type {
   SidebarActiveIndicator,
   SidebarGroupLabelStyle,
   SidebarFeaturedConfig,
+  SidebarBrandSwitcherConfig,
+  SidebarBrandSwitcherItem,
 } from './types';
 
+export { SidebarBrandSwitcher } from './components';
+
 export { PrivateLayoutProps };
 
 // Lazy-load ProfileDialog so the profile bundle is only fetched when opened.

package/src/layouts/PrivateLayout/README.md

@@ -119,16 +119,62 @@ For pages like Kanban boards where the shell must be exactly one viewport tall a
 
 | Field | Type | Notes |
 |---|---|---|
-| `brand`, `title`, `brandIcon`, `brandLetter` | — | Sidebar header brand. |
+| `switcher` | `SidebarBrandSwitcherConfig` | Brand switcher dropdown (replaces `brand`/`title`/`brandIcon` when set). |
+| `brand`, `title`, `brandIcon`, `brandLetter` | — | Static sidebar header brand (used when `switcher` is not set). |
 | `groups` | `UserMenuGroup[]` | Account links rendered inside the footer dropdown. |
 | `authPath` | `string` | Sign-in redirect target. |
 | `userPlan` | `string` | Subtitle under the display name (e.g. `"Max plan"`). |
+| `accountAction` | `'menu' \| 'dialog'` | Footer button behaviour. `'menu'` opens dropdown; `'dialog'` opens global ProfileDialog. Default `'menu'`. |
 | `footerSecondaryAction` | `{ icon, href?, onClick?, ariaLabel, pulse? }` | Optional secondary icon button inside the footer trigger (e.g. "Get apps" with pulsing dot). |
 
 The footer button opens a popover (`DropdownMenu`, `side="top"`) with: email, account links, **Language** (opens fullscreen `LocaleSwitcherDialog` if `LayoutI18nProvider` is mounted), **Theme** (cycles `light → dark → system`), and **Log out**. In dev mode the footer renders a `Guest (dev)` placeholder when there's no authenticated user, so debug controls stay reachable; in production the block hides itself.
 
 ---
 
+## Brand switcher
+
+Replace the static brand header with a workspace/account/project switcher:
+
+```tsx
+import { SidebarBrandSwitcherConfig } from '@djangocfg/layouts';
+
+const switcher: SidebarBrandSwitcherConfig = {
+  items: [
+    { label: 'My Workspace', description: 'Personal', href: '/', active: true },
+    { label: 'Team Workspace', description: 'Pro plan', href: '/team' },
+    { label: 'Client Project', onSelect: () => switchProject('client') },
+  ],
+  addLabel: 'Add workspace',
+  onAdd: () => openCreateDialog(),
+};
+
+<PrivateLayout header={{ switcher }} ...>
+```
+
+`SidebarBrandSwitcherConfig`:
+
+| Field | Type | Notes |
+|---|---|---|
+| `items` | `SidebarBrandSwitcherItem[]` | List of workspaces / accounts / projects. |
+| `addLabel` | `string` | Label for the "add new" action at the bottom. Omit to hide. |
+| `onAdd` | `() => void` | Called when "add new" is clicked. |
+
+`SidebarBrandSwitcherItem`:
+
+| Field | Type | Notes |
+|---|---|---|
+| `label` | `string` | Display name. |
+| `avatar` | `string` | Image URL. Falls back to `monogram` / first letter of `label`. |
+| `monogram` | `string` | Single letter override for the avatar fallback. |
+| `description` | `string` | Secondary line under the label (plan, role, etc.). |
+| `href` | `string` | Navigate on select. |
+| `onSelect` | `() => void` | Callback on select (alternative to `href`). |
+| `active` | `boolean` | Mark as currently selected (shows checkmark in dropdown). |
+
+On the collapsed icon-rail the switcher renders only the active item's avatar — no dropdown trigger.
+
+---
+
 ## Sample
 
 ```tsx

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

@@ -1,10 +1,3 @@
-/**
- * Private Sidebar
- *
- * Composed from smaller components: SidebarBrand, SidebarNavGroup, SidebarSlots.
- * Uses PrivateLayoutContext for all UI state.
- */
-
 'use client';
 
 import React from 'react';
@@ -19,7 +12,7 @@ import { cn } from '@djangocfg/ui-core/lib';
 
 import { PrivateSidebarAccount } from './PrivateSidebarAccount';
 import { PrivateLayoutProvider } from '../context';
-import { useHoverExpand, useShellVisualState, useSidebarKeyboard } from '../hooks';
+import { useShellVisualState, useSidebarKeyboard } from '../hooks';
 import type { HeaderConfig, SidebarConfig } from '../types';
 import { SidebarBrand } from './SidebarBrand';
 import { SidebarNavGroup } from './SidebarNavGroup';
@@ -29,11 +22,6 @@ interface PrivateSidebarProps {
   sidebar: SidebarConfig;
   header?: HeaderConfig;
   pathname?: string;
-  /**
-   * shadcn-sidebar `variant`. Used to trigger the inset/boxed visual:
-   * `'inset'` makes the sidebar wrapper paint `bg-sidebar` and lets `SidebarInset`
-   * float as a rounded card. Default `'sidebar'` (full-bleed).
-   */
   variant?: 'sidebar' | 'inset';
 }
 
@@ -43,18 +31,13 @@ export function PrivateSidebar({
   pathname: pathnameProp,
   variant = 'sidebar',
 }: PrivateSidebarProps) {
-  const { state, isMobile, setOpenMobile, setOpen } = useSidebar();
+  const { state, isMobile, setOpenMobile } = useSidebar();
   const pathname = pathnameProp ?? '';
 
   React.useEffect(() => {
     if (isMobile) setOpenMobile(false);
   }, [pathname, isMobile, setOpenMobile]);
 
-  const collapsedRail = !isMobile && state === 'collapsed';
-  const { isHoverExpanded, onMouseEnter, onMouseLeave, setHoverExpanded } = useHoverExpand({
-    enabled: collapsedRail,
-  });
-
   return (
     <PrivateLayoutProvider
       sidebar={sidebar}
@@ -62,80 +45,39 @@ export function PrivateSidebar({
       pathname={pathname}
       isMobile={isMobile}
       state={state}
-      isHoverExpanded={isHoverExpanded}
     >
       <PrivateSidebarInner
         sidebar={sidebar}
         header={header}
         variant={variant}
-        collapsedRail={collapsedRail}
-        setHoverExpanded={setHoverExpanded}
-        onMouseEnter={onMouseEnter}
-        onMouseLeave={onMouseLeave}
       />
     </PrivateLayoutProvider>
   );
 }
 
-// ---------------------------------------------------------------------------
-// Inner component — runs inside PrivateLayoutProvider so useShellVisualState
-// can safely consume the context.
-// ---------------------------------------------------------------------------
-
 interface PrivateSidebarInnerProps {
   sidebar: SidebarConfig;
   header?: HeaderConfig;
   variant: 'sidebar' | 'inset';
-  collapsedRail: boolean;
-  setHoverExpanded: (value: boolean) => void;
-  onMouseEnter: () => void;
-  onMouseLeave: () => void;
 }
 
-function PrivateSidebarInner({
-  sidebar,
-  header,
-  variant,
-  collapsedRail,
-  setHoverExpanded,
-  onMouseEnter,
-  onMouseLeave,
-}: PrivateSidebarInnerProps) {
+function PrivateSidebarInner({ sidebar, header, variant }: PrivateSidebarInnerProps) {
   const layoutVariant = variant === 'inset' ? 'boxed' : 'full-bleed';
   const { modifiers } = useShellVisualState(layoutVariant);
   const { setSidebarRef, handleSidebarKeyDown } = useSidebarKeyboard();
 
-  const railExpandHintClass = collapsedRail ? 'cursor-pointer' : undefined;
-
-  /** Click on the collapsed rail acts like a hover — temporary expand, not persistent. */
-  const expandOnRailClick = React.useCallback(
-    (event: React.MouseEvent<HTMLDivElement>) => {
-      const interactive = (event.target as Element | null)?.closest(
-        'a, button, [role="menuitem"], [data-no-expand]',
-      );
-      if (interactive) return;
-      setHoverExpanded(true);
-    },
-    [setHoverExpanded],
-  );
-
   const sidebarRootClass = React.useMemo(
     () =>
       cn(
-        railExpandHintClass,
         '[&>[data-sidebar=sidebar]]:bg-gradient-to-t [&>[data-sidebar=sidebar]]:from-sidebar/85 [&>[data-sidebar=sidebar]]:to-sidebar',
         modifiers.sidebarRoot,
         modifiers.sidebarInner.map((m) => `[&>[data-sidebar=sidebar]]:${m}`),
       ),
-    [railExpandHintClass, modifiers],
+    [modifiers],
   );
 
   const sidebarContentClass = React.useMemo(
-    () =>
-      cn(
-        'gap-2',
-        modifiers.sidebarContent,
-      ),
+    () => cn('gap-2', modifiers.sidebarContent),
     [modifiers.sidebarContent],
   );
 
@@ -159,9 +101,6 @@ function PrivateSidebarInner({
       collapsible="icon"
       variant={variant}
       className={sidebarRootClass}
-      onClick={collapsedRail ? expandOnRailClick : undefined}
-      onMouseEnter={onMouseEnter}
-      onMouseLeave={onMouseLeave}
       onKeyDown={handleSidebarKeyDown}
     >
       <SidebarBrand />

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

@@ -36,7 +36,6 @@ 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 '../types';
@@ -223,11 +222,7 @@ function PrivateSidebarAccountRaw({ header }: PrivateSidebarAccountProps) {
     <div className={wrapperClass}>
       <DropdownMenu
         open={isAccountMenuOpen}
-        onOpenChange={(open) => {
-          setIsAccountMenuOpen(open);
-          if (open) blockSidebarCollapse();
-          else allowSidebarCollapse();
-        }}
+        onOpenChange={setIsAccountMenuOpen}
       >
         <DropdownMenuTrigger asChild>
           {triggerButton}

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

@@ -15,9 +15,10 @@ import { cn } from '@djangocfg/ui-core/lib';
 import { LucideIcon } from '../../../components';
 import { usePrivateLayoutContext } from '../context';
 import { useShellVisualState } from '../hooks';
+import { SidebarBrandSwitcher } from './SidebarBrandSwitcher';
 
 function SidebarBrandRaw() {
-  const { header, homeHref, brandTitle, brandMonogram, isMobile, isHoverExpanded } =
+  const { header, homeHref, brandTitle, brandMonogram, isMobile } =
     usePrivateLayoutContext();
   const { content } = useShellVisualState();
 
@@ -86,14 +87,19 @@ function SidebarBrandRaw() {
 
   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 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],
@@ -136,11 +142,24 @@ function SidebarBrandRaw() {
     [customBrand, homeHref, brandMark, brandTitle],
   );
 
-  const sidebarHeaderContent = isMobile
-    ? mobileHeader
-    : content.showLabels
-      ? expandedHeader
-      : collapsedHeader;
+  // 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(
     () =>
@@ -149,11 +168,8 @@ function SidebarBrandRaw() {
         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],
+    [isMobile],
   );
 
   return <SidebarHeader className={sidebarHeaderClass}>{sidebarHeaderContent}</SidebarHeader>;

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

@@ -0,0 +1,223 @@
+/**
+ * Sidebar Brand Switcher
+ *
+ * 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';
+
+import React, { memo, useMemo } from 'react';
+import { Check, ChevronsUpDown, Plus } from 'lucide-react';
+
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+  SidebarTrigger,
+} from '@djangocfg/ui-core/components';
+import { Link } from '@djangocfg/ui-core/components';
+import { cn } from '@djangocfg/ui-core/lib';
+
+import { useShellVisualState } from '../hooks';
+import type { SidebarBrandSwitcherConfig, SidebarBrandSwitcherItem } from '../types';
+
+interface SidebarBrandSwitcherProps {
+  config: SidebarBrandSwitcherConfig;
+  /** Show the sidebar collapse toggle inside the switcher row (desktop expanded only). */
+  showCollapseTrigger?: boolean;
+}
+
+function SidebarBrandSwitcherRaw({ config, showCollapseTrigger }: SidebarBrandSwitcherProps) {
+  const { content } = useShellVisualState();
+  const [open, setOpen] = React.useState(false);
+
+  const activeItem = useMemo(
+    () => config.items.find((i) => i.active) ?? config.items[0] ?? null,
+    [config.items],
+  );
+
+  const onOpenChange = React.useCallback((next: boolean) => {
+    setOpen(next);
+  }, []);
+
+  if (!activeItem) return null;
+
+  const activeMonogram = (
+    activeItem.monogram?.charAt(0) ||
+    activeItem.label.charAt(0) ||
+    '?'
+  ).toUpperCase();
+
+  const activeAvatar = (
+    <Avatar className="h-7 w-7 shrink-0 rounded-md">
+      <AvatarImage src={activeItem.avatar} alt={activeItem.label} />
+      <AvatarFallback className="rounded-md bg-sidebar-primary text-[11px] font-bold text-sidebar-primary-foreground">
+        {activeMonogram}
+      </AvatarFallback>
+    </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}>
+        <DropdownMenuTrigger asChild>
+          <button
+            type="button"
+            className={cn(
+              'group/switcher flex min-w-0 flex-1 items-center gap-2.5 rounded-lg px-2 py-2',
+              'text-left transition-colors',
+              'hover:bg-sidebar-accent/60 hover:text-sidebar-accent-foreground',
+              'outline-none ring-sidebar-ring focus-visible:ring-2',
+            )}
+            data-no-expand
+          >
+            {activeAvatar}
+            <span className="flex min-w-0 flex-1 flex-col">
+              <span className="truncate text-sm font-semibold leading-tight text-sidebar-foreground">
+                {activeItem.label}
+              </span>
+              {activeItem.description ? (
+                <span className="truncate text-xs leading-snug text-sidebar-foreground/55">
+                  {activeItem.description}
+                </span>
+              ) : null}
+            </span>
+            <ChevronsUpDown
+              className="h-4 w-4 shrink-0 text-sidebar-foreground/40 transition-colors group-hover/switcher:text-sidebar-foreground/70"
+              aria-hidden
+            />
+          </button>
+        </DropdownMenuTrigger>
+
+        <DropdownMenuContent
+          side="bottom"
+          align="start"
+          sideOffset={4}
+          className="min-w-52 p-1.5"
+        >
+          {config.items.map((item) => (
+            <SwitcherItem key={item.label} item={item} onClose={() => onOpenChange(false)} />
+          ))}
+
+          {config.addLabel ? (
+            <>
+              <DropdownMenuSeparator />
+              <DropdownMenuItem
+                onSelect={() => {
+                  onOpenChange(false);
+                  config.onAdd?.();
+                }}
+                className="flex items-center gap-2 rounded-md px-2 py-1.5 text-sm text-muted-foreground"
+              >
+                <Plus className="h-4 w-4 shrink-0" aria-hidden />
+                <span className="truncate">{config.addLabel}</span>
+              </DropdownMenuItem>
+            </>
+          ) : null}
+        </DropdownMenuContent>
+      </DropdownMenu>
+
+      {showCollapseTrigger ? (
+        <SidebarTrigger className="shrink-0" aria-label="Collapse sidebar" data-no-expand />
+      ) : null}
+    </div>
+  );
+}
+
+interface SwitcherItemProps {
+  item: SidebarBrandSwitcherItem;
+  onClose: () => void;
+}
+
+function SwitcherItem({ item, onClose }: SwitcherItemProps) {
+  const monogram = (
+    item.monogram?.charAt(0) ||
+    item.label.charAt(0) ||
+    '?'
+  ).toUpperCase();
+
+  const handleSelect = React.useCallback(() => {
+    onClose();
+    item.onSelect?.();
+  }, [item, onClose]);
+
+  const inner = (
+    <>
+      <Avatar className="h-6 w-6 shrink-0 rounded-md">
+        <AvatarImage src={item.avatar} alt={item.label} />
+        <AvatarFallback className="rounded-md bg-sidebar-primary text-[10px] font-bold text-sidebar-primary-foreground">
+          {monogram}
+        </AvatarFallback>
+      </Avatar>
+      <span className="flex min-w-0 flex-1 flex-col">
+        <span className="truncate text-sm font-medium">{item.label}</span>
+        {item.description ? (
+          <span className="truncate text-xs text-muted-foreground">{item.description}</span>
+        ) : null}
+      </span>
+      {item.active ? (
+        <Check className="h-4 w-4 shrink-0 text-primary" aria-hidden />
+      ) : null}
+    </>
+  );
+
+  if (item.href && !item.onSelect) {
+    return (
+      <DropdownMenuItem asChild>
+        <Link
+          href={item.href}
+          onClick={onClose}
+          className="flex items-center gap-2 rounded-md px-2 py-1.5"
+        >
+          {inner}
+        </Link>
+      </DropdownMenuItem>
+    );
+  }
+
+  return (
+    <DropdownMenuItem
+      onSelect={handleSelect}
+      className="flex items-center gap-2 rounded-md px-2 py-1.5"
+    >
+      {inner}
+    </DropdownMenuItem>
+  );
+}
+
+export const SidebarBrandSwitcher = memo(SidebarBrandSwitcherRaw);

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

@@ -5,6 +5,7 @@
 export { PrivateSidebar } from './PrivateSidebar';
 export { PrivateContent } from './PrivateContent';
 export { SidebarBrand } from './SidebarBrand';
+export { SidebarBrandSwitcher } from './SidebarBrandSwitcher';
 export { SidebarNavGroup } from './SidebarNavGroup';
 export { SidebarNavItem } from './SidebarNavItem';
 export { SidebarSlots } from './SidebarSlots';