===Description
The main menu and notification drawers do not act like drawers. They are not opened. Instead, the //content// is re-positioned around the drawers. This makes the drawers feel foundational, as if the website was literally built on top of the menus, not the other way around.
This task posits that the content is what's most important and should carry the most weight. The menus, drawers, and dialogs should be lightweight peripheral views that glide over the top and invite dismissal, not heavyweight hitters that shove or shift the content out of the way to show secondary information and require beckoning the content back into view instead of drawer dismissal. Animating drawers in and out over the content is far less distracting than animating the content and primary focus in and out.
{F26323158 size=full}
{F26323892 size=full}width=300}
A lightweight drawer feels much more appropriate. E.g:
{F26323214 size=full}
=== Designs
{F27422325 width=300}
I also like this pattern, found in [[ https://material.io/design/components/navigation-drawer.html#modal-drawer | Google Material Design ]],====Swipe actions
The menu should be dismissible either by clicking outside of it, or by swiping it to the left. wherein you can dismiss the drawer either by clicking outside of it, or by swiping it to the left:This pattern comes from [[ https://material.io/design/components/navigation-drawer.html#modal-drawer | Google Material Design ]].
{F27422338}
On Android apps it is also common for a swipe rightwards from the left-edge of the screen to open such a drawer. Though on iOS web browsers (Chrome, Safari, Firefox) swiping rightwards from the left-edge of the screen takes you to the previous page (i.e. it's a back button). Open question whether we can support swipe to open only on Android.