TecKnow / muster-tools

A package for assigning players to tables at multi-table, walk-in gaming events.
GNU General Public License v3.0
0 stars 0 forks source link

Get the BottomNavigation component to stick to the bottom of the window. #14

Closed TecKnow closed 3 years ago

TecKnow commented 3 years ago

At the moment, the BottomNavigation component works but it merely appears under any other content. This means it can change position based on what is selected, or even end up at the top of the page for an otherwise blank page. This isn't ideal. I know that fixing it will involve some CSS, but I don't know CSS very well. I should look at the example projects to see if there's anything I can use there. The BottomNavigation specific examples do not show this behavior.

TecKnow commented 3 years ago

I decided to base my solution on the Sticky Footer template rather than use CSS position: fixed, This means that the <BottomNavigation> component will always be at the bottom of the content area and may be below the lower edge of the viewport, but it will not rise higher than the viewport's bottom edge.

I like this approach because it prevents the awkwardness of having the element jump around the viewport based on the size of the content, while also avoiding the fuss of position: fixed, in either technical detail or piratical problems like having the fixed element cover up information or buttons.