fixed navbar bug on small devices

[tushar912]

I have made this commit for the issue #211 regarding the navbar on small devices

[netlify[bot]]

Deploy preview for codeuino processing.

Building with commit 0a986a06629996e4b30e3b94f0d6b0ff871c0252

https://app.netlify.com/sites/codeuino/deploys/5f39487135a421000885f6fb

[tushar912]

I have changes for 3 mentioned in issue to push nav right .....i did not get what is exactly meant by part 2.....can u explain it.

[DevanshCodes]

I have changes for 3 mentioned in issue to push nav right .....i did not get what is exactly meant by part 2.....can u explain it.

@ksraj123 can you explain him what you meant by 2nd comment in the issue you opened.

[ksraj123]

Hi, when the navbar opens then a backdrop should appear clicking anywhere on the backdrop should close the navbar. The user should not be able to navigate or scroll through the page with the navbar open its not good user experience.

Let's have a look at how it is now -

The user can easily scroll through the page and even click on links such as Team or Code of Conduct without the navbar ever closing.

Hint - we are already using material-ui you can use Material UI Drawer to implement both the side navbar and backdrop functionality as your current side navbar does not look very nice. We want the material drawer only for screen width below which the navbar collapses

Here is how material drawer looks

In our case, clicking on the hamburger icon will make the drawer appear, and clicking on the backdrop will close it.

[ksraj123]

Please exclude package-lock.json from your PR. Also, maybe you could implement this after you pull the latest changes after PR #214 gets merged otherwise there could be merge conflicts and that PR changes a lot so there could be some more work required on the navbar part.

[tushar912]

ok sure.Thanks!