Add Drawer component for Map page side menu (potential mobile UI/UX improvement)

[solderq35]

Example (Sustainability Map)

Adapt however they're setting the drawer from:

• https://osu-sustainability-office.github.io/sustainability_map/#/
• https://github.com/OSU-Sustainability-Office/sustainability_map

Screenshots

Desktop

Mobile

Disclaimer / Discussion

• Don't try to copy the UI from Sustainability Map exactly, there is this bug with their drawer menu that needs fixing, and some of the button placements for their mobile styling is questionable
• Hopefully though the general concept makes sense, use a drawer menu with the little "hamburger icon" highlighted in the screenshots above (the 3 horizontal lines) as better UI on the Energy Dashboard than the current "Show / Hide Building Menu"
• Also try to make the Energy Dashboard Map side menu narrower / single column as discussed earlier (so the left side map menu doesn't overlap with the map page's building popups)
  • 
• Or can copy the Sustainability Map's idea of putting this menu on the top row, for mobile (since portrait view phone has a lot of real estate to put a horizontal nav or drawer menu)
  • 
• Copy the OSU Sustainability Wiki's behavior, where clicking outside of the drawer menu (on the right) closes the drawer automatically
  • Similarly, what if opening the building popup from map page closed the drawer? Then it doesn't matter how much horizontal space the drawer takes anymore
  • 
• Similar "topnav for mobile" idea as Sustainability Map (my own portfolio website), but simpler layout with a single item per row:
  •