'Hide Sidebar on small screens without leaving blank space - Tailwind an React

I need to hide my sidebar on small screens and I succeed but it always leaves me with a blank space which I don't need. I have tried using fixed and it works but when the screen is bigger the fixed is kept and it shows the content below the sidebar. This is my code:

            <div

                className={`sm:relative sm:w-1/4 md:w-2/8 lg:w-1/6
                         bg-gray-50 border-r border-gray-200
                            ease-in-out duration-300 ${
                                showSideBar ? "translate-x-0" : "-translate-x-full"
                    }`} 
            >

Gif: problem

cssreactjstailwind-css


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions