From ba68ffb31b500e4d738925db098c520a6115398d Mon Sep 17 00:00:00 2001
From: Arnaud <arnaud@status.im>
Date: Fri, 20 Sep 2024 11:20:00 +0200
Subject: [PATCH] Improve Sheets component

---
 src/components/Backdrop/backdrop.css |  1 -
 src/components/Menu/Menu.tsx         |  2 +-
 src/components/Sheets/Sheets.tsx     |  8 +++++++-
 src/components/Sheets/sheets.css     | 17 +++++++++++++----
 stories/Sheets.stories.tsx           |  6 +++---
 5 files changed, 24 insertions(+), 10 deletions(-)

diff --git a/src/components/Backdrop/backdrop.css b/src/components/Backdrop/backdrop.css
index b208cbf..90cf8bf 100644
--- a/src/components/Backdrop/backdrop.css
+++ b/src/components/Backdrop/backdrop.css
@@ -5,7 +5,6 @@
   top: 0;
   left: 0;
   background: var(--codex-background-backdrop);
-  display: none;
   backdrop-filter: blur(2px);
   display: block;
   z-index: 10;
diff --git a/src/components/Menu/Menu.tsx b/src/components/Menu/Menu.tsx
index 105d73e..0839fa1 100644
--- a/src/components/Menu/Menu.tsx
+++ b/src/components/Menu/Menu.tsx
@@ -50,7 +50,7 @@ export function Menu({
   onClose,
   onOpen,
   items,
-  className,
+  className = "",
   version = "",
 }: Props) {
   useEffect(() => {
diff --git a/src/components/Sheets/Sheets.tsx b/src/components/Sheets/Sheets.tsx
index e3870a3..dfcf741 100644
--- a/src/components/Sheets/Sheets.tsx
+++ b/src/components/Sheets/Sheets.tsx
@@ -2,6 +2,7 @@ import { ReactElement } from "react";
 import { Backdrop } from "../Backdrop/Backdrop";
 import "./sheets.css";
 import { attributes } from "../utils/attributes";
+import { classnames } from "../utils/classnames";
 
 type Props = {
   open: boolean;
@@ -15,7 +16,12 @@ export function Sheets({ open, onClose, children }: Props) {
   const attr = attributes({ "aria-expanded": open });
 
   return (
-    <div className="sheets-container">
+    <div
+      className={classnames(
+        ["sheets-container"],
+        ["sheets-container--open", open]
+      )}
+    >
       <Backdrop onClose={onClose} open={open} className={"sheets-backdrop"} />
 
       <div className="sheets" {...attr}>
diff --git a/src/components/Sheets/sheets.css b/src/components/Sheets/sheets.css
index 49bc2ea..ee72c62 100644
--- a/src/components/Sheets/sheets.css
+++ b/src/components/Sheets/sheets.css
@@ -1,5 +1,5 @@
 .sheets {
-  position: fixed;
+  position: absolute;
   transition: transform 0.25s;
   background-color: var(--codex-background-secondary);
   z-index: 2;
@@ -7,7 +7,16 @@
 }
 
 .sheets-container {
-  position: relative;
+  overflow: hidden;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  z-index: -1;
+}
+
+.sheets-container--open {
+  /* z-index: 0; */
 }
 
 .sheets-backdrop {
@@ -20,7 +29,7 @@
     height: 100%;
     bottom: 0;
     top: 0;
-    transform: translatex(300px);
+    transform: translatex(1300px);
     right: 0;
   }
 
@@ -36,7 +45,7 @@
     height: auto;
     bottom: 0;
     top: auto;
-    transform: translatey(1000px);
+    transform: translatey(1300px);
     left: 0;
     padding-bottom: 1.5rem;
   }
diff --git a/stories/Sheets.stories.tsx b/stories/Sheets.stories.tsx
index d79d1f1..e232a0b 100644
--- a/stories/Sheets.stories.tsx
+++ b/stories/Sheets.stories.tsx
@@ -7,9 +7,9 @@ const meta = {
   title: "Overlays/Sheets",
   component: Sheets,
   parameters: {
-    layout: "centered",
-    inlineStories: false,
+    layout: "fullscreen",
   },
+
   tags: ["autodocs"],
   argTypes: {},
   args: {
@@ -30,7 +30,7 @@ const DefaultTemplate = (props: { onClose: () => void }) => {
   };
 
   return (
-    <div style={{ padding: "2rem" }}>
+    <div style={{ padding: "6rem", position: "relative", overflow: "hidden" }}>
       <button onClick={onClick}>Make Sheets</button>
 
       <Sheets open={open} onClose={onClose}>