Add detail page

Signed-off-by: Bryan Frimin <bryan@getprobo.com>
Signed-off-by: Sacha Al Himdani <sacha@getprobo.com>

packages/ui/src/Layouts/Layout.stories.tsx

@@ -1,4 +1,4 @@
-import { Layout } from "./Layout";
+import { Layout, Drawer } from "./Layout";
 import type { Meta, StoryObj } from "@storybook/react";
 
 const meta = {
@@ -12,4 +12,36 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof Layout>;
 
-export const Default: Story = {};
+export const Default: Story = {
+    args: {
+        children: (
+            <p>
+                Lorem ipsum dolor sit amet consectetur, adipisicing elit.
+                Tempora tempore odit at ipsa dignissimos cumque deleniti, illum
+                rerum sunt laudantium molestias ducimus vero maiores eligendi
+                necessitatibus nemo animi. Ipsam, fugit.
+            </p>
+        ),
+    },
+};
+
+export const WithSidebar: Story = {
+    args: {
+        children: (
+            <>
+                <p>
+                    Lorem ipsum dolor sit amet consectetur, adipisicing elit.
+                    Tempora tempore odit at ipsa dignissimos cumque deleniti,
+                    illum rerum sunt laudantium molestias ducimus vero maiores
+                    eligendi necessitatibus nemo animi. Ipsam, fugit.
+                </p>
+                <Drawer>
+                    Lorem ipsum dolor sit amet consectetur adipisicing elit.
+                    Nostrum reiciendis eveniet possimus illo rerum labore nisi
+                    voluptatibus sequi consectetur corrupti, a, sunt dicta ut ad
+                    pariatur. Beatae optio libero pariatur!
+                </Drawer>
+            </>
+        ),
+    },
+};

packages/ui/src/Layouts/Layout.tsx

@@ -1,39 +1,84 @@
-import type { PropsWithChildren, ReactNode } from "react";
+import {
+    createContext,
+    useContext,
+    useEffect,
+    useState,
+    type PropsWithChildren,
+    type ReactNode,
+    useMemo,
+} from "react";
 import { Sidebar } from "../Atoms/Sidebar/Sidebar.tsx";
 import { Logo } from "../Atoms/Logo/Logo.tsx";
 import { Toasts } from "../Atoms/Toasts/Toasts.tsx";
+import { createPortal } from "react-dom";
+import clsx from "clsx";
 
 type Props = PropsWithChildren<{
     header: ReactNode;
     sidebar: ReactNode;
 }>;
 
+const LayoutContext = createContext({
+    setDrawer: (() => {}) as (v: boolean) => void,
+});
+
 export function Layout({ header, sidebar, children }: Props) {
+    const [hasDrawer, setDrawer] = useState(false);
     return (
-        <div className="text-txt-primary bg-level-0">
-            <header className="absolute z-2 left-0 right-0 px-4 flex items-center border-b border-border-solid h-12 bg-level-1">
-                <Logo className="w-12 h-5" />
-                <svg
-                    className="mx-3"
-                    width="8"
-                    height="18"
-                    viewBox="0 0 8 18"
-                    fill="none"
-                    xmlns="http://www.w3.org/2000/svg"
-                >
-                    <path d="M1 17L7 1" stroke="#C3C8C2" />
-                </svg>
-                {header}
-            </header>
-            <div className="flex h-screen">
-                <Sidebar>{sidebar}</Sidebar>
-                <main className="overflow-y-auto w-full mt-12">
-                    <div className="py-12 px-8 max-w-[1200px] w-full mx-auto">
-                        {children}
-                    </div>
-                </main>
+        <LayoutContext
+            value={useMemo(
+                () => ({
+                    setDrawer,
+                }),
+                [],
+            )}
+        >
+            <div className="text-txt-primary bg-level-0">
+                <header className="absolute z-2 left-0 right-0 px-4 flex items-center border-b border-border-solid h-12 bg-level-1">
+                    <Logo className="w-12 h-5" />
+                    <svg
+                        className="mx-3"
+                        width="8"
+                        height="18"
+                        viewBox="0 0 8 18"
+                        fill="none"
+                        xmlns="http://www.w3.org/2000/svg"
+                    >
+                        <path d="M1 17L7 1" stroke="#C3C8C2" />
+                    </svg>
+                    {header}
+                </header>
+                <div className="flex h-screen" id="main">
+                    <Sidebar>{sidebar}</Sidebar>
+                    <main
+                        className={clsx(
+                            "overflow-y-auto w-full mt-12 transition-all duration-300",
+                            hasDrawer && "pr-105",
+                        )}
+                    >
+                        <div className="py-12 px-8 max-w-[1200px] w-full mx-auto">
+                            {children}
+                        </div>
+                    </main>
+                </div>
+                <Toasts />
             </div>
-            <Toasts />
-        </div>
+        </LayoutContext>
+    );
+}
+
+export function Drawer({ children }: PropsWithChildren) {
+    const { setDrawer } = useContext(LayoutContext);
+    useEffect(() => {
+        setDrawer(true);
+        return () => {
+            setDrawer(false);
+        };
+    }, []);
+    return createPortal(
+        <aside className="absolute pt-20 top-0 right-0 w-105 px-6 pb-8 border-border-solid border-l h-screen">
+            {children}
+        </aside>,
+        document.body,
     );
 }