How can I make an essential naviational treeview sidebar work on mobile?
I'm currently working on a web application that will have significant user-created content. I would like to organize this content hierarchically, with a side-bar on the left to navigate, some buttons above it, a navbar at the top, and the main content to the right filling up the whole page. This is similar to what Atlassian's Confluence does (except I'll probably have a bit less text above the treeview for navigaton):
On a desktop or laptop, or even maybe a tablet, this works great — the user can quickly get an overview of the structure of the content that they're looking at, collapse irrelevant parts, and quickly jump to any page. Additionally, I can use the space above the treeview to show other information and provide UI that is common to each section.
But, on mobile (a phone), this UI is much worse. I could have a collapsible sidebar to the side, but I've used a competitor web application that does this and it results in the system being very difficult to use. Furthermore, I already have a hamburger button for a collapsible navbar, so having two may be confusing, and at the very least will be clunky in any way that I can see to do it. I could put the sidebar before the main page content, but then the user has to scroll to get at the content on the page that they want to view, which is likely to be annoying, and I want a very smooth user experience. If I put it on the bottom, below the main content, then the user is liable to miss it.
As such, I ask, how can I take the information that is presented in this design on desktops and laptops, and cleanly, smoothly, reliably, and easily (for the user) present it on mobile?
EDIT: I tried loading a Confluence instance on my phone, and it was a disaster — it basically renders as a desktop application with some of the text enlarged. It looks like they put no thought into the mobile design, or, at least, if they did then it's not setup on the instance that I checked.