Issues sideheader on click open only on medium devices

Hi!
I'm using the blocks template Header Layout 3. Where's a sidebar open on click by default.

Now i'm trying to change it slighty so that:

• the sidebar is only open on click on medium devices

• the sidebar is fixed open on large devices

• the sidebar is a hamburger menu on small devices ( as it is by default )

What i've done so far is changed classes on the body & the header trigger and added data-classes to the body:

But there are issues with visibility of the sidebar & position of the trigger when resizing the browser ( guess one of the reasons is the side-header-open class which is added by script ? )

Thanks in advance :)