title: React tailwind css -right position show scroll bar
body: <p>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.</p>
  <p>Image 1 -: showing sticky bar and can click setting icon to hide the bar. There is no horizontal scroll bar.</p>
  <p><a href="https://i.stack.imgur.com/ECTeh.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ECTeh.png" alt="enter image description here" /></a></p>
  <p>Image 2 -: after hide the bar, horizontal scroll bar is appeared and can see the box when I scroll.</p>
  <p><a href="https://i.stack.imgur.com/Fp4C7.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Fp4C7.png" alt="enter image description here" /></a></p>
  <pre><code>const TrackPage = () =&gt; {
  
    const handleMenuCollapse = (e) =&gt; {
      e.preventDefault();
      setColapse(!colapse);
    };
  
    return (
      &lt;&gt;
        &lt;div&gt;
          &lt;div
            className={`flex w-24 h-96 absolute top-[calc((100vh-384px)/2)]  ${
              colapse ? &quot;-right-24&quot; : &quot;right-0&quot;
            } &quot; bg-primary rounded-b-lg items-center justify-center`}
           &gt;
            &lt;div
              className=&quot;flex w-12 h-12 absolute -top-0 -left-12 cursor-pointer bg-primary rounded-l-lg items-center justify-center&quot;
          onClick={handleMenuCollapse}
            &gt;
              &lt;SettingIcon /&gt;
             &lt;/div&gt;
            Setting
           &lt;/div&gt;
   
        &lt;/div&gt;
      &lt;/&gt;
    );
  };
  
  export default TrackPage;
  </code></pre>
  <p>App.jsx</p>
  <pre><code>import React, { useState, useEffect } from &quot;react&quot;;
  import Header from &quot;./components/header&quot;;
  import SideMenu from &quot;./components/side_menu&quot;;
  import AppRoutes from &quot;./routes&quot;;
  import withUser from &quot;./hocs/with_user&quot;;
  import { isMobile } from &quot;react-device-detect&quot;;
  import { useLocation } from &quot;react-router-dom&quot;;
  import { AuthProvider, setAccessToken } from 
  &quot;./auth/auth_provider&quot;;
  import { Toaster } from &quot;react-hot-toast&quot;;
  import AppContext from &quot;./components/app_context&quot;;
  import &quot;./i18n&quot;;
  import &quot;./App.css&quot;;
  
  function App(props) {
     const [colapse, setColapse] = useState(isMobile);
     const [sideBarFull] = useState(true);
     const location = useLocation();
  
    const IsNormalPage = () =&gt; {
       const blankPages = [&quot;/login&quot;];
  
       for (let i = 0; i &lt; blankPages.length; i++) {
         if (location.pathname.startsWith(blankPages[i])) return 
   false;
      }
       return true;
     };
  
    useEffect(() =&gt; {
       if (props.user) setAccessToken(props.user.t);
     }, []);
  
    const PageHeader = () =&gt; {
       return (
         &lt;div className=&quot;h-[72px] w-full flex items-center align-middle justify-center bg-neutral shadow&quot;&gt;
           &lt;div className=&quot;w-full text-center&quot;&gt;
            &lt;Header /&gt;
           &lt;/div&gt;
          &lt;/div&gt;
        );
      };
  
  
    return (
       &lt;AuthProvider user={props.user}&gt;
        &lt;AppContext.Provider
          value={{
             colapse: colapse,
             setColapse: setColapse,
            }}
           &gt;
          &lt;div className=&quot;relative w-full min-h-screen h-full&quot;&gt;
            &lt;div className=&quot;flex flex-row min-h-screen&quot;&gt;
              &lt;div className=&quot;w-auto z-0 &quot;&gt;
                 &lt;div className=&quot;flex-1 w-full max-h-screen mx-auto text-lg h-full shadow-lg bg-white overflow-y-auto&quot;&gt;
              {IsNormalPage() &amp;&amp; &lt;SideMenu showFullMenu={sideBarFull} /&gt;}
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div className=&quot;w-full max-h-screen flex flex-col z-10&quot;&gt;
            {IsNormalPage() &amp;&amp; &lt;PageHeader /&gt;}
            &lt;div className=&quot;flex-1 w-full max-h-screen mx-auto text-lg h-full shadow-lg bg-white overflow-y-auto&quot;&gt;
              &lt;Toaster /&gt;
              &lt;AppRoutes /&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/AppContext.Provider&gt;
  &lt;/AuthProvider&gt;
    );
  }
  
  export default withUser(App);
  </code></pre>