mirror of
https://github.com/AmruthPillai/Reactive-Resume.git
synced 2026-07-27 18:34:51 +10:00
Improved the Right to Left Direction implementation for relevant languages. (#2583)
* Added support for right to left direction of bullet points in the page render and text editor * Added right to left direction support by adding a toggle button in the layout and enhancing the css element of the page render to support it without affecting the default left to right direction * Moved the Right to Life Direction Toggle feature to be integrated with the Languages section using locale * change all occurrances of pl, pr, ml, mr, left, right to start/end equivalents --------- Co-authored-by: Amruth Pillai <im.amruth@gmail.com>
This commit is contained in:
@@ -11,7 +11,7 @@ type Props = {
|
||||
export function DashboardHeader({ title, icon: IconComponent, className }: Props) {
|
||||
return (
|
||||
<div className={cn("relative flex items-center justify-center gap-x-2.5 md:justify-start", className)}>
|
||||
<SidebarTrigger className="absolute left-0 md:hidden" />
|
||||
<SidebarTrigger className="absolute start-0 md:hidden" />
|
||||
<IconComponent weight="light" className="size-5" />
|
||||
<h1 className="font-medium text-xl tracking-tight">{title}</h1>
|
||||
</div>
|
||||
|
||||
@@ -95,7 +95,7 @@ function SidebarItemList({ items }: SidebarItemListProps) {
|
||||
<SidebarMenuButton asChild title={i18n.t(item.label)}>
|
||||
<Link to={item.href} activeProps={{ className: "bg-sidebar-accent" }}>
|
||||
{item.icon}
|
||||
<span className="shrink-0 transition-[margin,opacity] duration-200 ease-in-out group-data-[collapsible=icon]:-ml-8 group-data-[collapsible=icon]:opacity-0">
|
||||
<span className="shrink-0 transition-[margin,opacity] duration-200 ease-in-out group-data-[collapsible=icon]:-ms-8 group-data-[collapsible=icon]:opacity-0">
|
||||
{i18n.t(item.label)}
|
||||
</span>
|
||||
</Link>
|
||||
@@ -161,7 +161,7 @@ export function DashboardSidebar() {
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
|
||||
<div className="transition-[margin,opacity] duration-200 ease-in-out group-data-[collapsible=icon]:-ml-8 group-data-[collapsible=icon]:opacity-0">
|
||||
<div className="transition-[margin,opacity] duration-200 ease-in-out group-data-[collapsible=icon]:-ms-8 group-data-[collapsible=icon]:opacity-0">
|
||||
<p className="font-medium">{session.user.name}</p>
|
||||
<p className="text-muted-foreground text-xs">{session.user.email}</p>
|
||||
</div>
|
||||
|
||||
@@ -73,7 +73,7 @@ function RouteComponent() {
|
||||
|
||||
<Separator />
|
||||
|
||||
<div className="flex items-center">
|
||||
<div className="flex items-center gap-x-4">
|
||||
<Combobox
|
||||
value={sort}
|
||||
options={sortOptions}
|
||||
@@ -116,7 +116,7 @@ function RouteComponent() {
|
||||
}}
|
||||
/>
|
||||
|
||||
<Tabs className="ml-auto" value={view} onValueChange={onViewChange}>
|
||||
<Tabs className="ltr:ms-auto rtl:me-auto" value={view} onValueChange={onViewChange}>
|
||||
<TabsList>
|
||||
<TabsTrigger value="grid" className="rounded-r-none">
|
||||
<GridFourIcon />
|
||||
|
||||
@@ -29,7 +29,7 @@ function RouteComponent() {
|
||||
<SidebarProvider open={sidebarState} onOpenChange={handleSidebarOpenChange}>
|
||||
<DashboardSidebar />
|
||||
|
||||
<main className="@container flex-1 p-4 md:pl-2">
|
||||
<main className="@container flex-1 p-4 md:ps-2">
|
||||
<Outlet />
|
||||
</main>
|
||||
</SidebarProvider>
|
||||
|
||||
@@ -104,7 +104,7 @@ function PasskeyItem({ passkey }: PasskeyItemProps) {
|
||||
<TrashSimpleIcon />
|
||||
</Button>
|
||||
|
||||
<span className="mx-2 truncate text-nowrap border-r pr-2 font-medium">{passkey.name ?? "1Password"}</span>
|
||||
<span className="mx-2 truncate text-nowrap border-r pe-2 font-medium">{passkey.name ?? "1Password"}</span>
|
||||
|
||||
<span className="flex-1 truncate text-nowrap text-muted-foreground text-xs">
|
||||
<Trans>Added on {passkey.createdAt.toLocaleDateString()}</Trans>
|
||||
|
||||
Reference in New Issue
Block a user