adding separate page for create a conversation

packages/web/pages/s/index.tsx

@@ -1,6 +1,6 @@
 import Routes from "@nirvana/common/helpers/routes";
 import { useRouter } from "next/router";
-import React, { useEffect } from "react";
+import React, { ReactElement, useEffect } from "react";
 import { useRecoilState } from "recoil";
 import Conversations from "../../components/v2/Conversations";
 import Done from "../../components/v2/Done";
@@ -14,6 +14,8 @@ import {
   TransitionGroup,
   SwitchTransition,
 } from "react-transition-group";
+import CreateConversation from "../../components/v2/CreateConversation";
+import { FaArrowLeft } from "react-icons/fa";
 
 export default function Me() {
   // figure out what content to render from here
@@ -48,26 +50,59 @@ export default function Me() {
     }
   }
 
+  /** full page replacements: clean full page
+   *    1. search page:
+   *    2. view a conversation
+   *    3. create conversation
+   *    4. profile edit? nah not needed...just keep current separate page
+   */
+
+  var fullCleanPageContent: ReactElement = <></>;
+  if (currRoute === Routes.createConvo) {
+    fullCleanPageContent = <CreateConversation />;
+  }
+
   return (
     <div className="flex flex-col">
       <Header />
 
-      <div className="flex-1 flex flex-row items-stretch">
-        <Sidebar />
+      {fullCleanPageContent ? (
+        <div className="flex flex-col px-20">
+          <div className="flex flex-row">
+            <span className="flex flex-col items-center">
+              <button
+                className="rounded-lg p-2 border flex flex-row items-center space-x-2
+            text-slate-400 text-xs hover:bg-slate-50"
+              >
+                <FaArrowLeft />
+                <span>back</span>
+              </button>
 
-        <SwitchTransition>
-          <CSSTransition
-            appear={true}
-            key={Math.random()}
-            timeout={400}
-            classNames="slide"
-          >
-            <div className="flex-1 flex flex-col px-20 justify-start items-stretch container mx-auto">
-              {getCurrentContent()}
-            </div>
-          </CSSTransition>
-        </SwitchTransition>
-      </div>
+              <span className="flex flex-row items-center text-xs text-slate-300">
+                ESC
+              </span>
+            </span>
+          </div>
+          {fullCleanPageContent}
+        </div>
+      ) : (
+        <div className="flex-1 flex flex-row items-stretch">
+          <Sidebar />
+
+          <SwitchTransition>
+            <CSSTransition
+              appear={true}
+              key={"main_tabs_content"}
+              timeout={400}
+              classNames="slide"
+            >
+              <div className="flex-1 flex flex-col px-20 justify-start items-stretch container mx-auto">
+                {getCurrentContent()}
+              </div>
+            </CSSTransition>
+          </SwitchTransition>
+        </div>
+      )}
     </div>
   );
 }