Hi

Please upload the screenshots to imgbb.com, then paste the URL without https.

Make sure your custom RTL CSS is loaded after the main Metronic CSS files to for proper override:

/* Add this to ensure your styles override Metronic defaults */
html[dir="rtl"] #kt_app_sidebar {
 right: 0 !important;
 left: auto !important;
 position: fixed !important;
}

html[dir="rtl"] #kt_app_wrapper {
 margin-left: 0 !important;
 margin-right: var(--bs-app-sidebar-width, 265px) !important;
}

Hi Faizal
i can't insert a screenshot i don't know how
but the problem not solved using your code
i used this in app.component.ts
//=====================
ngOnInit() {
this.modeService.init();
const lang = this.translationService.getSelectedLanguage();

if (lang === 'ar') {
document.documentElement.setAttribute('dir', 'rtl');
document.documentElement.setAttribute('lang', 'ar');
document.getElementById('kt_app_wrapper')?.style.setProperty('margin-left', '0', 'important');
this.setStyle('assets/css/style.rtl.css');
} else {
document.documentElement.setAttribute('dir', 'ltr');
document.documentElement.setAttribute('lang', 'en');
this.setStyle('assets/css/style.css');
}

}
private setStyle(href: string) {
let linkEl = document.getElementById('appStyle') as HTMLLinkElement;
if (!linkEl) {
linkEl = document.createElement('link');
linkEl.rel = 'stylesheet';
linkEl.id = 'appStyle';
document.head.appendChild(linkEl);
}
linkEl.href = href;
  }
//=============
** and put this style
//==============
html[dir="rtl"] {
/* Sidebar */
#kt_app_sidebar {
right: 0 !important;
left: auto !important;
}

#kt_app_wrapper {
margin-left: 0 !important;
margin-right: var(--bs-app-sidebar-width, 265px) !important;
}

/* خلي الهيدر نفسه يمتد يمين */
#kt_app_header {
right: 0 !important;
left: auto !important;
width: calc(100% - var(--bs-app-sidebar-width, 265px)) !important;
margin-right: var(--bs-app-sidebar-width, 265px) !important;
margin-left: 0 !important;
}

/* عدل الكونتينر جوه الهيدر */
#kt_app_header_container {
padding-right: 30px !important;
padding-left: 0 !important;
  }

Hi Mohamed Elyamani

The issue is that Metronic v8's RTL implementation doesn't automatically adjust the sidebar positioning and content wrapper margins. You need to modify your app.component.ts to handle the sidebar positioning for RTL mode properly.
Here's the updated code for your ngOnInit() method:

ngOnInit() {
 this.modeService.init();
 const lang = this.translationService.getSelectedLanguage();

 if (lang === "ar") {
 document.documentElement.setAttribute("dir", "rtl");
 document.documentElement.setAttribute("lang", "ar");
 document.getElementById("kt_app_wrapper")?.style.setProperty("margin-left", "0", "important");
 this.setStyle("assets/css/style.rtl.css");

 // Fix RTL sidebar positioning
 const sidebar = document.getElementById("kt_app_sidebar");
 if (sidebar) {
 sidebar.style.setProperty("right", "0", "important");
 sidebar.style.setProperty("left", "auto", "important");
 }

 // Adjust content wrapper for RTL
 const contentWrapper = document.getElementById("kt_app_wrapper");
 if (contentWrapper) {
 contentWrapper.style.setProperty("margin-right", "0", "important");
 contentWrapper.style.setProperty("margin-left", "auto", "important");
 }
 } else {
 document.documentElement.setAttribute("dir", "ltr");
 document.documentElement.setAttribute("lang", "en");
 this.setStyle("assets/css/style.css");

 // Reset sidebar positioning for LTR
 const sidebar = document.getElementById("kt_app_sidebar");
 if (sidebar) {
 sidebar.style.setProperty("left", "0", "important");
 sidebar.style.setProperty("right", "auto", "important");
 }

 // Reset content wrapper for LTR
 const contentWrapper = document.getElementById("kt_app_wrapper");
 if (contentWrapper) {
 contentWrapper.style.setProperty("margin-left", "0", "important");
 contentWrapper.style.setProperty("margin-right", "auto", "important");
 }
 }
}