Qlockify/qlockify-frontend-deployment
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(project-rate): add vertical transition on desktop view sidebar closing
Some checks failed
Frontend CI/CD / build (push) Has been cancelled
Details
Frontend CI/CD / deploy (push) Has been cancelled
Details

Browse Source
This commit is contained in:
Amirhossein Khalili
2026-05-24 11:44:02 +03:30
parent eb41c8528d
commit 22390592eb
1 changed files with 12 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
src/components/rates/WorkspaceRatesPanel.tsx
View File

@@ -20,6 +20,7 @@ export function WorkspaceRatesPanel({
const { t, lang } = useTranslation(); const { t, lang } = useTranslation();
const [shouldRender, setShouldRender] = useState(open); const [shouldRender, setShouldRender] = useState(open);
const [isVisible, setIsVisible] = useState(open); const [isVisible, setIsVisible] = useState(open);
const isRtl = lang === "fa";
useEffect(() => { useEffect(() => {
let timeoutId: ReturnType<typeof setTimeout> | null = null; let timeoutId: ReturnType<typeof setTimeout> | null = null;
@@ -44,7 +45,11 @@ export function WorkspaceRatesPanel({
} }
return ( 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 <button
type="button" type="button"
className={`absolute inset-0 cursor-pointer bg-slate-950/40 backdrop-blur-[2px] transition-opacity duration-300 ${ 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" aria-label="Close rates panel"
/> />
<aside <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 ${ 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 ${
isVisible ? "translate-y-0 lg:translate-x-0" : "translate-y-full lg:translate-x-full" 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"> <div className="flex items-center justify-between border-b border-slate-200 px-5 py-4 dark:border-slate-800">