It's obvious that a lot of work has been put into making the backend interface mobile responsive, but I don't see any obvious way of making the sidebar (present in many, many plugins) collapse like the main top navbar does.

Without the side menu collapsed, it eats up about a third of the display width on a standard phone screen, making the interface almost unusable.

This is a shame because apart from this, the interface seems to be very slick and intuitive on mobile devices.

Have I missed something, or is this a shortcoming of the interface at the moment?

Yes, same issue. Should we extend any backend template to override this?

Hi guys, I have found some small tricks to make the sidebar display, but it needs more fine-tuning. The main idea is: when the backend shows on mobile, the sidebar should display only with icons and hide text parts. To do that, you can go to the modules/backend/assets/less/controls/sidenav-tree.less and change this part: @media (max-width: @screen-sm).

At there, please replace the .sidenav-tree with:

.sidenav-tree {
        width: 59px;
        height: auto !important;
        div.group h3 {
            display: none;
        }
        .top-level > li {
            ul li a {
                height: 59px;
            }
            ul li a span.header {
                display: none;
            }
        }
    }

Then, to compile the backend less, you will need to run:

php artisan october:util compile assets

This approach replace the combined css in current OctoberCMS. However, you can also hook to the backend by using your own plugin to inject the style (with similar idea) to make it works.

The rest of the mobile compatibility of OctoberCMS is: making all generated tables are mobile responsive. I will try that hack later and will let you know.

Cheers,