refactor: editor responsive navigation

apps/client/src/common/hooks/useIsMobile.ts

@@ -0,0 +1,9 @@
+import { useMemo } from 'react';
+import { useOs, useViewportSize } from '@mantine/hooks';
+
+export function useIsMobile(): boolean {
+  const { width } = useViewportSize();
+  const os = useOs();
+
+  return useMemo(() => (os === 'ios' || os === 'android') && width < 800, [width, os]);
+}

apps/client/src/common/hooks/useIsSmallDevice.ts

@@ -0,0 +1,9 @@
+import { useMemo } from 'react';
+import { useOs, useViewportSize } from '@mantine/hooks';
+
+export function useIsSmallDevice(): boolean {
+  const { width } = useViewportSize();
+  const os = useOs();
+
+  return useMemo(() => (os === 'ios' || os === 'android') && width < 1300, [width, os]);
+}

apps/client/src/common/hooks/useIsSmallScreen.ts

@@ -0,0 +1,8 @@
+import { useMemo } from 'react';
+import { useViewportSize } from '@mantine/hooks';
+
+export function useIsSmallScreen(): boolean {
+  const { width } = useViewportSize();
+
+  return useMemo(() => width < 1300, [width]);
+}