feat(ui): disable menu buttons with locked param (#1332)

* feat: add lock icon when param `locked=true`

* chore: move `isViewLocked` logic up the component tree

* chore: remove extra container from lock icon

* chore: move fading logic into separate hook

* chore: move locked icon into separate component

* chore: rename variables

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

@@ -2,13 +2,18 @@ import { memo, useCallback } from 'react';
 import { useSearchParams } from 'react-router-dom';
 import { useDisclosure } from '@chakra-ui/react';
 
+import { isStringBoolean } from '../../../features/viewers/common/viewUtils';
+
 import FloatingNavigation from './FloatingNavigation';
 import NavigationMenu from './NavigationMenu';
+import ViewLockedIcon from './ViewLockedIcon';
 
 function ViewNavigationMenu() {
   const [searchParams, setSearchParams] = useSearchParams();
   const { isOpen: isMenuOpen, onOpen: onMenuOpen, onClose: onMenuClose } = useDisclosure();
 
+  const isViewLocked = isStringBoolean(searchParams.get('locked'));
+
   const showEditFormDrawer = useCallback(() => {
     searchParams.set('edit', 'true');
     setSearchParams(searchParams);
@@ -16,6 +21,10 @@ function ViewNavigationMenu() {
 
   const toggleMenu = () => (isMenuOpen ? onMenuClose() : onMenuOpen());
 
+  if (isViewLocked) {
+    return <ViewLockedIcon />;
+  }
+
   return (
     <>
       <FloatingNavigation toggleMenu={toggleMenu} toggleSettings={showEditFormDrawer} />