[FEATURE] Enhance Navigation Menu Appearance with Updated Styling

[chaitanyakatore]

Why do we need this improvement?

• Improved Visual Hierarchy:
  • Borders on Subtitles: Adding borders around subtitle elements improves visual distinction between items, making the navigation menu easier to scan and navigate. This helps users quickly locate and differentiate between different sections or options.
• Enhanced User Experience:
  • Hover Effects: The hover effects, including background color changes and scaling, provide visual feedback, making the navigation more interactive and engaging. This can enhance the overall user experience by making the interface feel more responsive and dynamic.
• Consistency:
  • Icon Styling: Updating the map icon with a white border ensures consistency with the rest of the design, aligning with the overall theme of the application. Consistent styling helps in maintaining a cohesive look and feel throughout the application.
• Accessibility and Usability:
  • Clear Indicators: Adding visual indicators like borders and hover effects makes the navigation elements more prominent and easier to interact with, which is particularly beneficial for users with accessibility needs.

How will this change help?

• Clearer Navigation:
  • Adding borders around sub-titles makes each menu option distinct and easier to distinguish, reducing confusion and helping users find what they need more quickly.
• Better Interaction Feedback:
  • By changing background colors and scaling on hover, users receive immediate visual feedback, which enhances the interactive experience and makes the interface feel more responsive and engaging.
    Improved Visual Hierarchy:
• Consistent Icon Styling:
  • A map icon provides a clear, recognizable visual cue for location-related options, making it easier for users to identify and interact with relevant features.
• Enhanced Usability and Visual Representation
  • The added visual elements help users navigate more efficiently by clearly separating different sections and providing immediate cues about interactive elements, which is particularly useful for users with varying levels of familiarity with the interface.

Screenshots

Mobile View:

 

Desktop View:

How could it be implemented/designed?

Mobile View After Changes :

Desktop View After Changes :

🚧 Breaking changes

No

👀 Have you checked for similar open issues?

• I checked and didn't find a similar issue

🏢 Have you read the Contributing Guidelines?

• I have read the Contributing Guidelines

Are you willing to work on this issue?

Yes I am willing to submit a PR!

[github-actions]

Welcome to AsyncAPI. Thanks a lot for reporting your first issue. Please check out our contributors guide and the instructions about a basic recommended setup useful for opening a pull request.
Keep in mind there are also other channels you can use to interact with AsyncAPI community. For more details check out this issue.