Ensures correct margin used on expand/collapse button when in RTL tex…

…t mode (#499) * Documentation updates NavMenu - Add rtl css, add IDisposable to components * Move expand/collapse button to the end * Fix margin on expand/collapse button when switching between RTL and LTR --------- Co-authored-by: Vincent Baaij <[email protected]>
microsoft · Jul 6, 2023 · bb6852c · bb6852c
1 parent 0bd300e
commit bb6852c
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 1 deletion.
diff --git a/examples/FluentUI.Demo.Shared/Microsoft.Fast.Components.FluentUI.xml b/examples/FluentUI.Demo.Shared/Microsoft.Fast.Components.FluentUI.xml
diff --git a/src/Microsoft.Fast.Components.FluentUI/Components/NavMenu/FluentNavMenu.razor.css b/src/Microsoft.Fast.Components.FluentUI/Components/NavMenu/FluentNavMenu.razor.css
@@ -67,10 +67,11 @@
 ::deep .navmenu-group::part(expand-collapse-button) {
     left: unset;
     right: 0;
-    margin-right: calc(var(--expand-collapse-button-size) * -1);
+    margin-inline-end: calc(var(--expand-collapse-button-size) * -1 + (var(--design-unit) * 2px));
 }
 
 [dir="rtl"] * ::deep .navmenu-group.nested::part(expand-collapse-button) {
     left: 0;
     right: unset;
+    margin-inline-start: calc(var(--expand-collapse-button-size) - (var(--design-unit) * 2px));
 }