| 546 | } |
| 547 | |
| 548 | function SidebarMenuAction({ |
| 549 | className, |
| 550 | asChild = false, |
| 551 | showOnHover = false, |
| 552 | ...props |
| 553 | }: React.ComponentProps<"button"> & { |
| 554 | asChild?: boolean |
| 555 | showOnHover?: boolean |
| 556 | }) { |
| 557 | const Comp = asChild ? Slot : "button" |
| 558 | |
| 559 | return ( |
| 560 | <Comp |
| 561 | data-slot="sidebar-menu-action" |
| 562 | data-sidebar="menu-action" |
| 563 | className={cn( |
| 564 | "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0", |
| 565 | // Increases the hit area of the button on mobile. |
| 566 | "after:absolute after:-inset-2 md:after:hidden", |
| 567 | "peer-data-[size=sm]/menu-button:top-1", |
| 568 | "peer-data-[size=default]/menu-button:top-1.5", |
| 569 | "peer-data-[size=lg]/menu-button:top-2.5", |
| 570 | "group-data-[collapsible=icon]:hidden", |
| 571 | showOnHover && |
| 572 | "peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0", |
| 573 | className |
| 574 | )} |
| 575 | {...props} |
| 576 | /> |
| 577 | ) |
| 578 | } |
| 579 | |
| 580 | function SidebarMenuBadge({ |
| 581 | className, |