Improve Sheets component

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;

src/components/Menu/Menu.tsx

@@ -50,7 +50,7 @@ export function Menu({
   onClose,
   onOpen,
   items,
-  className,
+  className = "",
   version = "",
 }: Props) {
   useEffect(() => {

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}>

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;
   }

stories/Sheets.stories.tsx

@@ -7,9 +7,9 @@ const meta = {
   title: "Overlays/Sheets",
   component: Sheets,
   parameters: {
-    layout: "centered",
+    layout: "fullscreen",
-    inlineStories: false,
   },
+
   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}>