Hi,

We usually do not confirm the exact ETA on new releases. We have a dynamic RTL/LTR switch implementation task on our to-do list, but we cannot say when it will be ready and released.

Regards,
Lauris Stepanovs,
Keenthemes Support Team

Hi,
Question one :
any update about dynamic RTL/LTR

Question two :
@import "assets/css/style.rtl.css";
@import "assets/sass/style";

I use first import for RTL and second import for LTR
Is there any way to use both dynamically .

Hi Hosam Nouri,

Our dynamic RTL/RTL switch solution is not ready at the moment.

I think you can try to wrap all rtl and ltr styles with some attribute or class and then in your javascript change those attributes depending on the current direction.

Regards,
Lauris Stepanovs,
Keenthemes Support Team

Hi ,
sorry but how I can do this wrap all rtl and ltr ?

Hi Hosam Nouri,

Please note that our Metronic Vue version does not support dynamic direction switch at the moment.

The only working solution we came up with at the moment is the dynamically switched main link tag href attribute.
In src/App.vue remove style imports below:

@import "assets/fonticon/fonticon.css";
@import "assets/sass/plugins";
@import "assets/sass/style";

<link rel="stylesheet" href="/style.bundle.css">

const setRtlMode = () => {
 bodyStore.addBodyClassname("page-loading");
 var link = document.getElementById("main-css");
 link?.setAttribute("href", "/style.bundle.rtl.css");
 document.documentElement.setAttribute("dir", "rtl");
 document.documentElement.setAttribute("direction", "rtl");
 document.documentElement.setAttribute("style", "direction:rtl");
 setTimeout(() => {
 bodyStore.removeBodyClassName("page-loading");
 }, 1000);
 };

 const setLtrMode = () => {
 bodyStore.addBodyClassname("page-loading");
 var link = document.getElementById("main-css");
 document.documentElement.removeAttribute("dir");
 document.documentElement.removeAttribute("direction");
 document.documentElement.removeAttribute("style");
 link?.setAttribute("href", "/style.bundle.css");
 setTimeout(() => {
 bodyStore.removeBodyClassName("page-loading");
 }, 1000);

thanks a lot, it worked for me

Hi Hosam Nouri,

Glad to hear that. All the best with your project!

Regards,
Lauris Stepanovs,
Keenthemes Support Team

Hi ,
the RTL & LTR its working but I have bug
when I update the page ( Ctrl + R ) the main menu hide , then I open the inspect then the main menu display , I don't now why ...
I take the files from metronic 8 html 8.1.6 demo 8
demo8\dist\assets\css
- style.bundle.css
- style.bundle.rtl.css

I used :
Metronic 8
demo 8
version 8.1.6
vite 4.1.4
node 18.14.1

Hi,

Sorry for the late reply.

Unfortunately, we were not able to reproduce this issue. Have you modified anything in our styles?

Regards,
Lauris Stepanovs,
Keenthemes Support Team

Hi,
No I don't modified in files styles
but I generate file styles from metronic html demo 8 V8.1.6 like when you told me before 3 weeks in same this ticket
and I used it in my project
metronic Vue demo 8
the RTL working but I told you what is the issue

Summary of what I want is :
style file working for RTL and LTR English & Arabic languages
My project in vuejs v8.1.6/ demo 8 /metronic 8
Thanks ..

Hi Hosam Nouri,

Thank you for sharing more information with us.

Unfortunately, we still we were not able to reproduce this issue successfully in Metronic v8.1.6.

Do you have any errors in your console?

I would suggest you to inspect your page source code and check if body has class aside-enabled.

Regards,
Lauris Stepanovs,
Keenthemes Support Team

Hi ,
yes has class aside-enabled ,
and no errors in console

Hi Hosam Nouri,

Could you please try to inspect your code in browser and check which styles hides aide menu?

Regards,
Lauris Stepanovs,
Keenthemes Support Team

we are all expecting it. please hurry!