fix(navbar): improve responsiveness for better user experience

[surya4419]

The navbar was not responsive on smaller screens, causing layout issues.
This update ensures the navbar adapts properly across different screen sizes
by implementing a more flexible design.

Refs: #172

Closes #172

Changes

• Refactored the navbar component for better responsiveness
• Updated styles to ensure a smooth user experience across devices

Flags

• Ensure the new changes do not affect other UI elements
• Test on different screen sizes before merging

Screenshots or Video

Before Changes

After Changes

Related Issues

• Issue Navbar Responsiveness Issue – Menu Items Not Collapsing on Smaller Screens #172

Author Checklist

• Ensure you provide a DCO sign-off for your commits using the --signoff option of git commit.
• Vital features and changes captured in unit and/or integration tests
• Commits messages follow AP format
• Extend the documentation, if necessary
• Merging to main from fork:branchname

[netlify]

✅ Deploy Preview for ap-template-playground ready!

Name	Link
🔨 Latest commit	5e08aa0
🔍 Latest deploy log	https://app.netlify.com/sites/ap-template-playground/deploys/67e365343bfeea00089ad7ea
😎 Deploy Preview	https://deploy-preview-174--ap-template-playground.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[DianaLease]

Do we need the "explore" button on smaller screens? It scrolls to the footer in desktop view but the footer is removed in smaller views so it seems like that button shouldn't be shown when the footer is removed.

[surya4419]

Thanks for the feedback! @DianaLease However, I noticed that another recent PR(#190 ) added the footer back on smaller screens. Since the footer is now present, the "Explore" button remains relevant.
Would you like me to keep the "Explore" button as it is, given the new footer addition, or would you prefer that I remove it? Please let me know how you'd like to proceed.

[surya4419]

@DianaLease Thanks for your feedback earlier! Since PR #190 has now been successfully merged, the footer is back on smaller screens, making the "Explore" button still relevant. Given this update, could you please review my PR again and let me know if any further changes are needed?

[DianaLease]

@DianaLease Thanks for your feedback earlier! Since PR #190 has now been successfully merged, the footer is back on smaller screens, making the "Explore" button still relevant. Given this update, could you please review my PR again and let me know if any further changes are needed?

That makes sense, can you update your branch with the latest main and resolve conflicts so that we can test that it's working with the latest changes? Thanks!

[surya4419]

@DianaLease , I have updated my branch with the latest main and resolved all conflicts. Everything should be good to go for testing now. Let me know if you need any further changes. Thanks!

[DianaLease]

Is there a reason you removed the animation from the "Learn" button? If not, can you add that back?

[surya4419]

Is there a reason you removed the animation from the "Learn" button? If not, can you add that back?

I’ve re-added the animation for the 'Learn' button. Please take a look at my PR when you get a chance. Let me know if any further adjustments are needed!"

[surya4419]

@DianaLease could you please review my PR again.

[DianaLease]

@surya4419 can you check the failing tests?

[surya4419]

@surya4419 can you check the failing tests?

I have fixed the failing tests in my PR. Could you please review it when you have time? Let me know if any further changes are needed

[DianaLease]

Looks good! Can you just fix the merge conflict?

[surya4419]

Looks good! Can you just fix the merge conflict?

I’ve fixed the merge conflict. Please review and merge my PR when you get a chance. Thanks!