nice routing

packages/web/pages/_app.tsx

@@ -4,6 +4,8 @@ import { AuthProvider } from "../contexts/authContext";
 import SiteLayout from "../components/Layouts/SiteLayout";
 import { Toaster } from "react-hot-toast";
 
+import { RecoilRoot } from "recoil";
+
 import type { NextPage } from "next";
 import type { AppProps } from "next/app";
 
@@ -24,11 +26,13 @@ function MyApp({ Component, pageProps }: AppPropsWithLayout) {
   const getLayout = Component.getLayout ?? ((page) => page);
 
   return (
-    <SiteLayout>
-      <AuthProvider>{getLayout(<Component {...pageProps} />)}</AuthProvider>
+    <RecoilRoot>
+      <SiteLayout>
+        <AuthProvider>{getLayout(<Component {...pageProps} />)}</AuthProvider>
 
-      <Toaster position="top-center" />
-    </SiteLayout>
+        <Toaster position="top-center" />
+      </SiteLayout>
+    </RecoilRoot>
   );
 }
 

packages/web/pages/s/index.tsx

@@ -1,17 +1,19 @@
 import Routes from "@nirvana/common/helpers/routes";
 import { useRouter } from "next/router";
-import React, { useEffect, useState } from "react";
+import React, { useEffect } from "react";
+import { useRecoilState } from "recoil";
 import Conversations from "../../components/v2/Conversations";
-import Done from "../../components/v2/done";
-import Drawer from "../../components/v2/drawer";
+import Done from "../../components/v2/Done";
+import Drawer from "../../components/v2/Drawer";
 import Header from "../../components/v2/Header";
-import Later from "../../components/v2/later";
+import Later from "../../components/v2/Later";
 import Sidebar from "../../components/v2/Sidebar";
+import { currPagePath } from "../../recoil/main";
 
 export default function Me() {
   // figure out what content to render from here
   const router = useRouter();
-  const [currRoute, setCurrRoute] = useState<string>(router.pathname);
+  const [currRoute, setCurrRoute] = useRecoilState(currPagePath);
 
   useEffect(() => {
     const onHashChangeStart = (url) => {