mobile

src/apps/officer-web/Screens/Dashboard/Projects/ProjectListScreen.tsx

@@ -1,6 +1,7 @@
 import { useEffect } from 'react';
 import { useNavigate, useSearchParams } from 'react-router';
 import { useGlobal } from 'hooks/useGlobal';
+import { useIsMobile } from 'hooks/useIsMobile';
 import { useWorkspacesState } from 'state/useWorkspacesState';
 import type { LayoutNode, ProjectType } from 'officerdev';
 import {
@@ -20,10 +21,20 @@ import { defaultLayout } from './defaultLayout';
 
 export const ProjectListScreen = () => {
   const workspace = useWorkspacesState<LayoutNode>('screens/projects', defaultLayout);
+  const isMobile = useIsMobile();
+  const [selected, setSelected] = useGlobal<string | null>(SELECTED_PROJECT, null);
+  const [creating] = useGlobal<boolean>(CREATING_PROJECT, false);
+  const mobilePanelId = isMobile && (selected || creating) ? 'proj-home-right' : undefined;
 
   return (
     <div className="h-full w-full">
-      <WorkspaceView workspace={workspace} />
+      <WorkspaceView
+        workspace={workspace}
+        mobilePanelId={mobilePanelId}
+        onMobilePanelChange={(id) => {
+          if (!id) setSelected(null);
+        }}
+      />
     </div>
   );
 };