Makes navbar sticky

[octaviookumu]

Fixes Issue

Closes #137

Changes proposed

• Make Navbar accessible when scrolling (Desktop and Mobile)
• When scrolling, background colour is set to white
• When having scrolled to top, background colour is reset to transparent
• Navbar component now contains code for both desktop and mobile navbars

Check List (Check all the applicable boxes)

• My code follows the code style of this project.
• My change requires changes to the documentation.
• I have updated the documentation accordingly.
• All new and existing tests passed.
• This PR does not contain plagiarized content.
• The title of my pull request is a short description of the requested changes.

Screenshots

• Scrolling (Desktop)

• Scrolled to top (Desktop)

• Scrolling (Mobile)

• Scrolled to top (Mobile)

Note to reviewers

[vercel]

@octaviookumu is attempting to deploy a commit to a Personal Account owned by @reactdeveloperske on Vercel.

@reactdeveloperske first needs to authorize it.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
reactdevske-website	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 18, 2023 10:35am

[octaviookumu]

Hi @reactdeveloperske. Is there any further action needed on this?

[orama254]

hey @octaviookumu could you run the following commands locally, related to the failing action, on your environment then push it in a new commit?

[octaviookumu]

hey @octaviookumu could you run the following commands locally, related to the failing action, on your environment then push it in a new commit?

Okay. Let me do that. Thanks.

[octaviookumu]

Btw I noticed some existing tests are failing. Also happening on develop branch.

[orama254]

Btw I noticed some existing tests are failing. Also happening on develop branch.

There seems to be an issue with webkit, thats why it's failing. Actively looking into it.

[orama254]

LGTM ✅