Rahul Fix Phase 3 Navbar

[slidracoon72]

Description

Related PRS:

This frontend PR applies fixes to the frontend PR #3391.
To test this frontend PR, you need to checkout the development backend PR.

Main changes explained:

• This PR fixes the navbar alignment issues in Phase 3 of the HGN Project, ensuring consistency with the main dashboard’s navbar. It adjusts button positioning and improves responsiveness across screen sizes. The navbar buttons are now horizontally aligned and adapt properly to smaller screens.
• See the recording of the issue here.

How to test:

1. check into current branch: git checkout rahul-fix-phase-3-navbar
2. do npm install and ... to run this PR locally
3. clear site data/cache
4. log as admin/owner user
5. go to: http://localhost:5173/communityportal
6. confirm that the navbar is properly aligned
7. ensure the navbar matches the main application’s navbar at http://localhost:5173/
8. verify the navbar alignment across all screen sizes. On smaller screens, check that after clicking the dropdown button, the buttons are displayed and aligned correctly

Screenshots and videos of changes:

Before:

After:

Check this video for the updates made.

[netlify]

❌ Deploy Preview for highestgoodnetwork-dev failed.

Name	Link
🔨 Latest commit	9abfd9c
🔍 Latest deploy log	https://app.netlify.com/projects/highestgoodnetwork-dev/deploys/6962bd37dd75140008779517

[beblicarl]

This functionality works as intended, and the code is great

[sonarqubecloud]

Quality Gate failed

Failed conditions
C Reliability Rating on New Code (required ≥ A)

See analysis details on SonarQube Cloud

Catch issues before they fail your Quality Gate with our IDE extension SonarQube for IDE