Feat/hot 005/setup tailwind navbar

[katporks]

This PR introduces the configuration of Tailwind CSS and Alpine.js to construct the header component. Alpine.js variables, defined within header.html, are accessible in nested templates due to their initialization in the parent component header. It's important to note that Alpine.js operates entirely on the client-side, in the browser, and interacts with the HTML after Django's server-side rendering is complete.

The header component includes the following variables:

• isMenuOpen: This variable indicates the state of the mobile hamburger menu, determining whether the mobile navigation should be displayed.
• isSearchClicked: This variable controls the visibility of the search modal upon clicking the search icon.

This PR lays the groundwork for the header and navigation. In a subsequent PR, once the site map's links are finalized, I plan to incorporate submenus for the parent links in both the desktop and mobile navigation.

Desktop header:

Mobile header:

[JoltCode]

Thanks Kat! Will take a look too 👍

[JoltCode]

Looks great - nice use of Tailwind / CSS!

@JoltCode may have a better idea how to fix the custom spacing and breakpoint issue 😄

The great thing is that Alpine.js works nicely with Web Components, so hopefully integrating them shouldn't be too big of a refactor:

• Any logic encapsulated in the Web Component can replace the alpine.js equivalent.
• Anything missing from the Web Component logic can be supplemented by alpine.js easily.

Sure thing! What're the specific issues we're facing? - Feel free to PM about this! 😄