Mobile first solution

The page overlay that shows up when the sidebar is open (on mobile) surprising gave me quite a bit of difficulty. I initially put the overlay element outside the header and whenever I showed it, it covered the page but not the header. I played around with the z-index but then it covered the header and sidebar. Somehow I learned that as the sidebar itself was a child of the header I could not put the overlay between the header and the sidebar just by manipulating the z-index. Finally solved it by just putting the overlay element in the header component

Tried to implement lazy loading for the images and a placeholder spinner. Gave up on this as the results weren't exactly what I was looking for. Would love to study and practice more with lazy loading and maybe implement it in a future challenge. Any feedback on good resources would be appreciated