Redesigning the Top Panel

[sesebear]

Task: Align the Top Panel with the Figma Design and connect Top Panel year dropdown with the Side Panel

Features:

• Add more padding below the navbar component and more padding above the footer. Reference the landing page to gauge how much padding for consistency
• We want to redo the Top Panel UI to be aligned with the Figma. This should be how it looks for when NDVI is selected

and this is how it should look for when Carrying Capacity is selected

Notice how the switching button isn't a button of its own shade. I highly recommend toggling Dev Mode on Figma to look at the specific layout, styles, and icons.

• As of right now, the Side Panel year slider and year dropdown will instantaneously update the Top Panel year dropdown, but the Top Panel year dropdown only updates the Side Panel when a province or county is searched. We want the Top Panel year dropdown to be aligned with both the Side Panel year dropdown and the year slider.