[ui] enhanced the navbar

[HarshitaJaiswal5]

PR Description
A clear and concise description of what the PR does.

This PR enhances the navbar by:

1. Making it sticky for better accessibility while scrolling.
2. Applying a frosted glass effect for a modern, polished look.
3. Implementing a theme-based hover effect for interactive color changes.
4. Adding a unique underlining animation on hover for each navbar tab.

Related Issues:
Fixes: #33

Changes:
List the detailed changes made in this PR.

1. Made the navbar sticky to stay at the top during page scrolls.
2. Added a frosted glass effect to the navbar background for visual enhancement.
3. Created a theme-adaptive hover effect that changes the tab color based on the active theme.
4. Developed an animated underlining effect when hovering over different navbar tabs.

Testing Instructions:
Detailed instructions on how to test the changes. Include any setup needed and specific test cases.

1. Pull this branch.
2. Scroll down the page and verify that the navbar remains sticky at the top.
3. Hover over various navbar tabs to observe the dynamic color change based on the current theme.
4. Check for the frosted glass effect on the navbar background.
5. Hover over each tab and ensure the underlining animation works smoothly.
6. Test on both light and dark themes for color consistency.

Checklist
Make sure to check off all the items before submitting.

• I have performed a self-review of my code.
• I have commented my code, particularly in hard-to-understand areas.
• My changes generate no new warnings.
• I have tested the navbar for sticky functionality, hover effects, and underlining animation.
• I am working on this issue under Hacktoberfest.

Zen.Note.and.1.more.page.-.Profile.1.-.Microsoft.Edge.2024-10-24.08-45-32.mp4