refactor: improve navigation and settings locks

apps/client/src/common/components/navigation-menu/ViewNavigationMenu.tsx

@@ -8,14 +8,14 @@ import ViewLockedIcon from './view-locked-icon/ViewLockedIcon';
 import NavigationMenu from './NavigationMenu';
 
 interface ViewNavigationMenuProps {
-  /** prevent navigation and settings*/
-  isViewLocked?: boolean;
+  /** prevent navigation */
+  isNavigationLocked?: boolean;
   /** prevent showing settings */
   suppressSettings?: boolean;
 }
 
 export default memo(ViewNavigationMenu);
-function ViewNavigationMenu({ isViewLocked, suppressSettings }: ViewNavigationMenuProps) {
+function ViewNavigationMenu({ isNavigationLocked, suppressSettings }: ViewNavigationMenuProps) {
   const [isMenuOpen, menuHandler] = useDisclosure();
   const { open: showEditFormDrawer } = useViewParamsEditorStore();
 
@@ -23,7 +23,7 @@ function ViewNavigationMenu({ isViewLocked, suppressSettings }: ViewNavigationMe
     [
       'Space',
       () => {
-        if (isViewLocked) return;
+        if (isNavigationLocked) return;
         menuHandler.toggle();
       },
       { preventDefault: true },
@@ -31,24 +31,24 @@ function ViewNavigationMenu({ isViewLocked, suppressSettings }: ViewNavigationMe
     [
       'mod + ,',
       () => {
-        if (isViewLocked || suppressSettings) return;
+        if (suppressSettings) return;
         showEditFormDrawer();
       },
       { preventDefault: true },
     ],
   ]);
 
-  if (isViewLocked) {
+  if (isNavigationLocked && suppressSettings) {
     return <ViewLockedIcon />;
   }
 
   return (
     <>
       <FloatingNavigation
-        toggleMenu={menuHandler.toggle}
-        toggleSettings={suppressSettings ? undefined : () => showEditFormDrawer()}
+        toggleMenu={isNavigationLocked ? undefined : menuHandler.toggle}
+        toggleSettings={suppressSettings ? undefined : showEditFormDrawer}
       />
-      <NavigationMenu isOpen={isMenuOpen} onClose={menuHandler.close} />
+      {!isNavigationLocked && <NavigationMenu isOpen={isMenuOpen} onClose={menuHandler.close} />}
     </>
   );
 }

apps/client/src/common/components/navigation-menu/floating-navigation/FloatingNavigation.tsx

@@ -8,7 +8,7 @@ import IconButton from '../../buttons/IconButton';
 import style from './FloatingNavigation.module.scss';
 
 interface FloatingNavigationProps {
-  toggleMenu: () => void;
+  toggleMenu?: () => void;
   toggleSettings?: () => void;
 }
 
@@ -20,15 +20,17 @@ export default function FloatingNavigation({ toggleMenu, toggleSettings }: Float
       id='fadeable-navigation'
       className={cx([style.fadeable, style.buttonContainer, !isButtonShown && style.hidden])}
     >
-      <IconButton
-        variant='subtle-white'
-        size='xlarge'
-        onClick={toggleMenu}
-        aria-label='toggle menu'
-        data-testid='navigation__toggle-menu'
-      >
-        <IoApps />
-      </IconButton>
+      {toggleMenu && (
+        <IconButton
+          variant='subtle-white'
+          size='xlarge'
+          onClick={toggleMenu}
+          aria-label='toggle menu'
+          data-testid='navigation__toggle-menu'
+        >
+          <IoApps />
+        </IconButton>
+      )}
       {toggleSettings && (
         <IconButton
           variant='subtle-white'