From 22390592eb1164289e3446620795f90e34e75005 Mon Sep 17 00:00:00 2001
From: Amirhossein Khalili <amirhosseinkhalili901@gmail.com>
Date: Sun, 24 May 2026 11:44:02 +0330
Subject: [PATCH] fix(project-rate): add vertical transition on desktop view
 sidebar closing

---
 src/components/rates/WorkspaceRatesPanel.tsx | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/components/rates/WorkspaceRatesPanel.tsx b/src/components/rates/WorkspaceRatesPanel.tsx
index c84d07e..d8f7ac9 100644
--- a/src/components/rates/WorkspaceRatesPanel.tsx
+++ b/src/components/rates/WorkspaceRatesPanel.tsx
@@ -20,6 +20,7 @@ export function WorkspaceRatesPanel({
   const { t, lang } = useTranslation();
   const [shouldRender, setShouldRender] = useState(open);
   const [isVisible, setIsVisible] = useState(open);
+  const isRtl = lang === "fa";
 
   useEffect(() => {
     let timeoutId: ReturnType<typeof setTimeout> | null = null;
@@ -44,7 +45,11 @@ export function WorkspaceRatesPanel({
   }
 
   return (
-    <div className="fixed inset-0 z-[80] flex items-end lg:items-stretch lg:justify-end">
+    <div
+      className={`fixed inset-0 z-[80] flex items-end lg:items-stretch ${
+        isRtl ? "lg:justify-start" : "lg:justify-end"
+      }`}
+    >
       <button
         type="button"
         className={`absolute inset-0 cursor-pointer bg-slate-950/40 backdrop-blur-[2px] transition-opacity duration-300 ${
@@ -54,8 +59,12 @@ export function WorkspaceRatesPanel({
         aria-label="Close rates panel"
       />
       <aside
-        className={`relative z-10 flex max-h-[88vh] w-full flex-col rounded-t-[2rem] bg-white shadow-2xl transition-transform duration-300 ease-out dark:bg-slate-950 lg:h-full lg:max-h-none lg:w-[34rem] lg:rounded-none lg:border-l lg:border-slate-800 ${
-          isVisible ? "translate-y-0 lg:translate-x-0" : "translate-y-full lg:translate-x-full"
+        className={`relative z-10 flex max-h-[88vh] w-full flex-col rounded-t-[2rem] bg-white shadow-2xl transition-transform duration-300 ease-out dark:bg-slate-950 lg:h-full lg:max-h-none lg:w-[34rem] lg:rounded-none ${
+          isRtl ? "lg:border-r lg:border-slate-800" : "lg:border-l lg:border-slate-800"
+        } ${
+          isVisible
+            ? "translate-y-0 lg:translate-x-0"
+            : `translate-y-full lg:translate-y-0 ${!isRtl ? "lg:-translate-x-full" : "lg:translate-x-full"}`
         }`}
       >
         <div className="flex items-center justify-between border-b border-slate-200 px-5 py-4 dark:border-slate-800">