frontend: fix RTL sidebar group chevron; restore header buttons

- SidebarMenuAction (the expand chevron on Patients/Pharmacy/Messages) used a
  physical right-1, so in Arabic it sat on the right over the icons. Use the
  logical end-1 so it's on the right in English and the left in Arabic, clear of
  the icons.
- Revert the earlier header change: the notification bell and collapse toggle go
  back to their original placement (no RTL column stacking, no mirrored glyph,
  notifications popover back to side="right").

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Khalid Abdi
2026-07-09 01:19:30 +03:00
parent b33561d7e1
commit 143ffc39f1
3 changed files with 6 additions and 15 deletions
+2 -3
View File
@@ -299,8 +299,7 @@ export function SidebarTrigger({
variant="ghost"
{...props}
>
{/* Mirror the panel arrow under RTL so it points toward the sidebar edge. */}
<PanelLeftIcon className="rtl:rotate-180" />
<PanelLeftIcon />
<span className="sr-only">Toggle Sidebar</span>
</Button>
);
@@ -597,7 +596,7 @@ export function SidebarMenuAction({
}): React.ReactElement {
const defaultProps = {
className: cn(
"absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-lg p-0 text-sidebar-foreground outline-hidden ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg:not([class*='size-'])]:size-4 [&>svg]:shrink-0",
"absolute top-1.5 end-1 flex aspect-square w-5 items-center justify-center rounded-lg p-0 text-sidebar-foreground outline-hidden ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg:not([class*='size-'])]:size-4 [&>svg]:shrink-0",
// Increases the hit area of the button on mobile.
"after:absolute after:-inset-2 md:after:hidden",
"peer-data-[size=sm]/menu-button:top-1",