I have a react slide out menu component I'm working on that I'll be using as part of a larger sidebar nav.

I have the animation triggering correctly but instead of opening from the left side of the screen, it opens from the right and then slides over to the left.

I've tweaked the CSS and made various code changes in how the elements are laid out but I still get the same problem. At this point I'm not sure if it's a code issue or CSS

Codesandbox

Slide Out Menu Component

import React from "react";

export default function Drawer({ children, isOpen, setIsOpen }) {
  return (
    <main
      className={
        " fixed overflow-hidden z-10 bg-gray-900 bg-opacity-25 inset-0 transform ease-in-out "  
        (isOpen
          ? " transition-opacity opacity-100 duration-500 translate-x-0  "
          : " transition-all delay-500 opacity-0 translate-x-full  ")
      }
    >
      <section
        className={
          " w-9/12 max-w-lg absolute bg-white h-full shadow-xl delay-400 duration-500 ease-in-out transition-all transform  "  
          (isOpen ? " translate-x-0 " : " translate-x-full ")
        }
      >
        <article className="relative w-screen max-w-lg pb-10 flex flex-col space-y-6 overflow-y-scroll h-full">
          <header className="p-4 font-bold text-lg">Header</header>
          {children}
        </article>
      </section>
      <section
        className=" w-screen h-full cursor-pointer "
        onClick={() => {
          setIsOpen(false);
        }}
      ></section>
    </main>
  );
}

CodePudding user response：

If you change condition of isOpen with width, it will work as you want

<section className={"max-w-lg absolute bg-white h-full shadow-xl 
    delay-400 duration-500 ease-in-out transition-all transform  "  
     (isOpen ? " w-9/12" : " w-0 ")}>

https://codesandbox.io/s/react-with-tailwinds-drawer-forked-7d9m6z?file=/src/Drawer.js:1026-1027