1 files changed, 22 insertions, 9 deletions

diff --git a/packages/renderer/src/components/sidebar/ToggleLocationBarButton.tsx b/packages/renderer/src/components/sidebar/ToggleLocationBarButton.tsx
index 7e20598..60033b0 100644
--- a/packages/renderer/src/components/sidebar/ToggleLocationBarButton.tsx
+++ b/packages/renderer/src/components/sidebar/ToggleLocationBarButton.tsx
@@ -20,12 +20,29 @@
 
 import IconChevronLeft from '@mui/icons-material/KeyboardDoubleArrowLeft';
 import IconChevronRight from '@mui/icons-material/KeyboardDoubleArrowRight';
+import { useTheme } from '@mui/material';
 import CircularProgress from '@mui/material/CircularProgress';
 import IconButton from '@mui/material/IconButton';
 import { observer } from 'mobx-react-lite';
 import React from 'react';
 
 import { useStore } from '../StoreProvider';
+import { LOCATION_BAR_ID } from '../locationBar/LocationBar';
+
+function ToggleLocationBarIcon({
+  loading,
+  show,
+}: {
+  loading: boolean;
+  show: boolean;
+}): JSX.Element {
+  const { direction } = useTheme();
+  if (loading) {
+    return <CircularProgress color="inherit" size="1.5rem" />;
+  }
+  const left = direction === 'ltr' ? show : !show;
+  return left ? <IconChevronLeft /> : <IconChevronRight />;
+}
 
 function ToggleLocationBarButton(): JSX.Element {
   const store = useStore();
@@ -33,21 +50,17 @@ function ToggleLocationBarButton(): JSX.Element {
     settings: { selectedService, showLocationBar },
   } = store;
 
-  let icon: JSX.Element;
-  if (selectedService?.state === 'loading') {
-    icon = <CircularProgress color="inherit" size="1.5rem" />;
-  } else {
-    icon = showLocationBar ? <IconChevronLeft /> : <IconChevronRight />;
-  }
-
   return (
     <IconButton
       aria-pressed={showLocationBar}
-      aria-controls="locationBar"
+      aria-controls={LOCATION_BAR_ID}
       aria-label="Show location bar"
       onClick={() => store.toggleLocationBar()}
     >
-      {icon}
+      <ToggleLocationBarIcon
+        loading={selectedService?.state === 'loading'}
+        show={showLocationBar}
+      />
     </IconButton>
   );
 }