Ok....
Essential already has Flat Navigation, you're talking about the Nav-drawer which is a different thing. Therefore you'll need to understand Bootstrap collapse component, using AMD in Moodle (Essential uses it's own Grunt compiler for this), editing the layout / tile PHP files, the core_renderer.php file and adding to the LESS and using Grunt to compile the LESS into CSS with Node.js and NPM. For both 'Grunt' bits, read the top of the theme's Gruntfile.js.
The approach you need to take is to add a new Hamburger button at the top (in the appropriate tile file) which then adds as a 'toggle' when clicked to invoke the collapse JS component to hide / show a new 'aside' region that you've defined in the layout / tile markup along with probably add / remove a body class that then affects the LESS CSS classes (possibly with @media constraints) to adjust the overall layout as appropriate. You'll need to take into account the settings that control the page width. Confusing the 'nav-drawer' with block regions might cause issues. I'm not sure in Boost it is an actual block region?
I don't have the code for this or the time to write it, but it is the approach I would take over half a day to a day to solve the problem you have.
G