Как установить TranslateX на основе атрибута dir ? ⇐ CSS

[Anonymous]

Я сделал боковую панель, которая сворачивается/открывается с анимацией. Сайт может иметь RTL или LTR.

Код: Выделить всё

.sidebar {
max-width: 380px;
width: 85%;
height: 100%;
position: fixed;
z-index: 100;
top: 0;
inset-inline-start: 0;
padding: 10px 20px;
transform: translateX(100%);
transition: transform 0.3s ease;

}

Для веб-сайта RTL я могу использовать:

Код: Выделить всё

transform: translateX(100%);

и он скроет его, но в LTR он переместит его вправо с левой стороны.
Я использовал inset-inline-start вместо вправо/влево.
Как я могу затем использовать TranslateX, чтобы скрыть боковую панель независимо от атрибута dir, чтобы в RTL она скрывалась справа, а в LTR - влево.
/>Я мог бы использовать некоторые настройки вручную, например:

Код: Выделить всё

:root {
--sidebar-translate: -100%; /* move left off-screen */
}

/* RTL override */
:dir(rtl) {
--sidebar-translate: 100%; /* move right off-screen */
}

а затем:

Код: Выделить всё

transform: translateX(var(--sidebar-translate));

Но, может быть, есть лучший/более чистый способ?

Подробнее здесь: https://stackoverflow.com/questions/798 ... -attribute