The main purpose of the
Layover is to attempt to keep a child component fixed to a
parent and stay within the viewport only once the child has become "visible" on the page.
This should probably only be used as an internal component that is used behind the scenes
in the Menu, but it was helpful to create a documentation page for testing
and future documentation.
Layover will attempt to automatically make the child component initially render within the
viewport once the visibility has been toggled to
true. This is super helpful since it will
make components that would appear off screen due to scrolling too much fully visible. If the user
attempts to scroll, the child can either automatically hide or attempt to move itself to stay within
the viewport. When the user scrolls too far down, it will flip the child so that it now appears
over the parent instead of below. If the user still scrolls down, the child will disappear. The
same logic is applied if the user scrolls upwards (flip to be from above to below).
Some additional features is that the
Layover can attempt to make the child span the entire viewport.
This "feature" really only works well on Android devices since iOS does not include the soft keyboard
as part of this calculation and there is no way to detect keyboard visibility or size reliably.
linkYou are probably looking for the Menu instead of this component. This is a very low level component and really used behind the scenes.