侧边栏从左到右

Question

我需要帮助我的React (顺风)，我希望我的幻灯片条从左到右开始，我已经编码了这个东西，但它显示在中间的栏如下图所示。

​

​

当我按下栏(显示在左上角)时，边条会向左移动，如下图所示。

​

​

我想要边栏，每当我按下蓝色条子，它显示从左到右开始的边条，每当我按x键时，它就关闭从右到左开始的边条。

这是SideBarMenu.jsx的代码

import { useState } from "react";

const Sidebar = () => {

  const [showSidebar, setShowSidebar] = useState(false);

  return (
    <>
    {showSidebar ? (
      <button
        className="flex text-4xl text-white items-center cursor-pointer fixed left-10 top-6 z-50"
        onClick={() => setShowSidebar(!showSidebar)}
      >
        x
      </button>
    ) : (
      <svg
        onClick={() => setShowSidebar(!showSidebar)}
        className="fixed  z-30 flex items-center cursor-pointer left-10 top-6"
        fill="#2563EB"
        viewBox="0 0 100 80"
        width="40"
        height="40"
      >
        <rect width="100" height="10"></rect>
        <rect y="30" width="100" height="10"></rect>
        <rect y="60" width="100" height="10"></rect>
      </svg>
    )}

    <div
      className={`top-0 left-0 w-[35vw] bg-blue-600  p-10 pl-20 text-white fixed h-full z-40  ease-in-out duration-300 ${
        showSidebar ? "translate-x-0 " : "translate-x-full"
      }`}
    >
      <h3 className="mt-20 text-4xl font-semibold text-white">
        Home
      </h3>
    </div>
  </>
  );
};

export default Sidebar

，这是App.js中的代码

import SideBarMenu from "./components/sidebarmenu/SideBarMenu";

function App() {

  const user = false;

  return (
    <Router>
      <div className="flex flex-default items-center justify-center min-h-screen py-2">
      <SideBarMenu />
    </div>
      <TopBar/>
      
      <Routes>

        <Route path="/" exact element={<Home></Home>}>
        </Route>

        <Route path="/register" element={user ? <Home /> : <Register />} >
        </Route>

        <Route path="/login" element={user ? <Home /> : <Login />}>
        </Route>

        <Route path="/write" element={user ? <Write /> : <Register />}>
        </Route>

        <Route path="/settings" element={user ? <Settings /> : <Register />}>
        </Route>

        <Route path="/post/:postid" element={<Single></Single>}>
        </Route>

      </Routes>
    </Router>
  );
}

export default App;

Answer 1

在SideBarMenu.jsx中，在translate-x-full之前添加一个减号，以便在showSidebar为false时隐藏(负值)。

<div
      className={`top-0 left-0 w-[35vw] bg-blue-600  p-10 pl-20 text-white fixed h-full z-40  ease-in-out duration-300 ${
        showSidebar ? "translate-x-0" : "-translate-x-full"
      }`}
    >
      <h3 className="mt-20 text-4xl font-semibold text-white">
        Home
      </h3>
    </div>