How to make the mobile menu expand inline instead of an overlay or offcanvas

Is it possible to make the mobile menu expand from its location instead of overlaying or coming in from off canvas? IE behave like an accordion but only show the mobile menu icon at specific breakpoints, otherwise showing the full menu?

Or do I need to do this manually by putting a visible condition on an accordion for certain browser widths and hiding the desktop-width menu?

These images show what Iā€™m attempting:


Well I found a workaround: basically installed Ubermenu and used a shirt code ā€” it takes care of the sliding in and out on the mobile.