侧边栏从左到右

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>

侧边栏从左到右

Sidebar from left to right

html

css

reactjs

tailwind-css

tailwind-ui