Fix ChildItem's padding not being set dynamically.

Signed-off-by: Aliwoto <aminnimaj@gmail.com>
ALiwoto · Feb 3, 2025 · 0190860 · 0190860
1 parent 4a9379a
commit 0190860
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 7 deletions.
diff --git a/src/components/menus/menuItem.tsx b/src/components/menus/menuItem.tsx
@@ -29,8 +29,8 @@ const MenuItemChildren = styled.div<{ $isOpen: boolean }>`
   transition: max-height 0.1s linear;
 `;
 
-const ChildItem = styled.div`
-  padding: 5px ${CurrentAppTranslation.rightPaddingValue} 5px ${CurrentAppTranslation.leftPaddingValue};
+const ChildItem = styled.div<{ $rightPadding: string; $leftPadding: string }>`
+  padding: 5px ${props => props.$rightPadding} 5px ${props => props.$leftPadding};
 `;
 
 interface MenuItemProps {
@@ -63,7 +63,9 @@ const MenuItem: React.FC<MenuItemProps> = ({ ...props }) => {
             {children && (
                 <MenuItemChildren $isOpen={isOpen}>
                     {React.Children.map(children, child => (
-                        <ChildItem>{child}</ChildItem>
+                        <ChildItem 
+                          $leftPadding={CurrentAppTranslation.menuItemLeftPaddingValue}
+                          $rightPadding={CurrentAppTranslation.menuItemRightPaddingValue}>{child}</ChildItem>
                     ))}
                 </MenuItemChildren>
             )}

diff --git a/src/translations/appTranslation.ts b/src/translations/appTranslation.ts
@@ -13,8 +13,8 @@ export class AppTranslationBase {
     justifyContent: TextJustifyContent = "flex-start";
     textAlign: string = "left";
     float: string = "left";
-    leftPaddingValue: string = "20px";
-    rightPaddingValue: string = "0";
+    menuItemLeftPaddingValue: string = "20px";
+    menuItemRightPaddingValue: string = "0";
 
     //#endregion
 

diff --git a/src/translations/faTranslation.ts b/src/translations/faTranslation.ts
@@ -11,8 +11,8 @@ class FaTranslation extends AppTranslationBase {
     justifyContent: TextJustifyContent = "flex-end";
     textAlign: string = "right";
     float: string = "right";
-    leftPaddingValue: string = "0";
-    rightPaddingValue: string = "20px";
+    menuItemLeftPaddingValue: string = "0";
+    menuItemRightPaddingValue: string = "20px";
 
     //#endregion