mirror of
https://github.com/temetro/temetro.git
synced 2026-07-26 11:58:14 +00:00
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:
@@ -31,8 +31,7 @@ export function DashboardSidebar() {
|
||||
const { t, i18n } = useTranslation();
|
||||
// Anchor the sidebar to the right for RTL locales (Arabic) so the whole shell
|
||||
// mirrors instead of leaving the fixed sidebar pinned physically left.
|
||||
const isRtl = dirFor(i18n.language) === "rtl";
|
||||
const side = isRtl ? "right" : "left";
|
||||
const side = dirFor(i18n.language) === "rtl" ? "right" : "left";
|
||||
const role = useActiveRole();
|
||||
const { allowed: aiAllowed } = useAiAccess();
|
||||
const isCollapsed = state === "collapsed";
|
||||
@@ -65,11 +64,7 @@ export function DashboardSidebar() {
|
||||
"flex md:pt-3.5",
|
||||
isCollapsed
|
||||
? "flex-row items-center justify-between gap-y-4 md:flex-col md:items-start md:justify-start"
|
||||
: "flex-row items-center justify-between",
|
||||
// RTL (Arabic): stack the logo and the toggle/bell controls into a
|
||||
// right-aligned column so the collapse arrow sits ABOVE the nav icons
|
||||
// instead of being pinned to the opposite (left) edge.
|
||||
isRtl && !isCollapsed && "flex-col items-end justify-start gap-y-3"
|
||||
: "flex-row items-center justify-between"
|
||||
)}
|
||||
>
|
||||
<Tooltip>
|
||||
|
||||
@@ -15,7 +15,6 @@ import {
|
||||
MenuSeparator,
|
||||
MenuTrigger,
|
||||
} from "@/components/ui/menu";
|
||||
import { dirFor } from "@/lib/i18n/config";
|
||||
import { markNotificationRead, notificationHref } from "@/lib/notifications";
|
||||
import { useNotifications } from "@/lib/use-notifications";
|
||||
|
||||
@@ -31,11 +30,9 @@ function relativeTime(iso: string): string {
|
||||
}
|
||||
|
||||
export function NotificationsPopover() {
|
||||
const { t, i18n } = useTranslation();
|
||||
const { t } = useTranslation();
|
||||
const router = useRouter();
|
||||
const { items, unread, markAllRead } = useNotifications();
|
||||
// Open toward the content side; flips to the left under RTL.
|
||||
const popupSide = dirFor(i18n.language) === "rtl" ? "left" : "right";
|
||||
|
||||
return (
|
||||
<Menu
|
||||
@@ -61,7 +58,7 @@ export function NotificationsPopover() {
|
||||
</span>
|
||||
)}
|
||||
</MenuTrigger>
|
||||
<MenuPopup side={popupSide} className="my-6 w-80">
|
||||
<MenuPopup side="right" className="my-6 w-80">
|
||||
<MenuGroup>
|
||||
<MenuGroupLabel>{t("nav.notifications")}</MenuGroupLabel>
|
||||
</MenuGroup>
|
||||
|
||||
@@ -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",
|
||||
|
||||
Reference in New Issue
Block a user