Sidebar can be easily created using a script or script framework but it can be created using pure CSS as well.
I am going to use the same concept as switching themes using pure CSS. We’re going to have a hidden checkbox input HTML element and then based on the :checked selector we can add add or remove the style.
Let’s dive in and add the input element and keep it hidden. Also, let’s add the main section that will have all the contents and a button inside to toggle the sidebar.
Now, let’s add the sidebar content and keep it outside of the main section area by positioning it fixed. We’ll keep the style a bit different for the sidebar close button.
Finally, add the style for the :checked selector.
How to move that sidebar to bottom?
Just change the position of the sidebar like this:
checkbox property pure CSS sidebar