chore: fix mobile navigation [skip e2e]

packages/web/src/javascripts/Components/Footer/QuickSettingsButton.tsx

@@ -8,12 +8,14 @@ import Icon from '../Icon/Icon'
 import Popover from '../Popover/Popover'
 import QuickSettingsMenu from '../QuickSettingsMenu/QuickSettingsMenu'
 import StyledTooltip from '../StyledTooltip/StyledTooltip'
+import RoundIconButton from '../Button/RoundIconButton'
 
 type Props = {
   application: WebApplication
+  isMobileNavigation?: boolean
 }
 
-const QuickSettingsButton = ({ application }: Props) => {
+const QuickSettingsButton = ({ application, isMobileNavigation = false }: Props) => {
   const buttonRef = useRef<HTMLButtonElement>(null)
   const commandService = useCommandService()
 
@@ -32,6 +34,9 @@ const QuickSettingsButton = ({ application }: Props) => {
   return (
     <>
       <StyledTooltip label="Open quick settings menu">
+        {isMobileNavigation ? (
+          <RoundIconButton className="ml-2.5 bg-default" onClick={toggleMenu} label="Go to vaults menu" icon="themes" />
+        ) : (
           <button
             onClick={toggleMenu}
             className="flex h-full w-8 cursor-pointer items-center justify-center"
@@ -41,6 +46,7 @@ const QuickSettingsButton = ({ application }: Props) => {
               <Icon type="themes" className={classNames(isOpen && 'text-info', 'rounded hover:text-info')} />
             </div>
           </button>
+        )}
       </StyledTooltip>
       <Popover
         title="Quick settings"

packages/web/src/javascripts/Components/Footer/VaultSelectionButton.tsx

@@ -6,8 +6,9 @@ import StyledTooltip from '../StyledTooltip/StyledTooltip'
 import VaultSelectionMenu from '../VaultSelectionMenu/VaultSelectionMenu'
 import { useApplication } from '../ApplicationProvider'
 import { featureTrunkVaultsEnabled } from '@/FeatureTrunk'
+import RoundIconButton from '../Button/RoundIconButton'
 
-const VaultSelectionButton = () => {
+const VaultSelectionButton = ({ isMobileNavigation = false }: { isMobileNavigation?: boolean }) => {
   const application = useApplication()
   const buttonRef = useRef<HTMLButtonElement>(null)
   const exclusivelyShownVault = application.vaultDisplayService.exclusivelyShownVault
@@ -22,7 +23,19 @@ const VaultSelectionButton = () => {
   return (
     <>
       <StyledTooltip label="Open vault selection menu">
-        <button onClick={toggleMenu} className="flex h-full cursor-pointer items-center justify-center" ref={buttonRef}>
+        {isMobileNavigation ? (
+          <RoundIconButton
+            className="ml-2.5 bg-default"
+            onClick={toggleMenu}
+            label="Go to vaults menu"
+            icon="safe-square"
+          />
+        ) : (
+          <button
+            onClick={toggleMenu}
+            className="flex h-full cursor-pointer items-center justify-center"
+            ref={buttonRef}
+          >
             <div className="flex items-center">
               <Icon
                 type="safe-square"
@@ -38,6 +51,7 @@ const VaultSelectionButton = () => {
               )}
             </div>
           </button>
+        )}
       </StyledTooltip>
       <Popover
         title="Vault options"

packages/web/src/javascripts/Components/Tags/Navigation.tsx

@@ -15,6 +15,8 @@ import { usePaneSwipeGesture } from '../Panes/usePaneGesture'
 import { mergeRefs } from '@/Hooks/mergeRefs'
 import { useAvailableSafeAreaPadding } from '@/Hooks/useSafeAreaPadding'
 import { featureTrunkVaultsEnabled } from '@/FeatureTrunk'
+import QuickSettingsButton from '../Footer/QuickSettingsButton'
+import VaultSelectionButton from '../Footer/VaultSelectionButton'
 
 type Props = {
   application: WebApplication
@@ -128,24 +130,8 @@ const Navigation = forwardRef<HTMLDivElement, Props>(({ application, className,
           label="Go to preferences"
           icon="tune"
         />
-        <RoundIconButton
+        <QuickSettingsButton application={application} isMobileNavigation />
-          className="ml-2.5 bg-default"
+        {featureTrunkVaultsEnabled() && <VaultSelectionButton isMobileNavigation />}
-          onClick={() => {
-            application.quickSettingsMenuController.toggle()
-          }}
-          label="Go to quick settings menu"
-          icon="themes"
-        />
-        {featureTrunkVaultsEnabled() && (
-          <RoundIconButton
-            className="ml-2.5 bg-default"
-            onClick={() => {
-              application.vaultSelectionController.toggle()
-            }}
-            label="Go to vaults menu"
-            icon="safe-square"
-          />
-        )}
       </div>
       {children}
     </div>