refactor: editor responsive navigation

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

@@ -9,10 +9,11 @@ import useViewEditor from './useViewEditor';
 
 interface ViewNavigationMenuProps {
   isLockable?: boolean;
+  supressSettings?: boolean;
 }
 
 export default memo(ViewNavigationMenu);
-function ViewNavigationMenu({ isLockable }: ViewNavigationMenuProps) {
+function ViewNavigationMenu({ isLockable, supressSettings }: ViewNavigationMenuProps) {
   const { isOpen: isMenuOpen, onOpen: onMenuOpen, onClose: onMenuClose } = useDisclosure();
   const { showEditFormDrawer, isViewLocked } = useViewEditor({ isLockable });
 
@@ -30,7 +31,7 @@ function ViewNavigationMenu({ isLockable }: ViewNavigationMenuProps) {
     [
       'mod + ,',
       () => {
-        if (isViewLocked) return;
+        if (isViewLocked || supressSettings) return;
         showEditFormDrawer();
       },
       { preventDefault: true },
@@ -43,7 +44,10 @@ function ViewNavigationMenu({ isLockable }: ViewNavigationMenuProps) {
 
   return (
     <>
-      <FloatingNavigation toggleMenu={toggleMenu} toggleSettings={showEditFormDrawer} />
+      <FloatingNavigation
+        toggleMenu={toggleMenu}
+        toggleSettings={supressSettings ? undefined : () => showEditFormDrawer()}
+      />
       <NavigationMenu isOpen={isMenuOpen} onClose={onMenuClose} />
     </>
   );

apps/client/src/common/components/navigation-menu/editor-navigation/EditorNavigation.tsx

@@ -1,14 +1,14 @@
 import { IoLockClosedOutline } from 'react-icons/io5';
 import { useNavigate } from 'react-router-dom';
-import { useViewportSize } from '@mantine/hooks';
 
+import { useIsSmallDevice } from '../../../hooks/useIsSmallDevice';
 import NavigationMenuItem from '../navigation-menu-item/NavigationMenuItem';
 
 export default function EditorNavigation() {
-  const { width } = useViewportSize();
   const navigate = useNavigate();
+  const isSmallDevide = useIsSmallDevice();
 
-  if (width > 1440) {
+  if (!isSmallDevide) {
     return (
       <NavigationMenuItem active={location.pathname === '/editor'} onClick={() => navigate('/editor')}>
         <IoLockClosedOutline />

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

@@ -9,7 +9,7 @@ import style from './FloatingNavigation.module.scss';
 
 interface FloatingNavigationProps {
   toggleMenu: () => void;
-  toggleSettings: () => void;
+  toggleSettings?: () => void;
 }
 
 export default function FloatingNavigation({ toggleMenu, toggleSettings }: FloatingNavigationProps) {
@@ -29,15 +29,17 @@ export default function FloatingNavigation({ toggleMenu, toggleSettings }: Float
       >
         <IoApps />
       </IconButton>
-      <IconButton
-        variant='subtle-white'
-        size='xlarge'
-        onClick={toggleSettings}
-        aria-label='toggle settings'
-        data-testid='navigation__toggle-settings'
-      >
-        <IoSettingsOutline />
-      </IconButton>
+      {toggleSettings && (
+        <IconButton
+          variant='subtle-white'
+          size='xlarge'
+          onClick={toggleSettings}
+          aria-label='toggle settings'
+          data-testid='navigation__toggle-settings'
+        >
+          <IoSettingsOutline />
+        </IconButton>
+      )}
     </div>
   );
 }