Merge pull request #33 from a28028/main

enable RTL(Right to Left)

Author: lannodev

package-lock.json

@@ -12,7 +12,7 @@
   <!-- Dropdown -->
   <div
     [@openClose]="isOpen ? 'open' : 'closed'"
-    class="bg-background shadow-custom absolute right-0 z-20 mt-2 w-60 origin-top-right transform rounded-md py-4 ring-1 ring-transparent ring-opacity-5 transition focus:outline-hidden">
+    class="bg-background shadow-custom absolute ltr:right-0 rtl:left-0 z-20 mt-2 w-60 origin-top-right transform rounded-md py-4 ring-1 ring-transparent ring-opacity-5 transition focus:outline-hidden">
     <div class="flext-row flex items-center px-4 pb-4">
       <div class="w-10 shrink-0">
         <img class="rounded-md" src="https://avatars.githubusercontent.com/u/12519008?v=4" alt="" />
@@ -48,7 +48,7 @@
           class="focus-visible:ring-ring border-border bg-background text-muted-foreground hover:bg-card hover:text-foreground shadow-xs inline-flex h-8 cursor-pointer items-center justify-start whitespace-nowrap rounded-md border px-3 text-xs font-medium transition-colors focus-visible:outline-hidden focus-visible:ring-1 disabled:pointer-events-none disabled:opacity-50">
           <span
             [style.backgroundColor]="item.code"
-            class="mr-1 flex h-5 w-5 shrink-0 -translate-x-1 items-center justify-center rounded-full bg-rose-500"></span>
+            class="me-1.5 flex h-5 w-5 shrink-0 -translate-x-1 items-center justify-center rounded-full bg-rose-500"></span>
           <p class="capitalize">{{ item.name }}</p>
         </div>
         }

src/app/modules/layout/components/navbar/profile-menu/profile-menu.component.html

@@ -29,17 +29,18 @@
             class="text-muted-foreground hover:bg-card hover:text-foreground flex h-9 cursor-pointer items-center justify-start rounded-sm">
             <a
               routerLinkActive="text-primary"
-              class="ml-10 truncate text-xs font-semibold tracking-wide focus:outline-hidden">
+              class="ms-10 truncate text-xs font-semibold tracking-wide focus:outline-hidden">
               {{ item.label }}
             </a>
           </div>
         </ng-template>
 
         <!-- Workaround:: Disable routerLink -->
         <ng-template #childMenu let-item="item">
-          <div class="hover:bg-card flex h-9 cursor-pointer items-center justify-start rounded-sm">
+          <div class="hover:bg-card flex h-9 cursor-pointer items-center justify-start rounded-sm 
+          ">
             <a
-              class="text-muted-foreground group-hover:text-foreground ml-10 truncate text-xs font-semibold tracking-wide focus:outline-hidden">
+              class="text-muted-foreground group-hover:text-foreground ms-10 truncate text-xs font-semibold tracking-wide focus:outline-hidden">
               {{ item.label }}
             </a>
           </div>
@@ -48,9 +49,9 @@
         <!-- Arrow Icon -->
         <button
           *ngIf="item.children"
-          [ngClass]="{ hidden: !menuService.showSideBar, 'rotate-90': item.expanded }"
-          class="text-muted-foreground/50 pointer-events-none absolute top-1 right-0 flex items-center p-1 transition-all duration-500">
-          <svg-icon src="assets/icons/heroicons/solid/chevron-right.svg" [svgClass]="'h-5 w-5'"> </svg-icon>
+          [ngClass]="{ hidden: !menuService.showSideBar, 'ltr:rotate-90 rtl:rotate-[-90deg]': item.expanded }"
+          class="text-muted-foreground/50 pointer-events-none absolute top-1 ltr:right-0 rtl:left-0  flex items-center p-1 transition-all duration-500">
+          <svg-icon src="assets/icons/heroicons/solid/chevron-right.svg" [svgClass]="'h-5 w-5 rtl:rotate-180'"> </svg-icon>
         </button>
 
         <!-- Tooltip -->

src/app/modules/layout/components/sidebar/sidebar-menu/sidebar-menu.component.html

@@ -1,7 +1,7 @@
 <div
-  class="max-h-0 overflow-hidden pt-1 pl-4 transition-all duration-500"
+  class="max-h-0 overflow-hidden pt-1 ps-4 transition-all duration-500"
   [ngClass]="{ hidden: !menuService.showSideBar, 'max-h-screen': submenu.expanded }">
-  <ul class="border-border text-muted-foreground flex flex-col border-l border-dashed pl-2">
+  <ul class="border-border text-muted-foreground flex flex-col ltr:border-l rtl:border-r border-dashed ps-2">
     <li *ngFor="let sub of submenu.children">
       <div class="text-muted-foreground hover:bg-card hover:text-foreground flex rounded-sm" (click)="toggleMenu(sub)">
         <!-- Condition -->

src/app/modules/layout/components/sidebar/sidebar-submenu/sidebar-submenu.component.html

@@ -10,13 +10,13 @@
           class="bg-primary flex cursor-pointer items-center justify-center rounded-sm p-2 focus:outline-hidden focus:ring-1">
           <svg-icon src="assets/icons/logo.svg"> </svg-icon>
         </a>
-        <b class="text-foreground ml-1 pl-2 text-sm font-bold">
+        <b class="text-foreground ml-1 ps-2 text-sm font-bold">
           {{ appJson.displayName }}
         </b>
       </div>
       <button
         (click)="toggleSidebar()"
-        class="text-muted-foreground/50 hover:text-muted-foreground absolute top-2 right-2 flex h-5 w-5 items-center justify-center rounded-sm transition-all duration-200 focus:outline-hidden"
+        class="text-muted-foreground/50 hover:text-muted-foreground absolute top-2 rtl:left-2 ltr:right-2 flex h-5 w-5 items-center justify-center rounded-sm transition-all duration-200 focus:outline-hidden"
         [ngClass]="{ 'rotate-180': !menuService.showSideBar }">
         <svg-icon src="assets/icons/heroicons/solid/chevron-double-left.svg"> </svg-icon>
       </button>

src/app/modules/layout/components/sidebar/sidebar.component.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" data-theme="base">
+<html lang="en" data-theme="base" dir="rtl">
   <head>
     <meta charset="utf-8" />
     <title>Angular Tailwind</title>