fix(NavigationMenu): handle NavigationMenu in RTL mode

playground/app/pages/components/navigation-menu.vue

@@ -99,7 +99,7 @@ const items = [
       :orientation="orientation"
       :highlight="highlight"
       :highlight-color="highlightColor"
-      :class="highlight && 'data-[orientation=horizontal]:border-b data-[orientation=vertical]:border-l border-[var(--ui-border)]'"
+      :class="highlight && 'data-[orientation=horizontal]:border-b data-[orientation=vertical]:border-s border-[var(--ui-border)]'"
     />
   </div>
 </template>

src/theme/navigation-menu.ts

@@ -17,7 +17,7 @@ export default (options: Required<ModuleOptions>) => ({
     linkLabelExternalIcon: 'size-3 align-top text-[var(--ui-text-dimmed)]',
     childList: '',
     childItem: '',
-    childLink: 'group size-full px-3 py-2 rounded-[calc(var(--ui-radius)*1.5)] flex items-start gap-2 text-left',
+    childLink: 'group size-full px-3 py-2 rounded-[calc(var(--ui-radius)*1.5)] flex items-start gap-2 text-start',
     childLinkWrapper: 'flex flex-col items-start',
     childLinkIcon: 'size-5 shrink-0',
     childLinkLabel: 'font-semibold text-sm relative inline-flex',
@@ -61,8 +61,8 @@ export default (options: Required<ModuleOptions>) => ({
       vertical: {
         root: 'flex-col',
         link: 'flex-row px-2.5 py-1.5 before:inset-y-px before:inset-x-0',
-        childList: 'ml-5 border-l border-[var(--ui-border)]',
-        childItem: 'pl-1.5 -ml-px'
+        childList: 'ms-5 border-s border-[var(--ui-border)]',
+        childItem: 'ps-1.5 -ms-px'
       }
     },
     active: {
@@ -97,8 +97,8 @@ export default (options: Required<ModuleOptions>) => ({
     highlight: true,
     orientation: 'vertical',
     class: {
-      item: 'px-1.5 -ml-px',
-      link: 'after:absolute after:-left-1.5 after:inset-y-0.5 after:block after:w-px after:rounded-full'
+      item: 'px-1.5 -ms-px',
+      link: 'after:absolute after:-start-1.5 after:inset-y-0.5 after:block after:w-px after:rounded-full'
     }
   }, {
     disabled: false,