@djangocfg/ui-nextjs 2.1.254 → 2.1.256

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/ui-nextjs",
-  "version": "2.1.254",
+  "version": "2.1.256",
   "description": "Next.js UI component library with Radix UI primitives, Tailwind CSS styling, charts, and form components",
   "keywords": [
     "ui-components",
@@ -85,11 +85,11 @@
     "check": "tsc --noEmit"
   },
   "peerDependencies": {
-    "@djangocfg/api": "^2.1.254",
-    "@djangocfg/i18n": "^2.1.254",
-    "@djangocfg/nextjs": "^2.1.254",
-    "@djangocfg/ui-core": "^2.1.254",
-    "@djangocfg/ui-tools": "^2.1.254",
+    "@djangocfg/api": "^2.1.256",
+    "@djangocfg/i18n": "^2.1.256",
+    "@djangocfg/nextjs": "^2.1.256",
+    "@djangocfg/ui-core": "^2.1.256",
+    "@djangocfg/ui-tools": "^2.1.256",
     "@types/react": "^19.1.0",
     "@types/react-dom": "^19.1.0",
     "consola": "^3.4.2",
@@ -112,7 +112,7 @@
     "react-chartjs-2": "^5.3.0"
   },
   "devDependencies": {
-    "@djangocfg/typescript-config": "^2.1.254",
+    "@djangocfg/typescript-config": "^2.1.256",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@radix-ui/react-slot": "^1.2.4",
     "@types/node": "^24.7.2",

package/src/components/sidebar.tsx

@@ -1,7 +1,7 @@
 "use client"
 
 import { cva, VariantProps } from 'class-variance-authority';
-import { PanelLeft } from 'lucide-react';
+import { Menu, PanelLeft } from 'lucide-react';
 import { Link } from '../lib/navigation';
 import * as React from 'react';
 
@@ -327,10 +327,34 @@ const SidebarTrigger = React.forwardRef<
   React.ElementRef<typeof Button>,
   React.ComponentProps<typeof Button>
 >(({ className, onClick, ...props }, ref) => {
-  const { toggleSidebar } = useSidebar()
+  const { toggleSidebar, openMobile } = useSidebar()
   const mod = useShortcutModLabel()
   const isMobile = useIsMobile()
-  const hint = isMobile ? "Toggle sidebar" : `Toggle sidebar (${mod}+B)`
+  const desktopHint = `Toggle sidebar (${mod}+B)`
+
+  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+    onClick?.(event)
+    toggleSidebar()
+  }
+
+  const buttonClass = cn("h-7 w-7", className)
+
+  if (isMobile) {
+    return (
+      <Button
+        ref={ref}
+        data-sidebar="trigger"
+        variant="ghost"
+        size="icon"
+        className={buttonClass}
+        onClick={handleClick}
+        {...props}
+      >
+        <Menu className="h-4 w-4" />
+        <span className="sr-only">{openMobile ? "Close menu" : "Open menu"}</span>
+      </Button>
+    )
+  }
 
   return (
     <Tooltip delayDuration={400}>
@@ -340,19 +364,16 @@ const SidebarTrigger = React.forwardRef<
           data-sidebar="trigger"
           variant="ghost"
           size="icon"
-          className={cn("h-7 w-7", className)}
-          onClick={(event) => {
-            onClick?.(event)
-            toggleSidebar()
-          }}
+          className={buttonClass}
+          onClick={handleClick}
           {...props}
         >
-          <PanelLeft />
-          <span className="sr-only">{hint}</span>
+          <PanelLeft className="h-4 w-4" />
+          <span className="sr-only">{desktopHint}</span>
         </Button>
       </TooltipTrigger>
       <TooltipContent side="bottom" align="center" sideOffset={6} className="max-w-[16rem]">
-        {hint}
+        {desktopHint}
       </TooltipContent>
     </Tooltip>
   )
@@ -606,7 +627,7 @@ const SidebarMenuItem = React.forwardRef<
 SidebarMenuItem.displayName = "SidebarMenuItem"
 
 const sidebarMenuButtonVariants = cva(
-  "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[&_[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-muted-foreground [&>svg]:opacity-70 data-[active=true]:[&>svg]:text-sidebar-accent-foreground data-[active=true]:[&>svg]:opacity-100 hover:[&>svg]:text-sidebar-accent-foreground hover:[&>svg]:opacity-100",
+  "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[&_[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-muted-foreground [&>svg]:opacity-70 data-[active=true]:[&>svg]:text-sidebar-accent-foreground data-[active=true]:[&>svg]:opacity-100 hover:[&>svg]:text-sidebar-accent-foreground hover:[&>svg]:opacity-100 group-data-[state=collapsed]:group-data-[collapsible=icon]:justify-center group-data-[state=collapsed]:group-data-[collapsible=icon]:[&>span]:hidden",
   {
     variants: {
       variant: {