Move an element from right to left like panel using CSS-CodePudding

I am creating a custom panel that should be coming in from right to left and then stay at whatever width of its body. I want this panel coming inside of its container. In my case its inside the "box" div. I am unable to achieve the same. Can someone help here.

.box {
  height: 600px;
  width: 600px;
  background-color: white;
  padding: 10px;
  border: solid 3px black;
}

.panel {
  position: absolute;
  left: 0;
  width: 180px;
  top: 0;
  bottom: 0;
  box-shadow: 0px 0px 15px black;
  background: white;
  padding: 10px;
  transform-origin: 100% 50%;
  transform: translateX(-100%);
  transition: -webkit-transform 0.2s ease-in-out;
  outline: 0;
}

.panel:target {
  transform: translateX(0%);
}

function App() {
  const [drawerOpen, setDrawerOpen] = useState(false);

  return (
    <div className="box">
      {drawerOpen ? (
        <SlideDrawer show={drawerOpen} {...{ setDrawerOpen }} />
      ) : null}
      <button
        onClick={() => {
          setDrawerOpen(!drawerOpen);
        }}
      >
        Click me!
      </button>
    </div>
  );
}

export default function SlideDrawer({ setDrawerOpen, show }) {
  return <div className="panel">I am sliding</div>;
}

Sanbox: https://codesandbox.io/s/react-sliding-pane-v2-4xuj57?file=/src/index.js:144-504

CodePudding user response：

UPDATE

Updated so that on button click, it toggles the panel open and close.

It turns out transition is easier to handle a two-way animation in this use case. I deleted some irrelevant code from original answer.

The only trade-off is to keep SlideDrawer rendered out of the box so it can be animated both ways.

Here is sandbox of it finished.

Hope this will help!

Example: (replaces index.js file)

import React, { useState } from "react";
import ReactDOM from "react-dom";
import SlideDrawer from "./SlideDrawer.jsx";
import "./styles.css";

function App() {
  const [drawerOpen, setDrawerOpen] = useState(false);

  return (
    <div className="box">
      <SlideDrawer show={drawerOpen} />
      <button onClick={() => setDrawerOpen((prev) => !prev)}>Click me!</button>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Example: (replaces SlideDrawer.jsx file)

import React from "react";
import "./styles.css";

export default function SlideDrawer({ show }) {
  return <div className={`panel ${show && "slidein"}`}>I am sliding</div>;
}

Example: (replaces styles.css file)

.box {
  height: 600px;
  width: 600px;
  background-color: white;
  padding: 10px;
  border: solid 3px black;
  position: relative;
  overflow: hidden;
}

.panel {
  position: absolute;
  right: 0;
  width: 180px;
  top: 0;
  bottom: 0;
  box-shadow: 0px 0px 15px black;
  background: white;
  padding: 10px;
  outline: 0;
  transform: translateX(120%);
  transition: all 0.2s ease-in-out;
}

.slidein {
  transform: translateX(0);
}