-
Notifications
You must be signed in to change notification settings - Fork 0
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
Conversation
…umes for django_browser_reload
This reverts commit 942641b.
There was a problem hiding this 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.
There was a problem hiding this 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!! 🎉
Sure thing! What're the specific issues we're facing? - Feel free to PM about this! 😄 |
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 componentheader
. 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](https://private-user-images.githubusercontent.com/59626759/296758587-7842fe9f-7d2b-4751-a0d6-4aef48af5233.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MzQ0NTQ3NjMsIm5iZiI6MTczNDQ1NDQ2MywicGF0aCI6Ii81OTYyNjc1OS8yOTY3NTg1ODctNzg0MmZlOWYtN2QyYi00NzUxLWEwZDYtNGFlZjQ4YWY1MjMzLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDEyMTclMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQxMjE3VDE2NTQyM1omWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTQzMTE3NGNlMDQwMWNmMDM3MWFlM2M3NjI5NzU3NjUwNjkzNzg3NzQ1NjNlN2U2OWFhZjU2YjhjN2RjODYwOGUmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0In0.ovhLRu0Bxzx51iJNhBWGhqi6FOD2d5S3Lmlsqg2hQhE)
Mobile header:
![Mobile header](https://private-user-images.githubusercontent.com/59626759/296758873-868ed137-e317-4b6a-9310-9ac64835ee1d.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MzQ0NTQ3NjMsIm5iZiI6MTczNDQ1NDQ2MywicGF0aCI6Ii81OTYyNjc1OS8yOTY3NTg4NzMtODY4ZWQxMzctZTMxNy00YjZhLTkzMTAtOWFjNjQ4MzVlZTFkLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDEyMTclMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQxMjE3VDE2NTQyM1omWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWRhMDc0YTIxNDZhY2NjNWYxYjkzYTAzMTEwNjJhY2E1NDc5NDdmNTZlN2Y2ZDdhN2YyNzU3M2NlYmRhMDE4YWImWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0In0.MpDL70n3BZLP7TWWKBfBDGmgTHd_JvAL8hUTYh0irBY)