How to customize side menu with js and css? and neutralize the translate action on position: fixed?

Question

css

The bottom line is to make an interactive side menu.
By clicking on the hamburger, the sidebar should slide out to the left (or right) and most importantly, move all other content away and the button should be an element of this content (I have wrap) and move along with it at the same time, the button itself and the sidebar should be fixed.
Here is a sketch https://jsfiddle.net/015y6aq5/5/
The fact is that when the menu is called at the end of the page, the button is thrown to the very top at the beginning of the document, how to fix this?
PS The arrangement of elements in the house should remain the same as in my example
(I read somewhere that the translate property affects this in such a way as to bypass or neutralize)

Answer 1

I answer to myself, maybe it will be useful to someone
https://jsfiddle.net/015y6aq5/7/

Answer 2

Something like this - https://jsfiddle.net/Alex_Bond/30vv6dos/1/ ?

Answer 3

Like this: https://jsfiddle.net/015y6aq5/2/