React tailwind css -right position show scroll bar - reactjs

Question

I have sticky box with show hide button as shown in image. It is working but if I tried to hide there is horizontal scroll bar and can see the box as shown in image 2. To colapse the box, I change right-0 to -right-24. Is there anyway not to show the horizontal scroll bar.
Image 1 -: showing sticky bar and can click setting icon to hide the bar. There is no horizontal scroll bar.
Image 2 -: after hide the bar, horizontal scroll bar is appeared and can see the box when I scroll.
const TrackPage = () => {
const handleMenuCollapse = (e) => {
e.preventDefault();
setColapse(!colapse);
};
return (
<>
<div>
<div
className={`flex w-24 h-96 absolute top-[calc((100vh-384px)/2)] ${
colapse ? "-right-24" : "right-0"
} " bg-primary rounded-b-lg items-center justify-center`}
>
<div
className="flex w-12 h-12 absolute -top-0 -left-12 cursor-pointer bg-primary rounded-l-lg items-center justify-center"
onClick={handleMenuCollapse}
>
<SettingIcon />
</div>
Setting
</div>
</div>
</>
);
};
export default TrackPage;
App.jsx
import React, { useState, useEffect } from "react";
import Header from "./components/header";
import SideMenu from "./components/side_menu";
import AppRoutes from "./routes";
import withUser from "./hocs/with_user";
import { isMobile } from "react-device-detect";
import { useLocation } from "react-router-dom";
import { AuthProvider, setAccessToken } from
"./auth/auth_provider";
import { Toaster } from "react-hot-toast";
import AppContext from "./components/app_context";
import "./i18n";
import "./App.css";
function App(props) {
const [colapse, setColapse] = useState(isMobile);
const [sideBarFull] = useState(true);
const location = useLocation();
const IsNormalPage = () => {
const blankPages = ["/login"];
for (let i = 0; i < blankPages.length; i++) {
if (location.pathname.startsWith(blankPages[i])) return
false;
}
return true;
};
useEffect(() => {
if (props.user) setAccessToken(props.user.t);
}, []);
const PageHeader = () => {
return (
<div className="h-[72px] w-full flex items-center align-middle justify-center bg-neutral shadow">
<div className="w-full text-center">
<Header />
</div>
</div>
);
};
return (
<AuthProvider user={props.user}>
<AppContext.Provider
value={{
colapse: colapse,
setColapse: setColapse,
}}
>
<div className="relative w-full min-h-screen h-full">
<div className="flex flex-row min-h-screen">
<div className="w-auto z-0 ">
<div className="flex-1 w-full max-h-screen mx-auto text-lg h-full shadow-lg bg-white overflow-y-auto">
{IsNormalPage() && <SideMenu showFullMenu={sideBarFull} />}
</div>
</div>
<div className="w-full max-h-screen flex flex-col z-10">
{IsNormalPage() && <PageHeader />}
<div className="flex-1 w-full max-h-screen mx-auto text-lg h-full shadow-lg bg-white overflow-y-auto">
<Toaster />
<AppRoutes />
</div>
</div>
</div>
</div>
</AppContext.Provider>
</AuthProvider>
);
}
export default withUser(App);

Answer 1

I figured out a solution for this
First let's divide this section into two sections (the settings icon and the bigger div that you want to hide)
Then add this to the big div className: ${colapse ? "hidden" : "right-0"} so it will just be hidden instead of -right-24
and for the icon div add this to its className:${colapse ? "animate-pulse right-0": "right-24"} the animation is of course optional I just added it.
This is the code but I forgot and named the component Side.jsx instead of TrackPage.jsx
import React, { useState } from "react";
function Side() {
const [colapse, setColapse] = useState(true);
const handleMenuCollapse = (e) => {
e.preventDefault();
setColapse(!colapse);
};
return (
<div>
{/** the big div */}
<div
className={`flex w-24 h-96 bg-indigo-500 absolute top-[calc((100vh-384px)/2)] ${
colapse ? "hidden" : "right-0"
} " bg-primary rounded-b-lg items-center justify-center`}
>
Setting
</div>
{/** the icon div */}
<div
className={`flex w-12 absolute top-[calc((100vh-384px)/2)] h-12 bg-indigo-500
${colapse ? "animate-pulse right-0" : "right-24"}
cursor-pointer bg-primary rounded-l-lg items-center justify-center`}
onClick={handleMenuCollapse}
>
<div className="w-5 h-5 bg-white rounded-full " />
</div>
</div>
);
}
export default Side;
take a look Live on codesandbox.