Hide explorer and Github panes for viewers (#4723)

concrete-utopia · Jan 11, 2024 · d53d50f · d53d50f
1 parent 5aea0e9
commit d53d50f
Showing 1 changed file with 27 additions and 20 deletions.
diff --git a/editor/src/components/navigator/left-pane/index.tsx b/editor/src/components/navigator/left-pane/index.tsx
@@ -17,6 +17,8 @@ import { NavigatorComponent } from '../navigator'
 import { ContentsPane } from './contents-pane'
 import { GithubPane } from './github-pane'
 import type { StoredPanel } from '../../canvas/stored-layout'
+import { useIsMyProject } from '../../editor/store/collaborative-editing'
+import { when } from '../../../utils/react-conditionals'
 
 export interface LeftPaneProps {
   editorState: EditorState
@@ -63,6 +65,8 @@ export const LeftPaneComponent = React.memo<LeftPaneComponentProps>((props) => {
     onClickTab(LeftMenuTab.Github)
   }, [onClickTab])
 
+  const isMyProject = useIsMyProject()
+
   return (
     <LowPriorityStoreProvider>
       <FlexColumn
@@ -88,26 +92,29 @@ export const LeftPaneComponent = React.memo<LeftPaneComponentProps>((props) => {
             overflowY: 'scroll',
           }}
         >
-          <FlexRow style={{ marginBottom: 10, gap: 10 }} css={undefined}>
-            <MenuTab
-              label={'Navigator'}
-              selected={selectedTab === LeftMenuTab.Navigator}
-              onClick={onClickNavigatorTab}
-            />
-            <MenuTab
-              label={'Project'}
-              selected={selectedTab === LeftMenuTab.Project}
-              onClick={onClickProjectTab}
-            />
-            <MenuTab
-              label={'Github'}
-              selected={selectedTab === LeftMenuTab.Github}
-              onClick={onClickGithubTab}
-            />
-          </FlexRow>
-          {selectedTab === LeftMenuTab.Navigator ? <NavigatorComponent /> : null}
-          {selectedTab === LeftMenuTab.Project ? <ContentsPane /> : null}
-          {selectedTab === LeftMenuTab.Github ? <GithubPane /> : null}
+          {when(
+            isMyProject,
+            <FlexRow style={{ marginBottom: 10, gap: 10 }} css={undefined}>
+              <MenuTab
+                label={'Navigator'}
+                selected={selectedTab === LeftMenuTab.Navigator}
+                onClick={onClickNavigatorTab}
+              />
+              <MenuTab
+                label={'Project'}
+                selected={selectedTab === LeftMenuTab.Project}
+                onClick={onClickProjectTab}
+              />
+              <MenuTab
+                label={'Github'}
+                selected={selectedTab === LeftMenuTab.Github}
+                onClick={onClickGithubTab}
+              />
+            </FlexRow>,
+          )}
+          {when(selectedTab === LeftMenuTab.Navigator, <NavigatorComponent />)}
+          {when(isMyProject && selectedTab === LeftMenuTab.Project, <ContentsPane />)}
+          {when(isMyProject && selectedTab === LeftMenuTab.Github, <GithubPane />)}
         </div>
       </FlexColumn>
     </LowPriorityStoreProvider>