Sidebar from left to right

Question

I need help in my React App (tailwind) I want my slide bar to start from left to right, I've coded the thing but it shows the bar at center as showing in the picture below

and when I press on the bars (showing on the top left) the side bar moves to the left as showing in the picture below

I want the side bar whenever I press on the blue bars it shows the side bar starting from left to right and whenever I press on x it closes the side bar starting from right to left

this is the code of 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

and this is the code in 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

In your SideBarMenu.jsx, add a minus sign before translate-x-full so that It's hidden (negative value) while showSidebar is 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>