This seemed like a good idea at the time. I’ve plodded along making fairly straightforward web sites in the past, but the more people use mobile devices, the more I need to be aware of distribution of screen real estate. Collapsing/expanding menus has been part of this new approach.
Further to this, I’ve started using a grid display. As someone with no sight, I find this makes a lot more sense to me, and on first impression, is much more approachable.
Currently, this is my css code:

body {
  min-height: 100vh;
    display: grid;
    grid-template-rows: 60px 1fr auto;
    grid-template-columns: 300px auto;
    grid-template-areas: 'menubtn header '
                         'sidebar content'
                         'footer footer';
  }
  #menubtn {
    grid-area: menubtn;
  }
  #header {
    grid-area: header;
    background-color: white;
  }
  #sidebar {
    grid-area: sidebar;
    background-color: white;
 }
  #content {
    grid-area: content;
  }
  #footer {
    grid-area: footer;
    background-color: white;
  }

As you can see, I’ve a button in the top lefthand side of the header, and the idea is to click this button to either collapse or display the menu.
Is there a way using JavaScript to resize the content div and close the menu, and to take it back to its original size when the menu is reopened?
Here’s some code that didn’t quite work:

  echo '<menubtn>';
  echo '<a href="javascript:void(0)" 
onclick="closeNav()">×</a>';
  echo '</menubtn';

JavaScript:

   <script>
      /* Set the width of the sidebar to 250px and the left margin of the page content to 250px */
      function openNav() {
         
document.getElementById("mySidebar").style.width = 
"250px";
         
document.getElementById("main").style.marginLeft = 
"250px";
      }

      /* Set the width of the sidebar to 0 and the left margin of the page content to 0 */
      function closeNav() {
         
document.getElementById("mySidebar").style.width = "0";
         
document.getElementById("main").style.marginLeft = "0";
      }
   </script>

Code overload I know, but I’m trying to provide as much information as I reasonably can. I’m quite happy to accept that I’ve totally misunderstood how this works.
Thanks for any feedback.