Redesign mobile view
Combines #103 and #106 among other previous comments.
@CBernsCode and I discussed this in person today. Below is a summary of the key parts of the conversation.
The idea of hiding the code/moving it to the bottom. When the code is moved to be hidden or below the scene, it does not highlight a large aspect of MYR. That being, the fact that the scene is 100% generated by code. When someone sees just the scene, it would look more like an art project designed in an art tool. We want to highlight what MYR is.
With that, we discussed how to best make it appear on mobile. One option suggested was having a snackbar appear on load with a button to click to launch into VR. This would combine the two worlds by showing the code right away, but also being able to easily view the scene without scrolling.
Mobile Header On mobile, the header gets very tight. On certain devices, the buttons overlap. Some buttons are dropped due to size constraints and instead rely on the sidebar.
To remedy this, we discussed the concept of creating a drop down menu. The header would have the hamburger menu, play button, and stop button on the left where they usually are. On the right side, when an icon would need to be dropped, it would instead cause all of the other icons to appear in a drop down menu. An upside down carrot icon (^) would appear in which clicking it would have a drop down menu with all of the options.