Improve Sheets component

This commit is contained in:
Arnaud 2024-09-20 11:20:00 +02:00
parent 3ae94b01f4
commit ba68ffb31b
No known key found for this signature in database
GPG Key ID: 69D6CE281FCAE663
5 changed files with 24 additions and 10 deletions

View File

@ -5,7 +5,6 @@
top: 0;
left: 0;
background: var(--codex-background-backdrop);
display: none;
backdrop-filter: blur(2px);
display: block;
z-index: 10;

View File

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

View File

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

View File

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

View File

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