Navbar: Fixed at the top + responsive for mobile.

[deepanshu-prajapati01]

Fixes # (issue no. -> #120 )
Issue Topic -> "Navbar Stickiness and Mobile Experience Issues"

Description

-> Fixed the Navbar at the top of the page which makes the user to navigate through pages easily.
-> Mobile UI of the navigation bar has been fixed.
-> Animations for the closing and opening of the navigation bar.
-> Proper comments added.

Related Issue

1. The issue was related to the Navbar, it was not fixed at the top due to which it was very difficult for the users to navigate through different part of the pages. If user scroll down the page, they have to scroll to the top in order to go to another part of the page. Fixing the Navbar at the top solve this issue and makes the UI more engaging.
2. The Navigation bar had a bad UI for mobile (smaller devices less than 640px). The UI has been updated and fixed for better user engagement. A proper opening and closing animation has also been added in the Navbar for simplicity of the website.

Additional Request

Please assign this PR with the same labels as of the Issue #120 (gssoc-extd, hacktoberfest-accepted, level 2)

Detailed Preview

FIX 1
Before:

After:

FIX 2
Before:

After:

Type of change

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)

Checklist

• My code follows the style guidelines of this project
• I have performed a self-review of my own code
• I have commented on my code, particularly in hard-to-understand areas
• I have added tests that prove my fix is effective or that my feature works
• New and existing unit tests pass locally with my changes
• Any dependent changes have been merged and published in downstream modules

[vercel]

@deepanshu-prajapati01 is attempting to deploy a commit to the deleksharpgmailcom's projects Team on Vercel.

A member of the Team first needs to authorize it.