Refactor IdeHeader to take middle buttons as children

app/web/src/components/ProjectProfile/ProjectProfile.tsx

@@ -10,6 +10,7 @@ import Button from 'src/components/Button/Button'
 import ProjectReactionsCell from '../ProjectReactionsCell'
 import { countEmotes } from 'src/helpers/emote'
 import { getActiveClasses } from 'get-active-classes'
+import TopNav from 'src/components/TopNav/TopNav'
 import IdeHeader from 'src/components/IdeHeader/IdeHeader'
 import CadPackage from 'src/components/CadPackage/CadPackage'
 import Gravatar from 'src/components/Gravatar/Gravatar'
@@ -50,7 +51,7 @@ const ProjectProfile = ({
           projectTitle: project?.title,
         })
       )
-  }, [currentUser])
+  }, [currentUser, project?.title, userProject.userName])
   useIdeInit(project?.cadPackage, project?.code, 'viewer')
   const [newDescription, setNewDescription] = useState(project?.description)
   const onDescriptionChange = (description) => setNewDescription(description())
@@ -70,14 +71,9 @@ const ProjectProfile = ({
     <>
       <div className="h-screen flex flex-col text-lg font-fira-sans">
         <div className="flex">
-          <IdeHeader
-            handleRender={() => {}}
-            projectOwner={userProject?.userName}
-            projectOwnerImage={userProject?.image}
-            projectOwnerId={userProject?.id}
-            projectTitle={project?.title}
-            projectId={project?.id}
-          />
+          <TopNav>
+            <IdeHeader context="profile" />
+          </TopNav>
         </div>
         <div className="relative flex-grow h-full">
           <div className="grid grid-cols-1 md:auto-cols-preview-layout grid-flow-row-dense absolute inset-0 h-full">