andrewebdev
commented
1 hour ago I created the Toolbar component but it does not yet include the "sticky" behaviour where you can optionally have it stick to the top of it's layout component, and content scrolls underneath.
We need some common layout containers. These provide consistent layout styles for any components that inherit from them. These containers can also provide common hooks that could be handy for any other container, like responsive hooks etc.
The initial containers that we want is:
This is the basic layout container. We can use this directly if we don't have any fancy layout, but if we want to build custom layout containers (like the sidebar container), then those layout containers should inherit from this one.
This container does not take other components like text or paragraphs etc. It's immediate children should be other layout containers, or content containers.
This is a container that is meant to carry the text content and other related content.
A toolbar that can take a horizontal list of items, like buttonsl. The toolbar should have properties that allow you to set it to absolute or fixed positioning if needed.
This is the first of the more complex composite containers. This container has a sidebar with related content. Direction on the container can be specified to have the sidebar left or right. The sidebar has a property that allows us to show/hide the sidebar when on larger screens. On mobile views, the sidebar will stack either above or below the main content, depending on the direction (left = above, right = below)