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,15 +34,19 @@ const QuickSettingsButton = ({ application }: Props) => {
   return (
     <>
       <StyledTooltip label="Open quick settings menu">
-        <button
+        {isMobileNavigation ? (
-          onClick={toggleMenu}
+          <RoundIconButton className="ml-2.5 bg-default" onClick={toggleMenu} label="Go to vaults menu" icon="themes" />
-          className="flex h-full w-8 cursor-pointer items-center justify-center"
+        ) : (
-          ref={buttonRef}
+          <button
-        >
+            onClick={toggleMenu}
-          <div className="h-5">
+            className="flex h-full w-8 cursor-pointer items-center justify-center"
-            <Icon type="themes" className={classNames(isOpen && 'text-info', 'rounded hover:text-info')} />
+            ref={buttonRef}
-          </div>
+          >
-        </button>
+            <div className="h-5">
+              <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,22 +23,35 @@ 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 ? (
-          <div className="flex items-center">
+          <RoundIconButton
-            <Icon
+            className="ml-2.5 bg-default"
-              type="safe-square"
+            onClick={toggleMenu}
-              className={classNames(
+            label="Go to vaults menu"
-                isOpen ? 'text-info' : exclusivelyShownVault ? 'text-success' : '',
+            icon="safe-square"
-                'rounded hover:text-info',
+          />
+        ) : (
+          <button
+            onClick={toggleMenu}
+            className="flex h-full cursor-pointer items-center justify-center"
+            ref={buttonRef}
+          >
+            <div className="flex items-center">
+              <Icon
+                type="safe-square"
+                className={classNames(
+                  isOpen ? 'text-info' : exclusivelyShownVault ? 'text-success' : '',
+                  'rounded hover:text-info',
+                )}
+              />
+              {exclusivelyShownVault && (
+                <div className={classNames('ml-1 text-xs font-bold', isOpen && 'text-info')}>
+                  {exclusivelyShownVault.name}
+                </div>
               )}
-            />
+            </div>
-            {exclusivelyShownVault && (
+          </button>
-              <div className={classNames('ml-1 text-xs font-bold', isOpen && 'text-info')}>
+        )}
-                {exclusivelyShownVault.name}
-              </div>
-            )}
-          </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>