fix(NavigationMenu): improve RTL support for viewport and indicator

[al1maher]

🔗 Linked issue

Resolves #6162

❓ Type of change

• 📖 Documentation (updates to the documentation or readme)
• 🐞 Bug fix (a non-breaking change that fixes an issue)
• 👌 Enhancement (improving an existing functionality)
• ✨ New feature (a non-breaking change that adds functionality)
• 🧹 Chore (updates to the build process or auxiliary tools and libraries)
• ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

vertical mode in content orientation lacked rtl support so I added it by mirroring the position of the viewport in case of rtl: class

• I have linked an issue or discussion.
• I have updated the documentation accordingly.

[al1maher]

I think the ideal way is to reiterate over RekaUI and enhance RTL support in general, or may be in NuxtUI through adding rtl like in this case?

[coderabbitai]

📝 Walkthrough

Walkthrough

The navigation menu theme file was modified to adjust viewport and indicator/arrow CSS classes: transition utilities now include right-side transitions, z-index tokens changed from bracketed to numeric forms, indicator positioning normalized to left-0, and arrow z-index reduced. RTL support was added for vertical contentOrientation via rtl:left-auto and rtl:right-[calc(100%-var(--reka-navigation-menu-viewport-left)-var(--reka-navigation-menu-viewport-width))]. No exported/public API signatures were changed.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description check	✅ Passed	The description is related to the changeset, explaining that RTL support was added for vertical content orientation by mirroring viewport position using rtl: class.
Linked Issues check	✅ Passed	The code changes directly address the linked issue #6162 by adding RTL viewport positioning for vertical content orientation, ensuring content appears below the trigger in RTL layouts.
Out of Scope Changes check	✅ Passed	All changes are scoped to fixing RTL support in NavigationMenu's vertical content orientation; no extraneous modifications detected.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Title check	✅ Passed	The title accurately describes the main change: fixing RTL support for the NavigationMenu viewport and indicator, which matches the core objective of addressing RTL positioning issues.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

📝 Coding Plan

• Generate coding plan for human review comments

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

Tip

You can make CodeRabbit's review stricter and more nitpicky using the `assertive` profile, if that's what you prefer.

Change the reviews.profile setting to assertive to make CodeRabbit's nitpick more issues in your PRs.

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@src/theme/navigation-menu.ts`:
- Around line 79-81: The new variant entry for the navigation menu under the
viewport key has mixed quote styles and trailing commas causing lint failures;
update the viewport string to use the project's preferred single-quote style and
remove the trailing comma(s) so the object entry matches surrounding entries
(look for the viewport property in src/theme/navigation-menu.ts and adjust its
value string and punctuation to eliminate the double quotes and trailing comma).

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: f36ce952-a521-402f-bd4e-f29a665ad399

📥 Commits

Reviewing files that changed from the base of the PR and between 91c6356 and e9bbc82.

📒 Files selected for processing (1)

• src/theme/navigation-menu.ts

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@src/theme/navigation-menu.ts`:
- Around line 79-80: The viewport utility string in src/theme/navigation-menu.ts
was expanded to include RTL classes ('rtl:[left:auto]' and
'rtl:[right:calc(100%-var(--reka-navigation-menu-viewport-left)-var(--reka-navigation-menu-viewport-width))]'),
so update the Jest/Vue snapshot tests to reflect that change: regenerate the
snapshots at test/components/__snapshots__/NavigationMenu.spec.ts.snap and
test/components/__snapshots__/NavigationMenu-vue.spec.ts.snap (the "with content
orientation vertical" test around line 221) so the viewport element includes the
new RTL class tokens; run the tests to refresh the snapshots and commit the
updated .snap files.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 1f5d46a9-1c11-4c11-bb45-bd31f3821862

📥 Commits

Reviewing files that changed from the base of the PR and between e9bbc82 and 93ac62b.

📒 Files selected for processing (1)

• src/theme/navigation-menu.ts

[pkg-pr-new]

npm i https://pkg.pr.new/@nuxt/ui@6164

commit: 281c9fa