Improve navbar responsiveness across all devices

[Dippp10-ally]

🧭 Improve Navbar Design and Responsiveness

✨ Feature Summary

Enhance the application's navigation bar by improving its responsiveness, accessibility, and overall user experience across different screen sizes.

🧩 Problem / Motivation

The current navbar could be more intuitive and responsive. On smaller screens, navigation elements may become crowded or difficult to access, and the overall layout can be improved for better usability and consistency.

💡 Proposed Solution

Update the navbar to include:

• A fully responsive layout for desktop, tablet, and mobile devices.
• A mobile-friendly hamburger menu with smooth open/close animations.
• Improved spacing, alignment, and typography.
• Active navigation link highlighting.
• Better hover, focus, and transition effects.
• Enhanced accessibility with keyboard navigation and ARIA attributes.
• Consistent styling that matches the overall application theme.

🗂️ Affected Area

• Navbar component
• Navigation styles (CSS/Tailwind)
• Responsive layout
• Mobile navigation menu

🎯 Benefits

• Provides a smoother navigation experience across all devices.
• Improves accessibility and keyboard usability.
• Creates a cleaner and more modern interface.
• Enhances consistency with the application's design system.
• Makes navigation easier for both new and returning users.

📌 Additional Notes

This enhancement should focus on improving the navigation experience without affecting existing routes or application functionality. Ensure the navbar remains responsive, accessible, and easy to maintain.

[Dippp10-ally]

@ashmitkumar2005 ji , do assign above issue number 16 to me also.....do assign above labels called as gssoc:approved , level:intermediate, type:docs , quality:exceptional to above issue number 16 also.....