refactor: editor responsive navigation

apps/client/src/features/rundown/RundownExport.tsx

@@ -2,6 +2,9 @@ import { memo } from 'react';
 
 import { ContextMenu } from '../../common/components/context-menu/ContextMenu';
 import ErrorBoundary from '../../common/components/error-boundary/ErrorBoundary';
+import ViewNavigationMenu from '../../common/components/navigation-menu/ViewNavigationMenu';
+import ProtectRoute from '../../common/components/protect-route/ProtectRoute';
+import { useIsSmallDevice } from '../../common/hooks/useIsSmallDevice';
 import { useAppMode } from '../../common/stores/appModeStore';
 import { handleLinks } from '../../common/utils/linkUtils';
 import { cx } from '../../common/utils/styleUtils';
@@ -18,30 +21,50 @@ export default memo(RundownExport);
 function RundownExport() {
   const isExtracted = window.location.pathname.includes('/rundown');
   const appMode = useAppMode((state) => state.mode);
-  const hideSideBar = isExtracted && appMode === 'run';
+  const isSmallDevice = useIsSmallDevice();
 
-  const classes = cx([style.rundownExport, isExtracted && style.extracted]);
-
-  return (
-    <div className={classes} data-testid='panel-rundown'>
-      <FinderPlacement />
-      <div className={style.rundown}>
-        <div className={style.list}>
-          <ErrorBoundary>
-            {!isExtracted && <Corner onClick={(event) => handleLinks('rundown', event)} />}
-            <ContextMenu>
-              <RundownWrapper />
-            </ContextMenu>
-          </ErrorBoundary>
-        </div>
-        {!hideSideBar && (
-          <div className={style.side}>
+  if (isSmallDevice && isExtracted) {
+    return (
+      <ProtectRoute permission='editor'>
+        <div className={cx([style.rundownExport, style.extracted])} data-testid='panel-rundown'>
+          <FinderPlacement />
+          <ViewNavigationMenu supressSettings />
+          <div className={style.content}>
             <ErrorBoundary>
-              <RundownEventEditor />
+              <ContextMenu>
+                <RundownWrapper />
+              </ContextMenu>
             </ErrorBoundary>
           </div>
-        )}
+        </div>
+      </ProtectRoute>
+    );
+  }
+
+  const hideSideBar = isExtracted && appMode === 'run';
+
+  return (
+    <ProtectRoute permission='editor'>
+      <div className={cx([style.rundownExport, isExtracted && style.extracted])} data-testid='panel-rundown'>
+        <FinderPlacement />
+        <div className={style.rundown}>
+          <div className={style.list}>
+            <ErrorBoundary>
+              <Corner onClick={(event) => handleLinks('rundown', event)} />
+              <ContextMenu>
+                <RundownWrapper />
+              </ContextMenu>
+            </ErrorBoundary>
+          </div>
+          {!hideSideBar && (
+            <div className={style.side}>
+              <ErrorBoundary>
+                <RundownEventEditor />
+              </ErrorBoundary>
+            </div>
+          )}
+        </div>
       </div>
-    </div>
+    </ProtectRoute>
   );
 }