Use width breakpoint on sidebar

JaredPilbeam2 — Sat, 11 Dec 2021 17:50:24 GMT

In my app, I'm having trouble shrinking the size of the sidebar so that it looks good on a mobile device. Here's the app in Code Pen: https://codepen.io/underjollyroger/pen/XWXPgqm?editors=1100

In this older post they collapse the sidebar into a button, but they're using Bootstrap: First attempt at bootstrap w/ sidebar. I was wondering how to do that based on this Responsive apps using CSS sample code because I'm not familiar with Bootstrap.

(1) When the width breakpoint is less than medium (769-992 pixels) I'd like the sidebar to disappear. (2) In its place I'd like there to be a button. When the button is clicked I'd like to show the content of the sidebar.

To at least get the sidebar to disappear, I can't even find its element ID. This doesn't work:

.esri-view-width-less-than-medium .sidebar {
    display: none;
}‍‍‍‍‍‍‍‍‍

topic Use width breakpoint on sidebar in ArcGIS JavaScript Maps SDK Questions

Use width breakpoint on sidebar