title: Looking for an elegant multi-state (open/close/pin/hover) side drawer react component to recommend for my dev team to reference. I'm UX - whacha got?
body: <p>Examples I have found show OPEN/PIN and CLOSE (a la side-nav/menu) but nothing that includes a hover or a floating state.  Think JIRA side menu, where the left panel overlaps the page contents/backlog table, where youhover and look where you are and then it closes on you....that comes the closest to an example to what I'm looking for.</p>
  <p><a href="https://i.stack.imgur.com/Y7I49.jpg" rel="nofollow noreferrer">Example of Jira panel</a></p>
  <p>Only, I'd like to have a 3-click + hover system:</p>
  <ol>
  <li>1-click to <strong>pin</strong> (ie: have page contents responsive 'stick' to the panel)</li>
  <li>1-click to <strong>float</strong> (ie: have page contents scroll behind the floating open panel)</li>
  <li>1 click to <strong>close</strong>.</li>
  <li>I'd also like the ability to <strong>hover</strong> over the closed panel and have it <strong>open</strong>.</li>
  </ol>
  <p>I know I'm asking a lot....</p>
  <p>If you find an example, I need to be able to see a working example of react libraries without a dev computer - I'm on a mac. We're building a component library together and I need to see what's out there and available as a source (starting point) so that we can then discuss tweaks and changes for our use.</p>
  <p>I love sites like this: <a href="https://www.ag-grid.com/react-data-grid/" rel="nofollow noreferrer">https://www.ag-grid.com/react-data-grid/</a>
  or this: <a href="https://reactjsexample.com/" rel="nofollow noreferrer">https://reactjsexample.com/</a></p>
  <p>That provide me with a menu and examples to click though so that I can speak intelligently with my team and have proper visuals and examples.</p>
  <p>Anything you find that has this functionality would be great... thank you!</p>
  <p>Marlene</p>