starting bottom panel

src/components/mobile/Appartment/ViewControllerModal1.tsx

@@ -1,13 +1,18 @@
 import { useDrag } from "@use-gesture/react";
 import { a, useSpring, config } from "@react-spring/web";
+import { useLayoutEffect, useState } from "react";
 
 import styles from "./styles.module.css";
 
 const items = ["save item", "open item", "share item", "delete item", "cancel"];
 // const height = items.length * 60 + 80;
-const height = items.length * 60 + 80;
 
 export default function ButtomPanel() {
+  const [height, setHeight] = useState(0);
+  useLayoutEffect(() => {
+    setHeight(window.screen.height);
+  }, []);
+
   const [{ y }, api] = useSpring(() => ({ y: height }));
 
   const open = ({ canceled }) => {
@@ -21,7 +26,7 @@ export default function ButtomPanel() {
   };
   const close = (velocity = 0) => {
     api.start({
-      y: height,
+      y: height - 64,
       immediate: false,
       config: { ...config.stiff, velocity },
     });
@@ -38,14 +43,38 @@ export default function ButtomPanel() {
     }) => {
       // if the user drags up passed a threshold, then we cancel
       // the drag so that the sheet resets to its open position
-      if (oy < -70) cancel();
+      if (oy < -10) cancel();
 
       // when the user releases the sheet, we check whether it passed
       // the threshold for it to close, or if we reset it to its open positino
       if (last) {
-        oy > height * 0.5 || (vy > 0.5 && dy > 0)
-          ? close(vy)
-          : open({ canceled });
+        // oy > height * 0.8 || (vy > 0.8 && dy > 0)
+        //   ? close(vy)
+        //   : open({ canceled });
+        console.log("oy", oy);
+        if (oy > height * 0.8) {
+          console.log("close");
+          close(vy);
+        }
+        if (oy < height * 0.8) {
+          console.log("open");
+          open({ canceled });
+        }
+        // else {
+        // }
+        // if (oy > height * 0.2 || (vy > 0.5 && dy > 0)) {
+        //   console.log("close");
+        //   close(vy);
+        // } else if ((vy > 0.5 && dy < 0) || oy < height * 0.2) {
+        //   console.log("open");
+        //   open({ canceled });
+        // }
+        // if (oy > height * 0.5 || (vy > 0.5 && dy > 0)) {
+        //   close(vy);
+        // }
+        // if (oy < height * 0.8) {
+        //   open({ canceled });
+        // }
       }
       // when the user keeps dragging, we just move the sheet according to
       // the cursor position
@@ -61,30 +90,12 @@ export default function ButtomPanel() {
 
   const display = y.to((py) => (py < height ? "block" : "none"));
 
-  const bgStyle = {
-    transform: y.to(
-      [0, height],
-      ["translateY(-8%) scale(1.16)", "translateY(0px) scale(1.05)"]
-    ),
-    opacity: y.to([0, height], [0.4, 1], "clamp"),
-  };
   return (
     <div className="flex" style={{ overflow: "hidden" }}>
-      <a.div className={styles.bg} onClick={() => close()} style={bgStyle}>
-        <img
-          src="https://images.pexels.com/photos/1239387/pexels-photo-1239387.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"
-          alt=""
-        />
-        <img
-          src="https://images.pexels.com/photos/5181179/pexels-photo-5181179.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"
-          alt=""
-        />
-      </a.div>
-      <div className={styles.actionBtn} onClick={open} />
       <a.div
         className={styles.sheet}
         {...bind()}
-        style={{ display, bottom: `calc(-100vh + ${height - 100}px)`, y }} //
+        style={{ display, y }} //
       >
         {items.map((entry, i) => (
           <div

src/components/mobile/Appartment/styles.module.css

@@ -1,28 +1,3 @@
-.actionBtn {
-  position: fixed;
-  z-index: 100;
-  bottom: 80px;
-  right: 40px;
-  height: 48px;
-  width: 48px;
-  border-radius: 24px;
-  background: coral;
-  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2),
-    0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.actionBtn:after {
-  content: " ";
-  display: block;
-  background: #fff;
-  height: 20%;
-  width: 20%;
-  border-radius: 50%;
-}
-
 .bg {
   width: 100%;
 }