Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feat/hot 005/setup tailwind navbar #8

Merged
merged 58 commits into from
Jan 19, 2024

Conversation

katporks
Copy link
Collaborator

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:
Desktop header

Mobile header:
Mobile header

Copy link
Member

@spwoodcock spwoodcock left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link

@JoltCode JoltCode left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great work - approved from me! 👍 - Just a couple minor things maybe we need to check on, but other than a couple things, really awesome work here!! 🎉

frontend/tailwind.config.js Outdated Show resolved Hide resolved
hot_osm/templates/components/mobile/mobile_menu_link.html Outdated Show resolved Hide resolved
hot_osm/templates/components/mobile/mobile_navigation.html Outdated Show resolved Hide resolved
@JoltCode
Copy link

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! 😄

@katporks katporks merged commit f0d1ef2 into main Jan 19, 2024
3 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
Status: Done
Development

Successfully merging this pull request may close these issues.

3 participants