Support mirrored navbar

Author: guan404ming

airflow-core/src/airflow/ui/src/layouts/BaseLayout.tsx

@@ -34,7 +34,7 @@ export const BaseLayout = ({ children }: PropsWithChildren) => {
   return (
     <>
       <Nav />
-      <Box display="flex" flexDirection="column" h="100vh" ml={20} p={3}>
+      <Box _ltr={{ ml: 20 }} _rtl={{ mr: 20 }} display="flex" flexDirection="column" h="100vh" p={3}>
         {children ?? <Outlet />}
       </Box>
     </>

airflow-core/src/airflow/ui/src/layouts/Nav/Nav.tsx

@@ -40,11 +40,18 @@ export const Nav = () => {
 
   return (
     <VStack
+      _ltr={{
+        left: 0,
+        right: "auto",
+      }}
+      _rtl={{
+        left: "auto",
+        right: 0,
+      }}
       alignItems="center"
       bg="blue.muted"
       height="100%"
       justifyContent="space-between"
-      left={0}
       position="fixed"
       py={3}
       top={0}