fix(layout): move mobile sidebar toggle left

src/components/layout/MainLayout.tsx

@@ -74,6 +74,12 @@ const headerIcons = {
       <path d="M4 17h16" />
     </svg>
   ),
+  close: (
+    <svg {...headerIconProps}>
+      <path d="M18 6 6 18" />
+      <path d="m6 6 12 12" />
+    </svg>
+  ),
   chevronLeft: (
     <svg {...headerIconProps}>
       <path d="m14 18-6-6 6-6" />
@@ -465,6 +471,9 @@ export function MainLayout() {
     }
     showNotification(t('notification.data_refreshed'), 'success');
   };
+  const mobileSidebarToggleLabel = sidebarOpen
+    ? t('sidebar.toggle_collapse', { defaultValue: 'Close navigation' })
+    : t('sidebar.toggle_expand', { defaultValue: 'Open navigation' });
 
   return (
     <div className={`app-shell ${sidebarCollapsed ? 'sidebar-is-collapsed' : ''}`}>
@@ -489,17 +498,20 @@ export function MainLayout() {
           {sidebarCollapsed ? headerIcons.chevronRight : headerIcons.chevronLeft}
         </button>
 
-        <div className="header-actions floating-actions">
+        <div className="mobile-sidebar-actions">
           <Button
             className="mobile-menu-btn"
             variant="ghost"
             size="sm"
             onClick={() => setSidebarOpen((prev) => !prev)}
-            title={t('sidebar.toggle_expand', { defaultValue: 'Open navigation' })}
-            aria-label={t('sidebar.toggle_expand', { defaultValue: 'Open navigation' })}
+            title={mobileSidebarToggleLabel}
+            aria-label={mobileSidebarToggleLabel}
           >
-            {headerIcons.menu}
+            {sidebarOpen ? headerIcons.close : headerIcons.menu}
           </Button>
+        </div>
+
+        <div className="header-actions floating-actions">
           <Button
             variant="ghost"
             size="sm"

src/styles/layout.scss

@@ -129,10 +129,10 @@
     }
   }
 
+  .mobile-sidebar-actions,
   .header-actions {
     position: absolute;
     top: var(--shell-gutter);
-    right: var(--shell-gutter);
     display: inline-flex;
     align-items: center;
     gap: 4px;
@@ -150,6 +150,16 @@
     pointer-events: auto;
   }
 
+  .mobile-sidebar-actions {
+    left: var(--shell-gutter);
+    display: none;
+  }
+
+  .header-actions {
+    right: var(--shell-gutter);
+  }
+
+  .mobile-sidebar-actions .btn,
   .header-actions .btn {
     width: var(--floating-control-size);
     height: var(--floating-control-size);
@@ -601,7 +611,18 @@
     .header-actions {
       top: var(--shell-gutter);
       right: var(--shell-gutter);
-      max-width: calc(100vw - var(--shell-gutter) - var(--shell-gutter));
+      max-width: calc(
+        100vw - var(--shell-gutter) - var(--shell-gutter) - var(--floating-control-size) - 14px
+      );
+      padding: 5px;
+      gap: 2px;
+      border-radius: 14px;
+    }
+
+    .mobile-sidebar-actions {
+      display: inline-flex;
+      top: var(--shell-gutter);
+      left: var(--shell-gutter);
       padding: 5px;
       gap: 2px;
       border-radius: 14px;