title: Collapsing and Expanding Side Panels in React
body: <p>I apologize is this is a very simple task this is really my first time transitioning to react. </p>
  
  <p>I have an existing application built with js/css/html that I am attempting to shift over to react. It has a full length horizontal side panel that is open by default, when the window is shrunk beyond a point it collapses with a hamburger icon, and expands again when the window is resized larger. Fairly easily done with media queries in css. </p>
  
  <p>A perfect example is <a href="https://purecss.io/layouts/side-menu/" rel="nofollow noreferrer">https://purecss.io/layouts/side-menu/</a> (note the side menu) This is exactly what the current app does. </p>
  
  <p>I'm struggling to do this in react. I can build a side panel that is collapsible (<a href="https://reactjsexample.com/react-side-nav-component/" rel="nofollow noreferrer">https://reactjsexample.com/react-side-nav-component/</a>) and mofify it for my needs, but I cannot figure out how to set it up so it collapses and expands by itself. I understand I can set it up react to use media queries, however I figured there was likely a more efficient way. </p>
  
  <p>Any advice of good libraries to use, or examples would be greatly appreciated.</p>