search

ifmeorg / ifme

Free, open source mental health communication web app to share experiences with loved ones
http://www.if-me.org/
GNU Affero General Public License v3.0
1.45k stars 731 forks source link

Make the header bar component stick to top #2241

Closed thatsthat closed 10 months ago

thatsthat commented 12 months ago

Description

  1. Created two additional div nodes in order to apply CSS position: sticky property to the header component.
  2. Added some extra css properties to the header component div container.
  3. Created an additional hook named stickyHeader which is invoked from the header component and contains the logic to detect scrolling to change the background color of the header to black when user scrolls down and restores its original color if user scrolls up to the top.

Corresponding Issue

Issue 2155

Screenshots

chrome-capture-2023-6-24

Reviewing this pull request? Check out our Code Review Practices guide if you haven't already!

welcome[bot] commented 12 months ago

Thank you for opening this pull request with us! Be sure to follow our Pull Request Practices. Let us know if you have any questions on Slack.

julianguyen commented 11 months ago

Hey @thatsthat can you rebase from main? I recently merged in some changes to fix the broken CI build! Thanks!

julianguyen commented 11 months ago

Thanks so much for taking this on 🎉 Let me know if you have any questions :)