Fix sticky navbar on mobile devices

the-programmers-hangout / website

🌳 TPH website

https://theprogrammershangout.com

MIT License

103 stars 69 forks source link

Fix sticky navbar on mobile devices #422

Closed oof2win2 closed 2 years ago

oof2win2 commented 2 years ago

Resolves #421 with the use of gyroscopes which most mobile devices have nowadays. Since computers usually don't have them, those won't be impacted.

Another method would be to use ua-parser-js, which is only 6kB in size, but IMO this method should be tried out first. Works on my SM-A505F and both my laptops.

oof2win2 commented 2 years ago

Understandable, fixed. Only issue I have is that ESLint complains of window to not being defined.

Specy commented 2 years ago

I fixed this previously by simply adding display:none to the 700ish px breakpoint, the sticky header should show on landscape tablets so looking at manifest won't work

oof2win2 commented 2 years ago

Fair enough, that makes sense from my point of view. @Xetera ?

oof2win2 commented 2 years ago

User-agent did not work with SSR, Gatsby doesn't like it (which is why tests failed) since it's not available server-side. Sceen size from useWindowSize is though, so used that instead.

oof2win2 commented 2 years ago

Looks like this on mobile, completely removing the sticky header there. Moved to CSS rather than JS too, as per request.