Auto hiding side panel on hover custom CSS that somewhat works

[NiaTheCat]

There was a thread in 2023 I was looking at that implemented auto hide of the side bar using CSS and a clickable border to unhide it. I found this difficult to use on a 4k monitor because the border was too small on it and the browser kept trying to resize the window instead. (full disclosure, this is made with AI. I have tested it and know just enough CSS to know this is not dangerous, but please, always verify yourself for any CSS you use online.)

There are very likely mistakes in this, but in my testing it works fine. If any real CSS devs come by please feel free to improve it.

This will make it so that with a side panel on the left side of your screen, you can move your mouse to the very left to make the side panel appear. It will remain visible until you move your cursor out of it, and it will disappear again.

div#panels-container {
    width: 1px !important;
    position: absolute !important;
    opacity: 0;
    z-index: 9999;
    transition: 0.15s ease;
}

div#panels-container:hover,
div#panels-container:has(#panels:hover, button:hover) {
    width: 35px !important;
    opacity: 1 !important;
}