start playing with parent navigation

src/components/settings/RouterExperiment/RouterExperiment.tsx

@@ -1,35 +1,47 @@
-import React, { useEffect } from "react";
+import React, {
+  createContext,
+  PropsWithChildren,
+  useContext,
+  useEffect,
+} from "react";
+import { FaChevronLeft } from "react-icons/fa";
 import {
   MemoryRouter,
   Outlet,
   Route,
   Routes,
   useLocation,
+  useMatch,
   useParams,
 } from "react-router-dom";
 
+import { ThemeContext } from "../../../themes/ThemeContext";
+import { absoluteCover } from "../../absoluteCover";
 import { Link } from "./Link";
 
-function CardList() {
+function CardCategoryList() {
   return (
-    <div>
-      <h1>Card categories</h1>
-      <div>
-        <Link to="/cards/1">Card 1</Link>
-      </div>
-      <div>
-        <Link to="/cards/2">Card 2</Link>
-      </div>
-      <div>
-        <Link to="/cards/3">Card 3</Link>
-      </div>
+    <>
       <div>
-        <Link to="/cards/4">Card 4</Link>
+        <h1>Card categories</h1>
+        <div>
+          <Link to="/1">Card 1</Link>
+        </div>
+        <div>
+          <Link to="/2">Card 2</Link>
+        </div>
+        <div>
+          <Link to="/3">Card 3</Link>
+        </div>
+        <div>
+          <Link to="/4">Card 4</Link>
+        </div>
+        <hr />
+        <div>{/* <Link to="/5">Card 5</Link> */}</div>
+        <div>End of card category list</div>
       </div>
-      <hr />
-      <div>{/* <Link to="/cards/5">Card 5</Link> */}</div>
       <Outlet />
-    </div>
+    </>
   );
 }
 
@@ -40,27 +52,82 @@ function CardDetails() {
     setText(`Hello from CardDetails ${id}`);
   }, [id]);
   return (
-    <div>
+    <>
       <h1>Card details</h1>
       <div>
         <input value={text} onChange={(e) => setText(e.target.value)} />
       </div>
       <div>Card id is {id}</div>
-    </div>
+    </>
   );
 }
 
 function Layout() {
   const { pathname } = useLocation();
   return (
-    <>
+    <div
+      css={{
+        ...absoluteCover,
+      }}
+    >
       <div>
         {pathname} {pathname !== "/" && <Link to="/">Home</Link>}
       </div>
       <hr />
       <Outlet />
       <hr />
       <div>This is the end of the layout</div>
+    </div>
+  );
+}
+
+const panelMargin = "3em";
+
+const ParentPathContext = createContext<string | null>(null);
+
+function PanelWrapper({ children }: PropsWithChildren) {
+  const theme = useContext(ThemeContext);
+  const { pathname } = useLocation();
+  const parentPath = useContext(ParentPathContext) ?? "/";
+  return (
+    <>
+      <div
+        css={{
+          position: "absolute",
+          top: 0,
+          width: panelMargin,
+          bottom: 0,
+          left: 0,
+        }}
+      />
+      <div
+        css={{
+          position: "absolute",
+          top: 0,
+          right: 0,
+          bottom: 0,
+          left: panelMargin,
+          padding: "1em",
+          backgroundColor: theme.colors.bgOpaquePrimary,
+          boxShadow: "-1em 0 5em 0 #0007",
+
+          overflow: "auto",
+          borderLeft: `1px solid ${theme.colors.controlBorder}`,
+          display: "flex",
+          flexDirection: "column",
+        }}
+      >
+        <div>
+          <Link to={parentPath}>
+            <FaChevronLeft />
+            Back
+          </Link>
+        </div>
+        <div css={{ flex: 1 }}>{children}</div>
+      </div>
+      <ParentPathContext.Provider value={pathname}>
+        <Outlet />
+      </ParentPathContext.Provider>
     </>
   );
 }
@@ -71,12 +138,18 @@ export function RouterExperiment() {
       <Routes>
         {/* Layout route - no path so always renders */}
         <Route element={<Layout />}>
-          {/* This also always renders so we could take the path off, but
-          semantically it feels righter to have it because it's an actual app
-          component */}
-          <Route path="/" element={<CardList />}>
+          {/* This also always renders but we need for it to contribute the
+          leading slash to the nested routes */}
+          <Route path="/" element={<CardCategoryList />}>
             {/* Actual route */}
-            <Route path="cards/:id" element={<CardDetails />} />
+            <Route
+              path="/:id"
+              element={
+                <PanelWrapper>
+                  <CardDetails />
+                </PanelWrapper>
+              }
+            />
           </Route>
         </Route>
       </Routes>