The sidebar component does not support RTL

[aligjahed]

Summary

Having direction: rtl; in the body breaks sidebar animation

Steps to Reproduce

1. Copy "content push" side bar from preline ui docs
2. Paste it in a html
3. add dir="rtl" to the html or direction:rtl; to the body style

Demo Link

https://stackblitz.com/edit/vitejs-vite-umxbmzea?file=index.html

Expected Behavior

When adding direction: rtl; to the body or dir='rtl' to the html tag it's expected that the animation also follows the other parts of the side bar and become RTL.

Actual Behavior

Instead the animation breaks when opening the menu on mobile devices. it first snaps to the left and then gradually moves right

Screenshots

No response

[aligjahed]

The solution to this problem was fairly simple. i tried to create a PR for a fix but realized this is not the repo for components! anyway, in the sidebar class we have this:

hs-overlay-open:translate-x-0 -translate-x-full

which works just fine for LTR but not for RTL. to fix it we have to invert translate for respective mode. we have to invert the -translate-x-full.

so this part of the class should be replaced with this ( at least this is what i came up with and it worked just fine ):

hs-overlay-open:translate-x-0 ltr:-translate-x-full rtl:translate-x-full

the final class for div with id "hs-sidebar-content-push" in the docs will look like this:
hs-overlay [--auto-close:lg] lg:block lg:translate-x-0 lg:start-auto lg:bottom-0 w-64 hs-overlay-open:-translate-x-0 translate-x-full transition-all duration-300 transform h-full hidden fixed top-0 start-0 bottom-0 z-[60] bg-white border-e border-gray-200

here's the screenshot of the modified component ( only the sidebar ):

[michaelnabil230]

Hello, @aligjahed

I fixed this issue by adding the following in app.css:

.translate-aside {
    @apply -translate-x-full rtl:translate-x-full;
}

Then, add the translate-aside class to your sidebar.

[jahaganiev]

Thanks for the issue and sharing the workarounds!

[michaelnabil230]

Hello @jahaganiev and @aligjahed,
The issue occurred again after upgrading to Tailwind 4.x, and my solution is not working in the same case.

The new solution is:

<aside id="sidebar" class="hs-overlay rtl:translate-x-full ltr:-translate-x-full [--auto-close:lg] hs-overlay-open:translate-x-0 transition-all duration-300 transform w-65 h-full hidden fixed inset-y-0 start-0 z-60 bg-white border-e border-gray-200 lg:block lg:translate-x-0 rtl:lg:translate-x-0 ltr:lg:-translate-x-0 lg:end-auto lg:bottom-0 dark:bg-neutral-800 dark:border-neutral-700">
...
</aside>