In a past experiment, I added resizing to the layout.
When I integrated it into the project, it behaved weirdly when the timeline’s height get taller, the header goes off screen. So this experiment revists the layout to fix the problems with it.
The outer layout uses flexbox. So adjusting one part - like increasing the height of the timeline/footer - impacts the expansion of other areas.
Use a fixed layout
position: fixed for the header, sidebar and footer. Only the
<main> content should use flexbox.
- The footer and sidebar’s size should be adjustable.
- Sidebar should be hidden unless selected.
- Animate the sidebar when it becomes visible (slide-in).
- Sidebar should not overlay the header or footer. It’s height should be dynamically calculated.